js-原型和原型链

时间:2021-2-20 作者:admin

1、原型对象

要想让构造函数生成的所有实例对象都能够共享属性,那么我们就给构造函数加一个属性叫做prototype,用来指向原型对象,我们把所有实例对象共享的属性和方法都放在这个构造函数的prototype属性指向的原型对象中,不需要共享的属性和方法放在构造函数中。

总之,原型对象是专门用来存储对象共享的属性的。

2、原型-prototype

在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象。

function Person(age) {
    this.age = age       
}
Person.prototype.name = 'kavin'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //kavin
console.log(person2.name)  //kavin

2.1、构造函数和原型对象的关系

构造函数(Person)->原型对象(Person.prototype)

3、原型链-proto

这是每个对象(除null外)都会有的属性,叫做__proto__,这个属性会指向原型对象。

4、constructor

每个原型对象都有一个constructor属性,指向该关联的构造函数。

function Person() {

}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true

当获取 person.constructor 时,其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时,会从 person 的原型也就是 Person.prototype 中读取,正好原型中有该属性,所以:

console.log(person.constructor === Person); // true 

总结:构造函数的 prototype 指向原型对象,原型对象有一个 constructor 属性指回构造函数,每个构造函数生成的实例对象都有一个 proto 属性,这个属性指向原型对象。

5、实例和原型

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

6、原型的原型

原型也是一个对象,既然是对象,原型对象就是通过 Object 构造函数生成的,结合之前所讲,实例的 proto 指向构造函数的 prototype

  • 注意点:Object.prototype.proto 的值为 null
console.log(Object.prototype.__proto__ === null) // true

备注:图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

参考链接:
juejin.im/post/684490…
www.cnblogs.com/loveyaxin/p…

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。