原型链、继承--Mr.Ember
构造函数、原型对象和实例之间的关系
functionF(){}; var f = new F(); // 构造器 F.prototype.constructor === F; // true F.__proto__ === Function.prototype; // true Function.prototype.__proto__ === Object.prototype; // true Object.prototype.__proto__ === null; // true // 实例 f.__proto__ === F.prototype; // true F.prototype.__proto__ === Object.prototype; // true Object.prototype.__proto__ === null; // true
图示表示如下
ES6 extends继承做了什么操作
class Parent{ constructor(name) { this.name = name; } static sayHello() { console.log(‘hello‘) } sayName() { console.log(‘name is‘ + this.name) return this.name } } class Child extends Parent{ constructor(name, age) { super(name) this.age = age; } sayAge() { console.log(‘age is‘ + this.age) return this.age } } let parent = new Parent(‘Parent1‘); let child = new Child(‘Child1‘, 18); console.log(‘parent:‘ + parent); //parent:[object Object] Parent.sayHello(); //hello parent.sayName(); //name is Parent1 console.log(‘child:‘ + child); //child:[object Object] Child.sayHello(); //hello child.sayName(); //name is Child1 child.sayAge(); //age is 18
代码中有两条原型链
// 1、构造器原型链 Child.__proto__ === Parent; // true Parent.__proto__ === Function.prototype; // true Function.prototype.__proto__ === Object.prototype; // true Object.prototype.__proto__ === null; // true // 2、实例原型链 child.__proto__ === Child.prototype; // true Child.prototype.__proto__ === Parent.prototype; // true Parent.prototype.__proto__ === Object.prototype; // true Object.prototype.__proto__ === null; // true
此时两条链如下图所示关系
结合代码知道，ES6extends继承，主要是：
1. 把子类构造函数（Child）的原型（__proto__）指向了父类构造函数（Parent）
2. 把子类实例child的原型对象(Child.prototype)的原型（__proto__）指向了父类parent的原型对象（Parent.prototype）
3. 子类构造函数Child继承了父类的构造函数Parent的属性。使用super调用的（es5则用call或者apply调用传参）
//简版：应用new会设置__proto__链接的原理 兼容ES5以前版本 if(typeof Object.create !==‘function‘) { Object.create = function(proto) { function F() {} F.prototype = proto; return new F(); } }
// 仅适用于Chrome和FireFox，在IE中不工作： Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) { obj.__proto__ = proto; return obj; }
extends继承做了什么操作和设置 __proto__的知识点后，把上面 ES6例子的用 ES5就比较容易实现了，也就是说实现寄生组合式继承，简版代码就是：function Parent(name) { this.name = name; } Parent.sayHello = function() { console.log(‘hello‘) } Parent.prototype.sayName = function() { console.log(‘name is‘ + this.name); return this.name; } function Child(name, age) { // 相当于super Parent.call(this, name); //绑定this 继承Parent的属性 this.age = age; } //new function object() { //兼容es5的new新对象问题 function F() {} F.prototype = proto; return new F(); } function _inherits(Child, Parent) { //object.create Child.prototype = Object.create(Parent.prototype); //__proto__ //Child.prototype.__proto__ = Parent.prototype; Child.prototype.constructor = Child; //ES6 //Object.setPrototypeof(Child, Parent); //__proto__ Child.__proto__ = Parent; } _inherits(Child, Parent) Child.prototype.sayAge = function() { console.log(‘age is‘ + this.age) return this.age; } var parent = new Parent(‘parent2‘) var child = new Child(‘Child2‘, 18)
寄生组合式继承是开发者使用较多的继承方式。
原文：https://www.cnblogs.com/teteWang-Ember/p/10438727.html