想要更好的理解JS继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念。
第一种:原型链继承
function Parent(){
this.name = 'web前端';
this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
console.log(this.name);
}
function Son(){};
Son.prototype = new Parent();
son1 = new Son();
son1.Say();
//①创建一个叫做Parent的构造函数,暂且称为父构造函数,里面有两个属性name、type
//②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
//③创建一个叫做Son的构造函数,暂且称为子构造函数
//④设置Son的属性(即原型对象)值为父构造函数Parent的实例对象,即子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
//⑤对Son构造函数进行实例化,结果赋值给变量son1,即son1为实例化对象,同样拥有2个属性和1个方法
//⑥输出son1的Say方法,结果为"web前端"
- 优点:可以实现继承
- 缺点:
①Son构造函数实例化对象无法进行参数的传递
②因为Son.prototype(即原型对象)继承了Parent实例化对象,这就导致了所有Son实例化对象都一样,都共享有原型对象的属性及方法。代码如下:
son1 = new Son();
son2 = new Son();
son1.type.push('VUE');
console.log(son1.type); //['JS','HTML','CSS','VUE']
console.log(son2.type); //['JS','HTML','CSS','VUE']
// 结果son1、son2都是['JS','HTML','CSS','VUE']
第二种:构造函数(经典继承)
这种方式,其实就是在子类型构造函数中借用父类的构造函数来生成自己的实例对象的属性。它可以向父类型的构造函数传递参数来初始化自己的实例属性。使用apply()和call()方法也可以在新创建的对象上执行构造函数。
function Parent(){
this.name = 'web前端';
this.type = ['JS','HTML','CSS'];
}
function Son(){
Parent.call(this);
}
son1 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
son2 = new Son();
console.log(son2.type);//['JS','HTML','CSS']
//①创建父级构造函数Parent,有name、type两个属性
//②创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
//③分别创建构造函数Son的两个实例化对象son1、son2,对son1的type属性新增元素,son2没有新增,结果不一样,说明实现了独立
- 优点:
①实现实例化对象的独立性;
②还可以给实例化对象添加参数
function Parent(name) {
this.name = name;
}
Parent.prototype.say = function(){
console.log(this.name)
}
function Son(name) {
Parent.call(this, name);
}
son1 = new Son('JSwwww');
console.log(son1.name);//JS
son2 = new Son('HTML');
console.log(son2.name);//HTML
son2.say() // Uncaught TypeError: son2.say is not a function 不能继承父级构造函数原型对象的方法
- 缺点:
①方法都在构造函数中定义,每次实例化对象都得创建一遍方法,基本无法实现函数复用
②call方法仅仅调用了父级构造函数的属性及方法,不能继承父级构造函数原型对象的方法
第三种:组合继承
结合前两种方式:原型链式继承和借用构造函数方式继承,我们就能解决前面提出的那些问题。
- 利用原型链继承(父类prototype上的)共有的属性和方法,
- 利用Call/Apply来继承父类构造函数里的属性(和方法)。
其基本思想是使用原型链实现对原型属性和方法的继承,在通过借用构造函数实现对实例属性的继承。既通过在原型上定义方法实现了函数的复用,又可以保证每个实例都有它自己的属性。
function Parent(name){
this.name = name;
this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
console.log(this.name);
}
function Son(name){
Parent.call(this,name);
}
Son.prototype = new Parent();
son1 = new Son('张三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//张三
son2.Say();//李四
//①创建一个叫做Parent的构造函数,里面有两个属性name、type
//②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
//③创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
//④子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
//⑤分别创建构造函数Son的两个实例化对象son1、son2,传不同参数、给type属性新增不同元素、调用原型对象Say方法
- 优点:
①利用原型链继承,实现原型对象方法的继承
②利用构造函数继承,实现属性的继承,而且可以传参
组合继承基本满足了JS的继承,比较常用 - 缺点:
无论什么情况下,都会调用两次父级构造函数:一次是在创建子级原型的时候,另一次是在子级构造函数内部。
第四种:原型式继承
创建一个函数,将参数作为一个对象的原型对象:
function fun(obj) {
function Son(){};
Son.prototype = obj;
return new Son();
}
var parent = {
name:'张三'
}
var son1 = fun(parent);
var son2 = fun(parent);
console.log(son1.name);//张三
console.log(son2.name);//张三
以上例子解释:
①创建一个函数fun,内部定义一个构造函数Son
②将Son的原型对象设置为参数,参数是一个对象,完成继承
③将Son实例化后返回,即返回的是一个实例化对象
优缺点:跟原型链类似
第五种:寄生继承
第六种:寄生组合继承
第七种:ES6 Class继承
ES6 引入了 Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。
ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
Class可以通过extends关键字来实现继承,让子类继承父类的属性和方法。
ES6规定,子类必须在constructor()方法中调用super(),否则就会报错。所以父类的构造函数必定会先运行一次
super: super表示父类(的构造函数),在子类的构造函数里,必须要调用父类的构造函数,而且,要写在子类构造函数里的第一句话;
// ES6的继承:
// 1、继承关系的关键字:extends;
// 2、子类构造函数里必须调用super(),而且必须写在子类构造函数的第一句话
// 3、ES6的这种写法就是个语法糖(换了写法,本质一样)
class Person {
constructor(name, sex) {
this.name = name;
this.sex = sex;
}
eat(str) {
console.log(this.name + "在吃" + str);
}
}
// extends关键字完成继承关系
class Doctor extends Person {
constructor(name, sex, dept) {
// super就是父类
super(name, sex); //这就相当于调用了父类的构造函数。这句话必须放在子类构造函数里的第一句话
this.dept = dept;
}
}
let d1 = new Doctor("娜可露露", "女", "儿科");
let d2 = new Doctor("宫本武藏", "男", "骨科");
console.log(d1.name);//娜可露露
console.log(d2.name);//宫本武藏
d1.eat("油泼面");//娜可露露再吃油泼面
super的作用:
1、可以用来调用父类的构造函数。
2、当父类和子类里有同名的方法时,那么,super,可以用来调用父类的方法;this可以用来调用子类的方法。
class Person {
constructor(name, sex) {
this.name = name;
this.sex = sex;
}
eat(str) {
console.log(this.name + "在吃" + str);
}
}
// extends关键字完成继承关系
class Doctor extends Person {
constructor(name, sex, dept) {
// super就是父类
super(name, sex);
this.dept = dept;
this.eat("北京烤鸭"); //娜可露露在吃北京烤鸭、宫本武藏在吃北京烤鸭
super.eat("南京板鸭"); //super:就是父类的对象//娜可露露在吃南京板鸭、宫本武藏在吃南京板鸭
}
eat(str) {
console.log(this.name + "在吃" + str);
}
}
let d1 = new Doctor("娜可露露", "女", "儿科");
let d2 = new Doctor("宫本武藏", "男", "骨科");
- 优点:极大地简化了原型链代码;
- 缺点:不能兼容所有的浏览器。
网友评论