前言
在面向对象编程中，对象的继承是很重要的一个概念。A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。
现在梳理下js的继承
方式一、原型链继承
实现核心
这个继承方法的核心是：将父类的实例作为子类的原型
// 父类
function Parent(name) {
this.name = name;
this.play = [1, 2, 3];
this.setName = function (name) { this.name = name };
}
Parent.prototype.getName = function () {
console.log("parent name:", this.name);
}
// 子类
function Child(name) {
this.name = name;
}
// 核心： 将父类的实例作为子类的原型
Child.prototype = new Parent("father");
Child.prototype.constructor=Child；//需手动绑定constructor
var child1 = new Child("son1");
child1.getName();//parent name: son1
child1.setName("ganin");
child1.getName();//parent name: ganin
var child2 = new Child("son2");
child2.getName();//parent name: son2
这种方法实际是将子类的原型指向父类的实例，所以子类还是可以通过getPrototypeOf访问到Parent的实例的，这样就可以访问的父类的私有方法了，然后在通过getPrototypeOf就可以获得父类原型上的方法了。简单来说就是子类继承父类的属性和方法是将父类的私有属性和公有方法都作为自己的公有属性和方法。这样也有一个不足之处，如果说父类的私有属性中有引用类型的属性，那它被子类继承的时候会作为公有属性，这样子类1操作这个属性的时候，就会影响到子类2。见例子：
console.log(child2.play)//[ 1, 2, 3 ]
child1.play.push(4)
console.log(child2.play)//[ 1, 2, 3, 4 ]
特点
✔️父类新增原型方法/原型属性，子类都能访问到
✔️简单，易于实现
缺点
❌无法实现多继承
❌不能定义私有属性方法
❌没办法向父类传递参数
❌无论是定义还是继承都需要手动修改 constructor
❌要想为子类新增属性和方法，必须要在Student.prototype = new Person() 之后执行，不能放到构造器中。
方式二、构造函数继承(类式继承)
实现核心：在子类型构造函数中使用call()调用父类型构造函数
// 父类
function Parent(name,age){
this.name=name;
this.age=age;
this.play = [1, 2, 3];
this.setName = function (name) { this.name = name };
}
Parent.prototype.getName = function () {
console.log("parent name:", this.name);
}
function Child(name,age){
Parent.call(this,name,age);
}
var child1=new Child("agam",20);
var child2=new Child("tom",20);
console.log(child1.name)//agam
child1.setName("agamgn")
console.log(child1.name)//agamgn
console.log(child2.name)//tom
child1.getName();//child1.getName is not a function
这种方式只是实现部分的继承，如果父类的原型还有方法和属性，子类是拿不到这些方法和属性的。
特点
✔️可以定义私有属性方法，解决了原型链继承中子类实例共享父类引用属性的问题
✔️子类可以向父类传递参数
✔️可以实现多继承(call多个父类对象)
缺点
❌实例并不是父类的实例，只是子类的实例
❌只能继承父类的实例属性和方法，不能继承原型属性和方法
❌无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
方式三、组合继承(原型链+构造函数)
实现核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。
// 父类
function Parent(name,age){
this.name=name;
this.age=age;
this.play = [1, 2, 3];
this.setName = function (name) { this.name = name };
}
Parent.prototype.getName = function () {
console.log("parent name:", this.name);
}
function Child(name,age){
Parent.call(this,name,age);
}
Child.prototype=new Parent();
Child.prototype.constructor=Child;//组合继承也是需要修复构造函数指向的
Child.prototype.satHello=function(){console.log("hello")}
var child1=new Child("agam",18);
var child2=new Child("agamgn",18);
console.log(child1)//Child { name: 'agam',
age: 18, play: [ 1, 2, 3 ], setName: [Function] }
child1.setName("Tom")
console.log(child1)//Child { name: 'Tom',
age: 18, play: [ 1, 2, 3 ], setName: [Function] }
console.log(child2)//Child {name: 'agamgn',
age: 18, play: [ 1, 2, 3 ],setName: [Function] }
这种方式是 JavaScript 中最常用的继承模式。不过也存在缺点就是无论在什么情况下，都会调用两次构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数的内部，子类型最终会包含父类型对象的全部实例属性，但我们不得不在调用子类构造函数时重写这些属性。
特点
✔️可以继承实例属性/方法，也可以继承原型属性/方法
✔️公有的写在原型，私有的写在构造函数
✔️可以向父类传递参数
✔️函数可复用
缺点
❌调用了两次父类构造函数，生成了两份实例(子类实例将子类原型上的那份屏蔽了)
❌ 需要手动绑定 constructor
方式四、组合继承优化1
实现核心:通过父类原型和子类原型指向同一对象
// 父类
function Parent(name,age){
this.name=name;
this.age=age;
this.play = [1, 2, 3];
this.setName = function (name) { this.name = name };
}
Parent.prototype.getName = function () {
console.log("parent name:", this.name);
}
function Child(name,age){
Parent.call(this,name,age);
}
// 此处父类原型和子类原型指向同一对象
Child.prototype=Parent.prototype;
Child.prototype.satHello=function(){console.log("hello")}
var child1=new Child("agam",18);
var child2=new Child("agamgn",18);
console.log(child1)//Child { name: 'agam', age: 18, play: [ 1, 2, 3 ], setName: [Function] }
child1.setName("Tom")
console.log(child1)//Child { name: 'Tom', age: 18, play: [ 1, 2, 3 ], setName: [Function] }
console.log(child2)//Child {name: 'agamgn',age: 18, play: [ 1, 2, 3 ],setName: [Function] }
特点
✔️不会初始化两次实例方法/属性，避免的组合继承的缺点
缺点
❌没办法辨别是实例是子类还是父类创造的，子类和父类的构造函数指向是同一个
方式五、原型式继承
实现核心:直接使用 ES5 Object.create 方法，该方法的原理是创建一个构造函数，构造函数的原型指向对象，然后调用 new 操作符创建实例，并返回这个实例，本质是一个浅拷贝。
// 父类
function Parent(name,age){
this.name=name;
this.age=age;
this.play = [1, 2, 3];
this.setName = function (name) { this.name = name };
}
Parent.prototype.getName = function () {
console.log("parent name:", this.name);
}
function Child(name,age){
Parent.call(this,name,age);
}
// 核心代码
Child.prototype=Object.create(Parent.prototype);
Child.prototype.constructor=Child;//核心代码
var child1=new Child("agam",18);
var child2=new Child("agamgn",18);
console.log(child1)//Child { name: 'agam', age: 18, play: [ 1, 2, 3 ], setName: [Function] }
child1.setName("Tom")
console.log(child1)//Child { name: 'Tom', age: 18, play: [ 1, 2, 3 ], setName: [Function] }
console.log(child2)//Child {name: 'agamgn',age: 18, play: [ 1, 2, 3 ],setName: [Function] }
特点
✔️父类方法可以复用
缺点
❌父类引用属性全部被共享
❌子类不可传递参数给父类
方式六、ES6 class
实现核心:ES6中引入了class关键字，是一种语法糖。
class Parent{
constructor(name){
this.name=name;
}
getName(){
console.log(this.name);
}
}
let p=new Parent("ganin");
console.log(p);//Parent { name: 'ganin' }
class Child extends Parent{
constructor(name,age){
super(name);//通过supper调用父类的构造方法
this.age=age;
}
get(){
console.log(this.name,this.age)
}
}
let s=new Child("tom",18);
console.log(s)//Child { name: 'tom', age: 18 }
特点
✔️语法简单易懂,操作更方便
缺点
❌并不是所有的浏览器都支持class关键字
网友评论