javascript继承总结JavaScriptZhuAiQuan的博客-

ES5中的继承

一 原型链继承

原型链继承的原理：直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承。

// 父类 function fat () { this.name = 'zaq' } // 父类上的原型方法 fat.prototype.getName = function() { return this.name } // 子类 function child () {} // 子类的原型对象方法指向父类 子类中找不到的属性方法就会向父类找 child.prototype = new fat() // 不影响继承 顺便绑一下constructor child.prototype.constructor = child // child实例就可以访问父类及其原型上的属性和方法了 const Child = new child() Child.name // 'zaq' Child.getName() // 'zaq' 

原型链继承的缺点

1、所有的child实例原型都指向同一个fat实例，因此对child实例修改某个父类引用类型会影响所有的child实例；
2、创建子类时无法向父类传参，没有实现super()的功能

function fat () { this.name = 'zaq' }  fat.prototype.getName = function() { return this.name } function child () {} child.prototype = new fat() child.prototype.constructor = child // const Child1 = new child(); const Child2 = new child(); Child1.name = 'lsq' console.log(Child1.name) // lsq // 本来父类name属性是zaq 然后现在== console.log(Child2.name) // lsq 

二 构造函数继承

构造函数继承：在子类的构造函数中执行父类的构造函数，并为其绑定子类的this。让父类的构造函数把成员的属性和方法都挂在子类的this上，这样既避免了共用一个原型实例，又能像父类构造函数传参。

function fat (name) { this.name = name } fat.prototype.getName = function() { return this.name } function Child () {  fat.call(this, 'zaq') } const child1 = new Child() const child2 = new Child() child1.name = 'xyc' console.log(child1.name) // xyc console.log(child2.name) // zaq 

构造函数继承的缺点

继承不到父类上的属性和方法

child1.getName() // Uncaught TypeError: child1.getName is not a function 

三 组合式继承
既然原型链继承和构造函数继承都有各自的缺点但是又能互补，那何不将两者结合起来使用；

function fat (name) { this.name = name } fat.prototype.getName = function() { return this.name } // 构造函数继承 function Child () {  fat.call(this, 'zaq') } // 原型链继承 Child.prototype = new fat() Child.prototype.constructor = Child  const child1 = new Child() const child2 = new Child() child1.name = 'lsq' console.log(child1.name) // lsq console.log(child2.name) // zaq child1.getName() // lsq 

组合式继承的缺点

每次创建子类实例都执行了两次构造函数（fat.call()和new fat()），虽然不影响继承，但是在子类创建时 原型中会存在两份相同的属性和方法。

四 寄生式组合继承

为了解决构造函数被执行两次的问题，我们将指向父类实例 变成转向父类原型，减少一次构造函数的执行

function fat (name) { this.name = name } fat.prototype.getName = function() { return this.name } // 构造函数继承 function Child () {  fat.call(this, 'zaq') } // 原型链继承 Child.prototype = fat.prototype // 将指向父类实例转成转向父类原型 Child.prototype.constructor = Child  const child1 = new Child() const child2 = new Child() child1.name = 'lsq' console.log(child1.name) // lsq console.log(child2.name) // zaq child1.getName() // lsq 

但是这种方法也存在一个问题，就是子类和父类的原型都指向同一个对象，如果我们对子类原型操作就会对父类原型产生影响。比如给子类Child.prototype新增一个getName方法,那么父类fat.prototype也增加或是被覆盖一个getName方法。为了解决这个问题 我们给fat.prototype做一个浅拷贝；

function fat (name) { this.name = name } fat.prototype.getName = function() { return this.name } // 构造函数继承 function Child () {  fat.call(this, 'zaq') } // 原型链继承 Child.prototype = Object.create(fat.prototype) // 将指向父类实例转成转向父类原型 Child.prototype.constructor = Child  const child1 = new Child(); const child2 = new fat(); child1.getName() // zaq child2.getName() // undefined 

到这里我们就完成了es5里的继承，有空更新es6的继承方法

ES6中的继承

class介绍 来自阮一峰

es6中的继承：
1、class可以理解为functon,由于class本质还是一个function，因此它也有一个prototype属性。当new一个class时，会把class的protortype属性赋值给这个新对象的_proto_属性上；
2、constructor是默认添加的方法，在new一个对象的时候，会自动调用该方法, constructor里定义自己的属性；
3、继承extends和super， class子类名 extends父类名 实现继承。当然，还得在constructor里写上super (父类的参数)，意思就是在子类中获取父类的this指针，相当于fat.call(this)，参考

// 父类 class fat { constructor(props) { this.name = props || ''; } getName () { return this.name  } } // 继承 class Child extends fat { constructor(props, attrs) { // props继承父类的属性，attrs自己私有的属性 super(props); // 相当于获取父类的this指向 this.rename = props.rename || '' this.attrs = attrs  } // 子类自己的方法 getFatname () { return this.name  } getAttrs () { return this.attrs  } } // 通过new实例化一个构造函数 const child1 = new Child({  name: 'zaq',  rename: 'zwj' }, 'mine attrs') child1.getName() // zaq child1.getRename() // zwj child1.getAttrs() // mine attrs 

end… 散会