对JS中__proto__、prototype和constructor的理解

首先

1. JavaScript的数据类型包括两类：

• 5种基本类型：undefined(未定义类型)、null(空引用数据类型)、 boolean(布尔类型)、number(数字类型)和 string( 字符串类型)
• 对象类型：函数（function）是一种特殊的对象

2. 经常看到的Object、Function和Array等，都是函数
3. 只有函数（构造器）有prototype
4. Function.prototype 和 Object.prototype 是两个特殊的对象，他们由引擎来创建
5. 除了以上两个特殊对象，其他对象都是通过构造器 new 出来的
6. Object 是所有对象的爸爸，所有对象都可以通过 proto 找到Object.prototype
7. Function 是所有函数的爸爸，所有函数都可以通过 proto 找到Function.prototype

注意下图中的三句话：

• function Foo created via new Function
• Function via new Function
• Object created by new Function

然后实际编程中的几个特殊点

  console.log(typeof Function.prototype);
  // 输出结果为：'function'
  console.log(Function.prototype);
  // 输出结果为：ƒ () { [native code] }

看起来是个函数，其实不是。从以下两个输出可以看出

  console.log(Function.prototype instanceof Function);
  // 输出false
  console.log(Function.prototype.prototype);
  // 输出结果为：undefined

再比如：

  console.log(typeof Object.prototype);
  // 输出结果为：'object'
  console.log(Object.prototype);
  // 输出结果为：{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

可以看到Object.prototype确实是个对象，和Function.prototype输出结果是不一样的

最后

• 对于函数也是对象的理解（为什么说函数也是对象）：
  • 因为函数的原型链的结尾是Object.prototype
• 注意Function.__proto__ == Function.prototype，这说明了函数Function自己也是构造函数Function的一个实例

推荐链接

• 从__proto__和prototype来深入理解JS对象和原型链
• 基于原型的JavaScript面向对象编程