对象原型

相信大家都这样用过 map ：let arr = [0, 1, 2]

let doubleArr = arr.map(c => c * 2)

console.log(doubleArr) // 0, 2, 4

不知道你有没有想过， arr 本身并没有设定 map 属性，那为什么可以用 map 这个函数呢？

把它打印出来看看：console.log(arr)

// 0: 0

// 1: 1

// 2: 2

// length: 3

// __proto__: Array(0)

出现了一个名为 __proto__ 的对象，如果再将其展开，就会看到所有 Array 对象可以使用的函数；当然我们也可以在其中找到 map 函数，而这也正是例子中所调用的 arr.map 这个函数：console.log(arr.map === arr.__proto__.map) // true

这里出现的 __proto__ 对象，也就是所谓的 原型对象(Prototype) 。

不同于 Java、C# 等基于类(Class) 的面向对象语言，通过定义类、创建实例、指定继承等方式来传递属性及方法；Javascript 则是个基于原型(Prototype)的对语言 ，通过预先建立出的原型对象，当新对象建立时指定对象的原型要参照哪个原型对象。

而当我们调用对象的属性或方法时，若对象本身没有这个属性或方法，JavaScript 会自动寻找它原型中的方法，这也就是为什么可以直接调用 arr.map 而不会出错的原因。

原型链

你可能已经发现在前面的例子中，__proto__ 对象里仍然有 __proto__ 属性：console.log(arr.__proto__) // Array 的 Prototype

console.log(arr.__proto__.__proto__) // Object 的 Prototype

console.log(arr.__proto__.__proto__.__proto__) // null

在上述机制中，每当对象建立时都会绑定原型，既然对象都有原型，对象原型本身也是对象，自然也不例外；由这个例子中我们可以看出：arr 是数组实例，原型是 Array

arr.__proto__ 是数组的原型，原型是 Object

arr.__proto__.__proto__ 是对象的原型，原型是 null

arr.__proto__.__proto__.__proto__ 是 null，没有任何属性

由于每个对象都有原型，这样就形成了一个关联一个、层层相互依赖的从属关系，我们把它们叫做原型链(Prototype Chain) ；通过这种机制，让对象得以使用原型中的属性和方法，并凭借原型链一层一层的按顺序继承，让对象能拥有原型链上所有原型的功能，这就是 JavaScript 对象背后的运作机制。补充：在 JavaScript 中，几乎每个原型链的末端都会是 Object，并最后指向到 null。

使用原型

说了这么多，该来点代码了，接下来就来练习一下原型的建立、设定及修改吧。

先来创建一个新的对象构造函数：function Person(name) {

this.name = name

}Person.prototype.hello = function () {

console.log(`Hello ${this.name}.`)

}let gary = new Person('Gary')

gary.hello() // Hello Gary.Object.getPrototypeOf(gary) // {hello: ƒ, constructor: ƒ}

上面的例子创建了一个简单的对象构造函数 Person()，并在构造函数中设定对象属性。对象的方法中，由于方法不需要让每个对象都独自拥有一份，以避免造成冗余的内存消耗，应该要像前面 Array.prototype.map 的例子那样把对象的方法设定给原型对象(Person.prototype)，让这个构造函数创建出来的对象都可以共用这些方法。最后建立一个新的 Person 对象，并通过 getPrototypeOf(obj) 获取新产生对象的原型。Q：为什么不直接用 __proto__ 获取原型对象？

A：因为虽然 __proto__ 被几乎所有的浏览器支持，但它是非标准属性；通过 getPrototypeOf 取得对象的原型是正确的方法。

提醒：Person.prototype 不是 Person 的原型，而是构造函数执行后所建立的新对象的原型；千万不要把构造函数的 prototype 属性与对象的原型搞混！

原型继承

接着再创建新的对象原型，并继承 Person：function Engineer(name, skill) {

Person.call(this, name)

this.skill = skill

}

Engineer.prototype = Object.create(Person.prototype)

Engineer.prototype.constructor = Engineerlet alice = new Engineer('Alice', 'JavaScript')

alice.hello() // Hello Alice.

console.log(alice.skill) // JavaScriptObject.getPrototypeOf(alice)

// Person {constructor: ƒ}

这里建立了新的对象 Engineer 的原型，并通过 Engineer.prototype 的指定，让它的原型继承自 Person.prototype，最后再重新设定 Engineer.prototype.constructor，让构造函数重新指回自己；这样就完成了最基本的原型继承。Q：为什么需要重新设定 constructor？

A：这边功过 Object.create 复制了 Person.prototype 的全部属性，连同 constructor 属性都会被覆盖掉，如果 constructor 属性错误，在做 instanceof 判断时会产生错误的结果；因此这边设定继承时需要再次将 constructor 重新指定回构造函数本身。

修改原型

原型的引用、继承是直接参照到原型对象上，并非是在每个对象都复制一份原型；因此可以利用这个特性，在原型上增加自定义的属性和方法，让所有该类型的对象都能得到新方法；许多针对旧版浏览器的 Polyfill 就是这样实现的。

例如我们在写 Vue 项目的时候，可能都有做过类似的操作，把共用性高的属性方法放到 Vue.prototype 中：Object.defineProperty(Vue.prototype, '$date', { value: dateTimeFormat })

// 之后就可以这样用

vm.$date(dateObj)

这样的确很方便，但也要提醒开大家，当我们在做原型修改的时候要特别小心。接着刚才的例子，如果尝试对 Person 原型中的方法做个修改：Person.prototype.hello = function () {

console.log(`Bye ${this.name}.`)

}gary.hello() // Bye Gary.

alice.hello() // Bye Alice.

如结果所示，当对象原型做修改时，所有原型链上有这个原型的对象，通通都会受到影响，不管对象是在修改前还是修改后创建的。

建议大家除非是 Polyfill，否则应该要极力避免对原生对象的原型进行修改，防止造成可能的意外结果。

ES6 的 Class

看完前面这一大段，是不是觉得心很累？别担心，从 ES6 开始添加了 Class 语法糖，使开发者体验提升了很多。下面把前面的例子用 Class 重构一下：class Person {

constructor (name){

this.name = name

}

// 方法会自动放到 Person.prototype

hello() {

console.log(`Hello ${this.name}.`)

}

}class Engineer extends Person {

constructor (name, skill){

super(name) // 调用 Person 的构造函数

this.skill = skill

}

}let alice = new Engineer('Alice', 'JavaScript')

alice.hello() // Hello Alice.Object.getPrototypeOf(alice)

// Person {constructor: ƒ}

很方便，同样的功能，代码的可读性却提高了不少，繁琐的设定也都能交给语法自动帮你完成。不过方便的语法背后，底层仍然是对象原型及原型链。

总结

以上是 JavaScript 中关于对象原型的说明，希望能帮你理解对象原型，在这个什么都是对象的语言中，充分理解并掌握对象原型，是成为专业码农必须要突破的关卡之一。

这段时间突然有点了解了原型的方法然后看了这个文章感觉很详细，就记录一下

原型对象

每个javascript对象都有一个原型对象，这个对象在不同的解释器下的实现不同。比如在firefox下，每个对象都有一个隐藏的__proto__属性，这个属性就是“原型对象”的引用。

原型链

由于原型对象本身也是对象，根据上边的定义，它也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链，JavaScritp引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined.原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。

示例1

结果

图1

可以看到，当执行ext1.id时，引擎在ext1对象本身中就找到了id属性，因此返回其值0，当执行ext1.getInfo时，ext1对象中没有找到，因此在其原型对象base中查找，找到之后，执行这个函数，得到输出”base”。

我们将上例中的ext1对象稍加修改，为ext1对象加上name属性：

示例2

结果

这个运行效果同样验证了原型链的运行机制：从对象本身出发，沿着__proto__查找，直到找到属性名称相同的值(没有找到，则返回undefined)。

我们对上例再做一点修改，来更好的演示原型链的工作方式：

示例3

结果

应该注意的是，getInfo函数中的this表示原始的对象，而并非原型对象。上例中的id属性来自于ext1对象，而name来自于base对象。如果对象没有显式的声明自己的”__proto__”属性，这个值默认的设置为Object.prototype,而Object.prototype的”__proto__”属性的值为”null”，标志着原型链的终结。

构造器

我们在来讨论一下构造器，除了上边提到的直接操作对象的__proto__属性的指向以外，JavaScript还支持构造器形式的对象创建。构造器会自动的为新创建的对象设置原型对象，此时的原型对象通过构造器的prototype属性来引用。

我们以例子来说明，将Task函数作为构造器，然后创建两个实例task1, task2：

示例4

结果

构造器会自动为task1,task2两个对象设置原型对象Task.prototype，这个对象被Task(在此最为构造器)的prototype属性引用，参看下图中的箭头指向。

图2

由于Task本身仍旧是函数，因此其”__proto__”属性为Function.prototype, 而内建的函数原型对象的”__proto__”属性则为Object.prototype对象。最后Obejct.prototype的”__proto__”值为null。

前言

javascript语言是一种面向对象的语言，它没有"子类"和"父类"的概念，里面所有的数据类型都是对象，这一点与Java非常相似。如何将这些对象联系起来呢？

Brendan Eich在考虑设计继承机制的时候，参考了C++和JAVA使用new命令，通过调用类的构造函数生成实例的方式，将new命令引入javascript。

C++的写法是：

ClassName *object = new ClassName(param);

Java的写法是：

Person person = new Person();

但是，javascript里面没有“类”这个概念，那么，Brendan Eich决定直接在new后面跟一个构造函数，来生成实例。

原型对象

构造函数是什么？构造函数与其他函数唯一的区别在于调用方式不同。任何函数只要通过new来调用就可以作为构造函数，它是用来创建特定类型的对象。

举例来说，下面定义一个构造函数Animal，表示动物对象的原型。

function Animal(name){this.name =name;

this.sex = 'female';

}

new运算符的缺点

通过new命令来生成一个dog实例：

var dog= new Animal("小K")

这里，构造函数Animal就是实例对象dog的原型！！！Animal里的this关键字就指的是dog这个对象！

new出来的dog对象此时已经和Animal再无联系了！也就是说每一个new出来的实例都有自己的属性和方法的副本，是独立的的！修改其中一个不会影响另一个！

用构造函数生成实例对象，有一个缺点，那就是无法共享属性和方法。

var dog1= new Animal("小A");var dog2= new Animal("小B");

dog2.sex= 'male';

console.log(dog1.sex)//female

console.log(dog2.sex) //male

但是，我们希望构造函数中的sex属性是一个共有属性，那么此时用这样的方法，每个实例中都有一个相同的sex属性，会造成资源极大的浪费！

prototype属性的引入

那么原型对象就即将登场了！Brendan Eich决定给每一个构造函数都设置一个prototype属性，这个属性就指向原型对象。其实原型对象就只是个普通对象，里面存放着所有实例对象需要共享的属性和方法！所以，我们把需要共享的放到原型对象里，把那些不需要共享的属性和方法存在在构造函数里！

function Animal(name){this.name =name;

}

Animal.prototype.eat= 'food';var dog1= new Animal("小A");var dog2= new Animal("小B");

console.log(dog1.eat)//food

console.log(dog1.eat) //food

Animal.prototype.eat= 'water';

console.log(dog1.eat)//water

console.log(dog2.eat) //water

可以看出，修改prototype属性会影响它的所有实例的eat的值！！

实例一旦创建出来就会自动引用prototype对象的属性和方法！所以实例对象的属性和方法一般分为两种：一种是自身的，一种是引用自prototype的。

具体实现是这样的：

每当代码读取某个对象的某个属性的时候，都会执行一次搜索。首先从对象实例本身开始，如果在实例中找到了该属性，则返回该属性的值，如果没有找到，则顺着原型链指针向上，到原型对象中去找，如果如果找到就返回该属性值。

这里要提一点，如果为对象实例添加了一个属性与原型中同名，则该属性会屏蔽掉原型中的同名属性，不会去修改它！使用delete可以删除实例中的属性提到delete那要插一句~delete只能删除对象下的属性，不能删除变量和参数！

原型链

事实上，js里依靠"原型链"(prototype chain)模式来实现继承。

上面说完原型对象。下面要扒一扒proto、prototype、constructor。

proto：事实上就是原型链指针！！

prototype：上面说到这个是指向原型对象的

constructor：每一个原型对象都包含一个指向构造函数的指针，就是constructor

继承实现方式：

为了实现继承，proto会指向上一层的原型对象，而上一层的结构依然类似，那么就利用proto一直指向Object的原型对象上！Object.prototype.__proto__ = null;表示到达最顶端。如此形成了原型链继承。

下面有个图解非常经典，可以自己手画了一遍去理解，真的非常有效~

大致总结一下就是：

1、Object是作为众多new出来的实例的基类 function Object(){ [ native code ] }

2、Function是作为众多function出来的函数的基类 function Function(){ [ native code ] }

3、构造函数的proto(包括Function.prototype和Object.prototype)都指向Function.prototype

4、原型对象的proto都指向Object.prototype

5、Object.prototype.proto指向null

参考资料：