JavaScript中的原型链和继承

理解原型链

在 JavaScript 的世界中，函数是一等公民。 上面这句话在很多地方都看到过。用我自己的话来理解就是：函数既当爹又当妈。“当爹”是因为我们用函数去处理各种“粗活累活”（各种工具函数、页面交互、业务逻辑等）；“当妈”是因为函数还会“生孩子”（创建对象）。

在 JavaScript 的世界中，每一个对象都有一个隐藏的__proto__属性。这个属性指向生成这个对象的构造函数的原型(prototype)。事实上，所有函数都有一个原型。考虑如下例子：

function Human() {}
var h1 = new Human()
var h2 = new Human()

// h1和h2都是是由Human函数创建出来的对象（称为Human的实例对象），所以：
h1.__proto__ = Human.prototype
h2.__proto__ = Human.prototype

// Human.prototype是一个对象（且称为原型对象吧），因此可以给它添加一些属性或者方法，比如：
Human.prototype.legs = 2
Human.prototype.sleep = function() {
  console.log('sleeping....')
}
复制代码

所有实例对象都可以访问到相应原型对象里面的属性和方法。（理解原型链的关键）

// 不难得出结论：
h1.legs === 2 // true
h2.legs === 2 // true

h1.sleep() // sleeping....
h2.sleep() // sleeping....
复制代码

#实现继承

再看另外一个构造函数：

function Coder() {}

欢迎加入全栈开发交流群一起学习交流：864305860
// 如果在这里把Human的原型赋给Coder的原型
Coder.prototype = Human.prototype

// 接着再添加一些Coder自己的原型方法和属性
Coder.prototype.age = 24
Coder.prototype.work = function() {
  console.log('write code')
}

// 新建一个Coder对象
var c1 = new Coder()

// 不难得出
c1.age === Coder.prototype.age // true 24
c1.work === Code.prototype.work // true

c1.legs === Human.prototype.legs // true 2
c1.sleep === Human.prototype.sleep // true
复制代码

jsfiddle

虽然把 Human 的原型直接赋给 Coder 的原型可以让 Coder 的实例访问到 Human 原型上的属性和方法，但是如果想单独修改 Coder 原型的话会影响到 Human 原型上的值，这显然不是我们所期望的。

Coder.prototype.sleep = function() {
  console.log('still write code....')
}
// 修改了Coder的原型，但同时也会影响Human的原型
// 因此需要修改Coder.prototype的指向从而避免这个问题
Coder.prototype = h1 // h1是Human的一个实例
复制代码

所以应该这样写：

Coder.prototype = new Human()
// 或者
Coder.prototype = Object.create(Human.prototype)
// 实际上这两种写法还是有一定的区别
复制代码

从而实现了 JavaScript 最简单的原型链式继承。

不过这么写还是会有以下两个缺陷：

父类构造函数中的引用类型的属性（方法）是所有子类实例共享的，所以会出现改动一个实例的属性（或方法）会影响所有实例的属性（或方法）。

创建子类实例时，无法向父类构造函数传参。

所以需要在子类构造函数内调用一下父类构造函数，并把子类的this绑定上去：

function Coder(arg) {
  Human.call(this, arg)
  // 接着再写自身的属性（方法）
}
复制代码

获取源码

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

转载于:https://juejin.im/post/5bde7f40518825171b2d8396