前置

原型是 JavaScript 巧妙的设计，它非常容易理解。都 2020 年了，看完这篇希望你以后不需要再重复学习 JavaScript 原型了。如有不当之处，恳请指点一二！

单词

下面是相关单词及其翻译,牢牢记住它们就成功一半了。

• constructor 构造器
• proto & prototype 原型；雏形；最初形态

constructor

function Drink() {}

const a = new Drink()
console.log(a.constructor) // ƒ Drink() {}

a 是由函数 Drink 构造而来的。

prototype

简单写点代码，后面全是

console.log

function f() {
this.a = 1
this.b = 2
}

const o = new f()
f.prototype.b = 3
f.prototype.c = 4

o 是

new f()

new f()

1. 创建一个空对象（即{}）:

   var obj = Object.create(null)

   。
2. 链接该对象（即设置该对象的构造函数）到另一个对象（本函数）， 这个空对象继承其原型:

   obj.__proto__ = f.prototype

   。
3. 使用指定的参数调用函数 f，

   new Foo

   等同于

   new Foo()

   ，也就是 f 不带任何参数调用的情况; 将步骤 1 创建的对象作为 this 的上下文（将 this 绑定到新创建的对象 | f 函数中的 this 的指针替换成 obj） ，

   f.call(obj)

   。
4. 如果该函数没有显式地在函数中写 return，则返回 this。

new

new

如果你对第三步中的操作有困惑，看几个简单的例子：

function f() {
this.a = 1
this.b = 2
}
f()
console.log(f.constructor) //ƒ Function() { [native code] }

function f() {
this.a = 1
this.b = 2
}

const o = new f()
console.log(o.constructor)
// ƒ f() {
//   this.a = 1
//   this.b = 2
// }

function f() {
console.log(this) // window
this.a = 1
this.b = 2
}

f()

function f() {
console.log(this) // f {}
this.a = 1
this.b = 2
console.log(this) // f {a: 1, b: 2}
}

new f()

const drink = {
name: 'Coca Cola',
color: 'black',
price: '3.5',
intro: function () {
console.log(`名称：${this.name},颜色：${this.color},价格：${this.price}`)
},
}

const computer = {
name: 'Orange Juice',
color: 'orange',
price: '4',
}

drink.intro.call(computer) //名称：Orange Juice,颜色：orange,价格：4

确保上面的内容你能十分清晰，否则不要进行下面的内容。

console.log(o.b) // 2

o 的值是通过

new f()

f.prototype

console.log(o.c) // 4
console.log(o.__proto__.c) // 4
console.log(o.__proto__ === f.prototype) // true

函数中并没有给 this 添加 c 属性并为其赋值 4，但是打印 o.c 返回 4。通过上文你已经知道 constructor 是干什么的了：

console.log(o.constructor.prototype.b) // 3

o 是由函数 f 构造的，

o.constructor

o.constructor.prototype === f.prototype

f.prototype

f.prototype

o.constructor.prototype.b

__proto__

• 如果自身有该属性直接获取它的值；
• 如果自身有且其构造器的

  prototype

  上也有，属性遮蔽不会忘了吧；
• 如果一直沿着

  __proto__

  找但没找到，会返回

  undefined

  ；为什么呢？

console.log({}.constructor) // ƒ Object() { [native code] }
console.log({}.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null

看到这里，应该十分清晰了。这就是最终为什么会返回 undefind 的原因：

Object.prototype.__proto__

小练习

做一个简单又不给你解释的小练习吧！

console.log(o.b)
console.log(o.__proto__.b)
console.log(o.d)

// 2
// 3
// undefined

重要提示

对于

Object.prototype.__proto__

测试代码

如果看完还是不太明白，动手试一试吧！我把本文用到的代码片段放到此处供你快速拷贝。

function f() {
this.a = 1
this.b = 2
}

const o = new f()
f.prototype.b = 3
f.prototype.c = 4
console.log(o.b) // 2
console.log(o.c) // 4
console.log(o.__proto__.c) // 4
console.log(o.__proto__ === f.prototype) // true
console.log(o.constructor.prototype.b) // 3
console.log(o.b) // 2console.log(o.__proto__.b) // 3
console.log(o.d) // undefined

console.log({}.constructor) // ƒ Object() { [native code] }
console.log({}.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null
// --------- other --------
console.log(o.__proto__) // {b: 3, c: 4, constructor: ƒ}
console.log(o.__proto__.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null
console.log(o.__proto__.__proto__.__proto__) // null
console.log(f.prototype.__proto__ === Object.prototype) // true