Javascript 中的 proto 和 protot

2019-05-31 本文已影响0人 SingleDiego

在 JS 里，万物皆对象。方法（Function）是对象，方法的原型（Function.prototype）是对象。因此，它们都会具有对象共有的特点。

即：对象具有属性 __proto__，可称为隐式原型。

一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。

比如有构造函数 Person，和由该函数生成的对象 tom。

function Person(name){
  this.name = name;
}

let tom = new Person('tom');

对象 tom 的隐式原型指向构造该对象的构造函数 Person 的原型：

tom.__proto__ === Person.prototype
// true

Object.getPrototypeOf(tom) === Person.prototype
// true

方法（Function）这个特殊的对象，除了和其他对象一样有上述 _proto_ 属性之外，还有自己特有的属性 prototype。

Person.prototype

// 结果
{constructor: ƒ}
  constructor: ƒ Person(name)
  __proto__: Object

这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。

原型对象也有一个属性，叫做 constructor，这个属性包含了一个指针，指回原构造函数。

Person.prototype.constructor

// 结果
ƒ Person(name){
  this.name = name;
}

我们来看看上面的图。

构造函数 Foo() 的原型属性 Foo.prototype 指向了原型对象 Foo.prototype。

在原型对象 Foo.prototype 里有共有的方法，所有使用构造函数 Foo() 声明的实例（这里是 f1，f2）都可以共享这个方法。

Foo.prototype.bar = 'bar'
f1.bar
// "bar"

Foo.prototype 保存着实例共享的方法，有一个指针 constructor 指回构造函数。

Foo.prototype.constructor === Foo
// true

f1 和 f2 是 Foo 这个对象的两个实例，这两个对象也有属性 __proto__，指向构造函数的原型对象 Foo.prototype，所以该构造函数生成的对象能够访问原型对象的所有方法。

function Foo() {};
f1 = new Foo();

f1.__proto__ === Foo.prototype
// true

另外：

构造函数 Foo() 除了是方法，也是对象，它也有 __proto__ 属性，指向谁呢？

指向它的构造函数的原型对象。函数的构造函数就是 Function，因此这里的 __proto__ 指向了 Function.prototype。

Foo.__proto__ === Function.prototype
// true

其实除了 Foo()，Function()，Object() 也是一样的道理。

原型对象也是对象，它的 __proto__ 属性，又指向谁呢？同理，指向它的构造函数的原型对象。这里是 Object.prototype。

最后，Object.prototype 的 __proto__ 属性指向 null。

总结：

Javascript 中的 __proto__ 和 protot