JavaScript中的__proto__与prototype

发表于 | 分类于 ，

  最近接了几个面试，个别出色的面试官在面试技术部分的时候总是很考察被试者的原生js能力，而业务逻辑写多了就会逐渐淡忘掉最基础同时也是最重要的js知识。所以，工作的同时多复习原生js知识是非常重要的。今天就来聊一下js中__proto__和prototype。

prototype

  prototype属性即js的原型属性，是为了给所有实例添加共享属性和共享方法的属性。使用方法可见这篇文章中的“原型模式”部分。

  prototype这个属性指向一个包含所有共享属性和共享方法的对象，我们称之为原型对象。同时这个原型对象也有一个叫做”constructor”的属性，这个属性指回的是原构造函数。

1
2
3
4
5
6
7
8
9
function Person() {
  this.name = 'xkf'
  this.age = 18
}
Person.prototype.sayName = function() {
  console.log(this.name)
}

console.log(Person.prototype)  // 会打印出sayName, constructor, __proto__

  上面的代码先是创建了一个名为”Person”的构造函数，然后给这个方法的原型属性（prototype）内添加了一个所有实例共享的”sayName”方法，最后在控制台打印出了该构造函数的”prototype”属性。可以看到，prototype内包含之前添加的sayName方法，接着有constructor属性，这个属性指回原构造函数也就是它自己”Person”。最后还有一个__proto__。

__proto__

  js的每个实例对象中会有__proto__这样一个私有属性，有些人把这个属性称之为“隐式原型”，这个属性指向构造该对象的构造函数的原型属性（prototype）。

1
2
3
4
5
6
7
function Person() {
  this.name = 'xkf'
  this.age = 18
}

var p = new Person()
console.log(p.__proto__ === Person.prototype)  // true

  上面的代码先是创建了一个名为”Person”的构造函数，然后基于”Person”创建了它的实例”p”。这个时候如果直接打印p的话会看到，p里面除了有继承自构造函数Person中的属性”name”和”age”之外，还有一个私有属性（隐式原型）__proto__，而它指向的就是构造该对象的构造函数（Person）的原型，所以两者在最后比较的时候会返回”true”。

0%