_func_.prototype属性混淆。当一个函数被当做构造器（constructor）调用时，会生成一个对象，而函数上的_func_.prototype属性引用的对象会作为生成对象的`[[Prototype]]`存在。**`Object.prototype`**就表示了`Object`这一函数的 prototype。
下面例子展示了访问对象属性的过程：
```js
// 让我们使用构造函数f创建一个对象o，o上面有属性a和b:
let f = function () {
this.a = 1;
this.b = 2;
};
let o = new f(); // {a: 1, b: 2}
// 在f的prototype对象上添加一些属性
f.prototype.b = 3;
f.prototype.c = 4;
// 不要对prototype重新赋值比如： f.prototype = {b:3,c:4}; 这会打断原型链
// o.[[Prototype]] 上有属性b和c
// o.[[Prototype]].[[Prototype]] 就是 Object.prototype
// 最终, o.[[Prototype]].[[Prototype]].[[Prototype]] 为 null
// 这就是原型链的终端, 等于 null,
// 根据定义, null不再有 [[Prototype]]
// 因此, 整条原型链看起来类似:
// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null
console.log(o.a); // 1
// o上存在自身属性'a'吗？当然，该属性值为1
console.log(o.b); // 2
// o上存在自身属性'b'吗？当然，该属性值为2
// prototype 上也有属性'b', 但是并不会被访问到
// 这叫做“属性覆盖”
console.log(o.c); // 4
// o上存在自身属性'c'吗？不存在, 继续查找它的原型
// o.[[Prototype]]上存在自身属性'c'吗？当然，该属性值为4
console.log(o.d); // undefined
// o上存在自身属性'd'吗？不存在, 继续查找它的原型
// o.[[Prototype]]上存在自身属性'd'吗？不存在, 继续查找o.[[Prototype]]的原型
// o.[[Prototype]].[[Prototype]] 为 Object.prototype, 上面不存在属性'd', 继续查找o.[[Prototype]].[[Prototype]]的原型
// o.[[Prototype]].[[Prototype]].[[Prototype]] 为 null, 停止查找
// 没找到属性'd'，返回undefined
```
[在线代码链接](https://repl.it/@khaled_hossain_code/prototype)
在一个对象上设置属性称为创建了一个”自身属性“（译者注：原文为*Setting a property to an object creates an own property.*）。唯一会影响属性 set 和 get 行为的是当该属性使用[getter 或者 setter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters)定义。
### 继承“方法”
JavaScript 中并没有像在基于类语言中定义的”方法“。在 JavaScript 中，任何函数也是以属性的形式被添加到对象中，继承的函数和其他继承的属性一样，也存在上面提到的”属性覆盖”（这里叫做*方法覆盖*（_method overriding_））。
当一个继承的函数被执行时，函数内的[`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)指向当前继承的对象，而不一定是将该函数作为“自身属性“的对象本身。
```js
var o = {
a: 2,
m: function () {
return this.a + 1;
},
};
console.log(o.m()); // 3
// 当调用 o.m 时, 'this' 指向 o
var p = Object.create(o);
// p 是一个继承o的对象
p.a = 4; // 在p上创建一个'a'属性
console.log(p.m()); // 5
// 当调用 p.m 时, 'this' 指向 p.
// 所以当 p 从 o 上继承了方法 m时,
// 'this.a' 等于 p.a
```
---
## 在 JavaScript 中使用原型
让我们更详细地来看看背后的原理。
在 JavaScript 中，正如上面提到，函数也可以拥有属性。所有函数都有一个特殊的属性`prototype`。请注意下面的代码是独立的（可以安全地假设网页中除了下面的代码就没有其他代码了）。为了更好的学习体验，非常推荐你打开浏览器的控制台，点击'console'标签，复制粘贴以下代码，点击 Enter/Return 键来执行它。（大多数浏览器的开发者工具（Developer Tools）中都包含控制台。详情请查看[Firefox 开发者工具](https://wiki.developer.mozilla.org/en-US/docs/Tools)、[Chrome 开发者工具](https://developers.google.com/web/tools/chrome-devtools/)，以及[Edge 开发者工具](Edge DevTools)）
```js
function doSomething() {}
console.log(doSomething.prototype);
// 不管你如何声明函数,
// JavaScript中的函数都有一个默认的
// prototype 属性
// (Ps: 这里有一个意外，箭头函数上没有默认的 prototype 属性)
var doSomething = function () {};
console.log(doSomething.prototype);
```
可以在 console 中看到，`doSomething()`有一个默认的`prototype`属性，打印的内容和下面类似：
```js
{
constructor: ƒ doSomething(),
__proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf()
}
}
```
如果我们在`doSomething()`的`prototype`上添加属性，如下：
```js
function doSomething() {}
doSomething.prototype.foo = "bar";
console.log(doSomething.prototype);
```
结果为：
```js
{
foo: "bar",
constructor: ƒ doSomething(),
__proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf()
}
}
```
现在我们可以通过`new`操作符来基于这个 prototype 对象创建`doSomething()`的实例。使用`new`操作符调用函数只需要在调用前加上`new`前缀。这样该函数会返回其自身的一个实例对象。接着我们便可以往该实例对象上添加属性：
```js
function doSomething() {}
doSomething.prototype.foo = "bar"; // 往prototype上添加属性'foo'
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value"; // 往实例对象上添加属性'prop'
console.log(doSomeInstancing);
```
打印结果和如下类似：
```js
{
prop: "some value",
__proto__: {
foo: "bar",
constructor: ƒ doSomething(),
__proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf()
}
}
}
```
可以得知，`doSomeInstancing`的`__proto__`就是`doSomething.prototype`。但是，这代表什么呢？放你访问`doSomeInstancing`的一个属性时，浏览器会首先查看`doSomeInstancing`自身是否存在该属性。
如果不存在，浏览器会继续查找`doSomeInstancing`的`__proto__`（或者说是 `doSomething.prototype`）。如果存在，则`doSomeInstancing`的`__proto__`的这个属性会被使用。
否则，会继续查找`doSomeInstancing`的`__proto__`的`__proto__`。默认情况下，任何函数 prototype 属性的`__proto__`属性就是`window.Object.prototype`。因此，会在`doSomeInstancing`的`__proto__`的`__proto__`（或者说是`doSomething.prototype.__proto__`，或者说是`Object.prototype`）继续查找对应属性。
最终，直到所有的`__proto__`被查找完毕，浏览器会断言该属性不存在，因此得出结论：该属性的值为 undefined。
然我们在 console 上再添加一些代码：
```js
function doSomething() {}
doSomething.prototype.foo = "bar";
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value";
console.log("doSomeInstancing.prop: " + doSomeInstancing.prop);
console.log("doSomeInstancing.foo: " + doSomeInstancing.foo);
console.log("doSomething.prop: " + doSomething.prop);
console.log("doSomething.foo: " + doSomething.foo);
console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);
console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);
```
结果如下：
```text
doSomeInstancing.prop: some value
doSomeInstancing.foo: bar
doSomething.prop: undefined
doSomething.foo: undefined
doSomething.prototype.prop: undefined
doSomething.prototype.foo: bar
```
---
## 使用不同的方法创建对象和原型链
### 使用语法结构（字面量）创建对象
```js
var o = { a: 1 };
// 新创建的对象以 Object.prototype 作为它的 [[Prototype]]
// o 没有叫做'hasOwnProperty'的自身属性
// hasOwnProperty 是 Object.prototype 的自身属性
// 也就是说 o 从Object.prototype 上继承了 hasOwnProperty
// Object.prototype 的原型为 null
// o ---> Object.prototype ---> null
var b = ["yo", "whadup", "?"];
// 数组继承自 Array.prototype
// (Array.prototype 上拥有方法例如 indexOf, forEach 等等)
// 原型链如下:
// b ---> Array.prototype ---> Object.prototype ---> null
function f() {
return 2;
}
// 函数继承自 Function.prototype
// (Function.prototype 上拥有方法例如 call, bind, 等等)
// f ---> Function.prototype ---> Object.prototype ---> null
```
### 使用构造器函数
构造器函数和普通函数的差别就在于其恰好使用[`new`操作符](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)调用
```js
function Graph() {
this.vertices = [];
this.edges = [];
}
Graph.prototype = {
addVertex: function (v) {
this.vertices.push(v);
},
};
var g = new Graph();
// g 是一个有 'vertices' 和 'edges' 作为属性的对象
// 当执行 new Graph() 时，g.[[Prototype]] 的值就是 Graph.prototype
```
### 使用 `Object.create`
ECMAScript 提出了一个新方法：[`Object.create()`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create)。调用该方法时会创建一个新对象。这个对象的原型为传入该函数的第一个参数：
```js
var a = { a: 1 };
// a ---> Object.prototype ---> null
var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (继承自 a )
var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null
var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty);
// undefined, 因为 d 并没有继承自 Object.prototype
```
### 与`Object.create`和`new`操作符一起，使用`delete`操作符
下面的示例使用`Object.create`创建一个对象，并使用`delete`操作符来展示原型链的变化
```js
var a = { a: 1 };
var b = Object.create(a);
console.log(a.a); // 1
console.log(b.a); // 1
b.a = 5;
console.log(a.a); // 1
console.log(b.a); // 5
delete b.a;
console.log(a.a); // 1
console.log(b.a); // 1(b.a 的值 5 已经被删除，因此展示其原型链上的值)
delete a.a; // 也可以使用 'delete b.__proto__.a'
console.log(a.a); // undefined
console.log(b.a); // undefined
```
如果换成`new`操作符创建对象，原型链更短：
```js
function Graph() {
this.vertices = [4, 4];
}
var g = new Graph();
console.log(g.vertices); // print [4,4]
g.vertices = 25;
console.log(g.vertices); // print 25
delete g.vertices;
console.log(g.vertices); // print undefined
```
### 使用 class 关键字
ECMAScript 2015 提出了一系列新的关键字用于实现[类](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)。包括[`class`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)、[`constructor`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor)、[`static`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static)、[`extends`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends)以及[`super`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)。
```js
"use strict";
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(sideLength) {
super(sideLength, sideLength);
}
get area() {
return this.height * this.width;
}
set sideLength(newLength) {
this.height = newLength;
this.width = newLength;
}
}
var square = new Square(2);
```
### 关于性能
如果需要查找的对象属性位于原型链的顶端，查找时间会对性能有影响，尤其对于对性能要求很高的应用来说，影响会进一步放大。另外，如果是访问一个不存在的属性，总是会遍历整条原型链。
此外，当对对象的属性进行迭代查找时，原型链上所有可枚举的属性都会被遍历。为了检查哪些属性是对象的自身属性而不是来自其原型链，很有必要使用继承自`Object.prototype`的[`hasOwnProperty`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)方法。下面来看一个具体的例子，该例子继续使用上一个图形的例子：
```js
console.log(g.hasOwnProperty("vertices"));
// true
console.log(g.hasOwnProperty("nope"));
// false
console.log(g.hasOwnProperty("addVertex"));
// false
console.log(g.__proto__.hasOwnProperty("addVertex"));
// true
```
[`hasOwnProperty`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)是 JavaScript 中查找对象属性时唯一不遍历原型链的方法。
注意：仅仅检查属性是[`undefined`](https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)并不能代表该属性不存在，也许是因为它的值恰好被设置为了`undefined`。
### 不好的实践：对原生的 prototypes 进行扩展
经常容易犯的一个错误是扩展`Object.prototype`或者是一些其他内置的 prototype。
这被称为是”猴子补丁“，会打破程序的封装性。尽管在一些出名的框架中也这样做，例如 Prototype.js，但是仍然没有理由在内置类型上添加非标准的功能。
扩展内置类型的唯一理由是保证一些早期 JavaScript 引擎的兼容性，例如`Array.forEach`（译者注：`Array.forEach`是在 ECMA-262-5 中提出，部分早期浏览器引擎没有实现该标准，因此需要 polyfill）
### 继承原型链的方法总结
下面表格展示了四种方法以及它们各自的优缺点。以下例子创建的`inst`对象完全一致（因此控制台打印的结果也一样），除了它们之间有不同的优缺点。
| 名称 | 举例 | 优点 | 缺点 |
|---|---|---|---|
使用new初始化 |
function foo(){}
foo.prototype = {
foo_prop: "foo val"
};
function bar(){}
var proto = new foo;
proto.bar_prop = "bar val";
bar.prototype = proto;
var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop);
|
支持所有浏览器（甚至到IE 5.5），同时，运行速度、标准化以及JIT优化性都非常好 | 问题是，为了使用该方法函数必须被初始化。在初始化过程中，构造函数可能会为每个创建对象创建一些特有属性，然而例子中只会构造一次，因此这些特有信息只会生成一次，可能存导致潜在问题。 之外，构造函数初始化时可能会添加冗余的方法到实例对象上。不过，只要这是你自己的代码且你明确这是干什么的，这些通常来说也不是问题（实际上是利大于弊）。 |
使用Object.create |
function foo(){}
foo.prototype = {
foo_prop: "foo val"
};
function bar(){}
var proto = Object.create(
foo.prototype
);
proto.bar_prop = "bar val";
bar.prototype = proto;
var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop);
function foo(){}
foo.prototype = {
foo_prop: "foo val"
};
function bar(){}
var proto = Object.create(
foo.prototype,
{
bar_prop: {
value: "bar val"
}
}
);
bar.prototype = proto;
var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop)
|
支持目前所有的现代浏览器，包括非IE浏览器以及IE9及以上版本浏览器。相当于允许一次性设置__proto__，这样有利于浏览器优化该对象。同时也允许创建没有原型的对象例如：Object.create(null) |
不支持IE8以及以下版本浏览器，不过，微软目前已不再支持运行这些浏览器的操作系统，对大多数应用来说这也不是一个问题。 之外，如果使用第二个参数，则对象的初始化会变慢，这也许会成为性能瓶颈，因为第二个参数作为对象描述符属性，每个对象的描述符属性是另一个对象。当以对象形式处理成千上万的对象描述符时，可能会严重影响运行速度。 |
使用Object.setPrototypeOf |
function foo(){}
foo.prototype = {
foo_prop: "foo val"
};
function bar(){}
var proto = {
bar_prop: "bar val"
};
Object.setPrototypeOf(
proto, foo.prototype
);
bar.prototype = proto;
var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop);
function foo(){}
foo.prototype = {
foo_prop: "foo val"
};
function bar(){}
var proto;
proto = Object.setPrototypeOf(
{ bar_prop: "bar val" },
foo.prototype
);
bar.prototype = proto;
var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop)
|
支持目前所有的现代浏览器，包括非IE浏览器以及IE9及以上版本浏览器。支持动态的操作对象的原型，甚至可以为Object.create(null)创建的对象强制添加一个原型 |
由于性能不佳，应该会被弃用。如果你敢在生产环境中使用这样的语法，JavaScript代码快速运行几乎不可能。因为许多浏览器优化了原型，举个例子，在访问一个对象上的属性之前，编译器会提前确定原型上的属性在内存中的位置，但是如果使用了Object.setPrototypeOf对原型进行动态更改，这相当于扰乱了优化，甚至会让编译器重新编译并放弃对这部分的优化，仅仅是为了能让你这段代码跑起来。
同时，不支持IE8以及以下版本浏览器
|
使用__proto__ |
function foo(){}
foo.prototype = {
foo_prop: "foo val"
};
function bar(){}
var proto = {
bar_prop: "bar val",
__proto__: foo.prototype
};
bar.prototype = proto;
var inst = new bar;
console.log(inst.foo_prop);
console.log(inst.bar_prop);
var inst = {
__proto__: {
bar_prop: "bar val",
__proto__: {
foo_prop: "foo val",
__proto__: Object.prototype
}
}
};
console.log(inst.foo_prop);
console.log(inst.bar_prop)
|
支持目前几乎所有的现代浏览器，包括非IE浏览器以及IE11及以上版本浏览器。将__proto__设置为非对象的类型不会抛出异常，但是会导致程序运行失败 |
严重过时而且性能不佳。如果你敢在生产环境中使用这样的语法，JavaScript代码快速运行几乎不可能。因为许多浏览器优化了原型，举个例子，在访问一个对象上的属性之前，编译器会提前确定原型上的属性在内存中的位置，但是如果使用了__proto__对原型进行动态更改，这相当于扰乱了优化，甚至会让编译器重新编译并放弃对这部分的优化，仅仅是为了能让你这段代码跑起来。
同时，不支持IE10及以下版本浏览器。
|