为何用“继承”为标题，而不用“原型链”？
原型链如果解释清楚了很容易理解，不会与常用的java/C#产生混淆。而“继承”确实常用面向对象语言中最基本的概念，但是java中的继承与javascript中的继承又完全是两回事儿。因此，这里把“继承”着重拿出来，就为了体现这个不同。
javascript中的继承是通过原型链来体现的。先看几句代码
function Foo() {};
Foo.prototype.a = 10;
Foo.prototype.b = 20;
var obj = new Foo();
obj.a = 1;
console.log(obj.a); // 1
console.log(obj.b); // 20
以上代码中，obj是Foo函数new出来的对象，obj.a是obj对象的基本属性，obj.b是怎么来的呢？——从Foo.prototype得来，因为obj._proto_指向的是Foo.prototype
访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着_proto_这条链向上找，这就是原型链。
也就是访问一个对象属性的时候，在基本属性中先查找，如果找到了直接返回，找不到的话，顺着原型链继续查找，如果找到了就返回，找不到返回undifined。
那么我们在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢？大家可能都知道答案了——hasOwnProperty，特别是在for…in…循环中，一定要注意。
for(var key in obj) {
console.log(key); // a b
}
for(var key in obj) {
if (obj.hasOwnProperty(key)) {
console.log(key); // a
}
}
For…in循环会将对象原型链上的属性都遍历到，hasOwnProperty这个方法我们没有定义在obj里面啊，从哪里来？对象的原型链是沿着_proto_这条线走的，因此在查找obj.hasOwnProperty属性时，就会顺着原型链一直查找到Object.prototype。
由于所有的对象的原型链都会找到Object.prototype，因此所有的对象都会有Object.prototype的方法。这就是所谓的“继承”。
当然这只是一个例子，你可以自定义函数和对象来实现自己的继承。
说一个函数的例子吧。
我们都知道每个函数都有call，apply方法，都有length，arguments，caller等属性。为什么每个函数都有？这肯定是“继承”的。函数由Function函数创建，因此继承的Function.prototype中的方法。不信可以请微软的Visual Studio老师给我们验证一下：
jicheng1.png
看到了吧，有call、length等这些属性。
那怎么还有hasOwnProperty呢？——那是Function.prototype继承自Object.prototype的方法。有疑问可以看看上一节将instanceof时候那个大图，看看Function.prototype._proto_是否指向Object.prototype。
所以JavaScript的继承也可以说是通过原型链(_proto_)查找到原型(prototype)而实现的。
继承的五种方式
下面我们创建了两个构造函数：
父类
function Parent() {
this.value = 'Super';
}
子类：
function Child(name, age) {
this.name = name;
this.age = age;
this.run = function () {
return this.name + ' ' + this.age + 'is runing!';
};
}
JavaScipt种的继承实际上是使用原型链来实现的。继承的意思，实际上就是让子类可以使用父类上的属性方法。我认为，也就是修改原型链的指向，获得父类prototype的属性集合。
一、原型链方法
这种方法很常见，如果子类的prototype原型指向了，超类（Parent）的实例，那就可以使用所有超类的属性了。
function Child(name, age) {
this.name = name;
this.age = age;
this.run = function () {
return this.name + ' ' + this.age + 'is runing!';
};
}
Child.prototype = new Parent();
// 将子类的prototype 赋值为 父类的实例，这样就继承了父类上的属性和方法。
var xiaoming = new Child('xiaoming', 12);
console.log(xiaoming.value); // Super 可以调用到父类的value属性
这样写会有一个问题:
console.log(Child.prototype.constructor);
// ƒ Parent() { this.value = 'Super'; }
// 这里的构造器指向了父类，这样很怪异，毕竟我们是通过子类创建的实例
// 手动矫正一下
Child.prototype.constructor = Child;
// 指向子类构造函数本身
还有一个问题是引用类型属性共享的问题；
首先父类更改为:
function Parent() {
this.value = 'Super';
this.hobby = ['爬山', '学习'];
}
创建两个子类实例，小白和小丽，并输出他们继承父类的爱好属性:
const xiaobai = new Child('小白', 11);
const xiali = new Child('小丽', 15);
console.log(xiaobai.hobby);
// ["爬山", "学习"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]
给小白的爱好增加一项看书，我们会发现：
xiaobai.hobby.push('看书');
console.log(xiaobai.hobby);
// ["爬山", "学习", "看书"]
console.log(xiaoli.hobby);
// ["爬山", "学习", "看书"]
因为两者的prototype指向的是同一个父类实例对象。而对象是引用类型，所以更改其中一项的值，另外一项也会改变。
当然，原型链方法还有一个问题，那就是无法向父类传参。
二、借用构造函数
第一种方法也是最简单的方法，在这里，我们借用call/apply函数可以改变函数作用域的特性，在子类中调用父类构造函数，复制父类的属性。此时没调用一次子类，复制一次。此时，每个实例都有自己的属性，不共享。同时我们可以通过call/apply函数给父类传递参数。
父类：
function Parent(value) {
this.value = value;
this.hobby = ['爬山', '学习'];
}
子类：
function Child(value) {
Parent.call(this, value);
}
使用call/apply这种方式，有效解决了共享属性这个问题（实际上每次新建一个子类的同时，也新建了一个父类此处个人理解，如有问题请指正），也解决了传参问题：
const xiaobai = new Child('xiaobai');
const xiaoli = new Child('xiaoli');
xiaobai.hobby.push('看书');
console.log(xiaobai.value); // xiaobai
console.log(xiaoli.value); // xiaoli
console.log(xiaobai.hobby);
// ["爬山", "学习", "看书"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]
上述方法也存在一个问题，共享的方法都在构造函数中定义，无法达到函数复用的效果。也就是如果父类上的一些可以共享的方法属性无法复用，每个子类都是一套单独子类与继承结合。
三、组合继承
根据上述两种方式，我们可以扬长避短，将需要共享的属性使用原型链继承的方法继承，将实例特有的属性，用借用构造函数的方式继承。
父类：
function Parent() {
this.hobby = ['爬山', '学习'];
}
Parent.prototype.sayHi = function () {
return 'hello world!';
};
子类：
// 构造函数继承
function Child() {
Parent.call(this);
}
// 原型链继承
Child.prototype = new Parent();
创建两个实例输出两个实例的hobby：
const xiaobai = new Child('xiaobai');
const xiaoli = new Child('xiaoli');
console.log(xiaobai.hobby);
// ["爬山", "学习"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]
修改其中一个hobby，两者不会相互影响：
xiaobai.hobby.push('看书');
console.log(xiaobai.hobby);
// ["爬山", "学习", "看书"]
console.log(xiaoli.hobby);
// ["爬山", "学习"]
两个实例继承的共同属性：
console.log(xiaobai.sayHi()); // hello world!
console.log(xiaoli.sayHi()); // hello world!
为什么说继承的是同一个属性？我们在这后面修改一下sayHi
Parent.prototype.sayHi = function() {
return 'hello 2019!';
}
console.log(xiaobai.sayHi()); // hello 2019!
console.log(xiaoli.sayHi()); // hello 2019!
到这里的时候我有一个疑问，构造函数继承和原型链继承同时使用，为什么就会共享同一个属性了？为什么hobby就不被影响了。call方法其实就是将父类的指向改为子类实例对象，而这个函数的prototype上的属性并没有被继承来。而原型链继承，才具有hobby属性和sayHi两个属性。
const xiaobai = new Child('xiaobai');
const xiaoli = new Child('xiaoli');
xiaobai.hobby.push('看书');
console.log(xiaobai);
console.log(xiaoli);
jicheng.png
实例创建的时候有了自己的hobby属性，所以不需要去prototype上查找。蓝色为自己的hobby属性，红色是继承来的属性。
上述方法，虽然综合了原型链和借用构造函数的优点，达到了我们想要的结果，但是它存在一个问题。就是创建一次实例时，两次调用了父类构造函数。
为什么调用两次现在就很清楚了。有两个hobby属性嘛...
// 构造函数继承
function Child(value) {
Parent.call(this);
// 第二次创建对象，并创建bobby属性
}
// 原型链继承
Child.prototype = new Parent();
// 第一次调用父类构造函数生成实例，获得了hobby属性
四、寄生式继承
与寄生构造函数和工厂模式类似，创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象。
function createAnother(original) {
var clone = new Object(original);
clone.sayHi = function () {
console.log('hello world');
};
return clone;
}
var xiaoming = {
name: '小明',
friend: ['李白', '杜甫']
};
var xiaobai = {
name: '小白',
friend: ['李白', '杜甫']
};
createAnother(xiaoming);
xiaoming.friend.push('白居易');
console.log(xiaoming.friend);
// ["李白", "杜甫", "白居易"]
createAnother(xiaobai);
console.log(xiaobai.friend);
// ["李白", "杜甫"]
在上述例子中，createAnother函数接收了一个参数，也就是将要作为新对象基础的对象。
小白和小明是基于createAnother创建的一个新对象，新对象不仅具有自己的所有属性和方法，还有自己的共同的sayHi()方法。
五、寄生组合式继承
寄生组合式继承就是为了解决组合继承种调用两次父类的情况：
// 创建只继承原型对象的函数
function inheritPrototype(parent, child) {
// 创建一个原型对象副本
var prototype = new Object(parent.prototype);
// 设置constructor属性
prototype.constructor = child;
child.prototype = prototype;
}
// 父亲类
function Parent() {
this.color = ['pink', 'red'];
}
Parent.prototype.sayHi = function() {
console.log('Hi');
}
// 儿子类
function Child() {
Parent.call(this);
}
inheritPrototype(Parent, Child);
六、原型式继承
思想：基于已有的对象创建对象。
function createAnother(o) {
// 创建一个临时构造函数
function F() {
}
// 将传入的对象作为它的原型
F.prototype = o;
// 返回一个实例
return new F();
}
网友评论