js原型与原型链

js原型和原型链

先看以下代码

let obj = {}
obj._proto_.name = 'xiaoMing'
console.log(obj.name)    //xiaoMing

运行代码，输出结果为xiaoMing

针对结果，有以下2个问题

• obj 哪来的 __proto__属性？
• 为什么添加到 __proto__上的属性，可以直接通过 obj 拿到？

第一个问题

js中每一个对象都有一个原型，原型可以通过_proto_访问到

let obj = {}
console.log(obj.__proto__)
// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

可以这么理解：原型，也是一个对象。

第二个问题

对象可以随便拿原型里的东西
当一个对象索要一个属性时，如果原型中没有，就会去找原型的原型

let obj = {
  __proto__: {
    __proto__: {
      name: 'xiaoMing'
    }
  }
}
console.log(obj.name) // "xiaoMing"

因为 obj 本身没有 name这个属性，所以它会去自己的 proto 中查找，如果还没有找到，那就会向它的 proto.proto 中去找，直到找到 name属性或者 proto 链返回 null 为止。

再换一种写法：

let 爷爷 = {
  name: 'xiaoMing'
}
let 爸爸 = {
  __proto__: 爷爷
}
let obj = {
  __proto__: 爸爸
}
console.log(obj.name) // "xiaoMing"

查找 xiaoMing属性的过程是： obj -> 爸爸 -> 爷爷 ，这就是原型链。

prototype

类是对象的模板

function person(name） = {
          this.name = name
}
Person.prototype.age = function() {
  console.log('18')
}
Person.prototype.hobby= function() {
  console.log('hobby')
}

let xiaoming = new person("xiaoming ")
xiaoming.age()  //18
console.log(Person.prototype === xiaoming .__proto__) // true
// 可以看出，在实例化的过程中，类的 prototype 成为对象的原型  

let xiaoHong= new Person("xiaoHong")
xiaoHong.hobby()  //hobby
console.log(xiaoming.__proto__ === xiaoHong.__proto__) // true
// 同一类的多个实例（对象），共享一个原型

总结

• js中每一个对象都有一个原型，原型可以通过_proto_访问到，原型也是一个对象
• 类的 prototype 成为对象的_proto_（原型）
• 同一个类的多个实例（对象），共享一个原型