JS 原型从入门到实践

很多看起来简单的事情，坚持做到极致就有非凡的力量。

我们可以在原型对象上增加特定属性，原型是定义属性和功能的一种便捷方式，对象可以访问原型上的属性和功能。

在JS中的原型，类似于面向对象语言中的类(class)，原型的主要用途是使用一种类风格的面向对象和继承的方式编码。

大纲

• 原型的概念
• 原型的作用
• 原型链

原型的概念

原型的概念很简单，每个对象都含有原型的引用，当查找属性时，若对象本身不具有该属性，则会查找原型上是否有该属性。

你可以假想下，你正在和一组人玩一个游戏，游戏规则为：主持人问，如果你的脑子知道答案，则可直接回答；如果你不知道答案，则可以询问你的下一个小伙伴。

原型的作用

在JS中，对象是属性名与属性值的集合。例如，简单的创建一个对象字面量：

let obj = {
  prop1:1,
  prop2:function(){},
  prop3:{}
}

在软件开发过程中，为了避免重复造轮子，我们希望能尽可能的复用代码，继承是复用代码的一种方式，在JS中，可通过原型实现继承，将一个对象属性扩展到另一个对象上。

对象通过原型访问其他对象的属性

//创建3个带有属性的对象。
const a = { swim: true };
const b = { run: true };
const c = { fly: true };

//a对象只能访问自身的属性swim。
console.assert("swim" in a, "a对象会游泳");
console.assert(!("run" in a), "a对象不会跑");
console.assert(!("fly" in a), "a对象不会游泳");

/*console.assert如果断言为false，则将一个错误消息写入控制台。如果断言是true，没有任何反应。*/

//Object.setPrototypeOf方法，将对象b设置为a对象的原型。
Object.setPrototypeOf(a, b);
console.assert("run" in a, "a对象现在会跑了");//通过将b对象设置为a对象的原型，现在a可以访问b对象的属性。
console.assert(!("fly" in b), "b对象不会飞");//目前b对象还不具有fly属性

Object.setPrototypeOf(b, c);//将c对象设置为b对象的原型
console.assert("fly" in b, "b对象现在会飞了");//现在b对象可以访问属性fly
console.assert("fly" in a, "a对象现在也会飞了");//现在a的原型是b，b的原型是c，所以a也拥有了c的属性。
//以上都为true

通过Object.setPrototypeOf(a, b)和Object.setPrototypeOf(b, c)，a继承了b的属性，b又继承了c的属性，所以a拥有了b和c的属性。当访问a.fly时，首先查找对象a，然后在查找对象b ，最后查找对象c。

原型链

每个对象都可以有一个原型，每个对象的原型也可以拥有一个原型，以此类推，形成一个原型链。查找特定属性将会被委托在整个原型链上，只有当没有更多的原型可以进行查找时，才会停止查找。

例如上面的例子，在a上查询属性fly的值时，首先在a上进行查找，在a上没有找到该属性，因此继续在a的原型即b上进行查找。在b上仍然没有属性fly，因此会继续在b的原型即c上进行查找，最终找到该属性的值。

文章字数虽少，但短小精悍，希望能有效帮助你理解原型的意义。