JS核心知识点:原型和原型链

89 阅读1分钟

什么是原型:

个人理解:

原型相当于一个公共区域,可以被所有实例访问到。可以把该类实例中所有的公共属性/方法统一存储到原型中,这样只需要创建一个属性,就可被所有实例访问。

举例:

任何一个JS对象中创建时会关联一个对象,任何根据原型的构造函数创建出来的对象,都会继承原型上的属性。

    function Person(){
        Person.prototype.name = 'batBot'
        const person1 = new Person()
        const person2 = new Person()
        console.log(person1.name)
        console.log(person2.name)
    }

实例的隐式原型指向构造函数的显式原型,打印结果为true。

    function Person()
    const person = new Person()
    console.log(person.__proto__ === Person.prototype)

同时实例的原型的construct指向构造函数,打印结果为true。

    console.log(Person.prototype.construct === Person)
    console.log(Object.getPrototypeOf(person) === Person.prototype)

什么是原型链:

以下代码会先打印goodBot然后打印badBot。

function Person () {}
Person.prototype.name = 'batBot'
const person = new Person()
person.name = 'goodBot'
console.log(person.name)
delete person.name
console.log(person.name)

这说明了会优先从实例上获取属性,如果获取不到才会去顺着原型链查找原型上的属性。

cosnt obj = new Object()
obj.name = 'badBot'
console.log(obj.name)
console.log(Object.prototype.__proto__)

上边代码打印结果为badBot和null,可知:

Person.prototype.proto === Object.prototype,而且Object.prototype.constructor === Object,因为Object.prototype.proto === null,所以null是没有原型的,原型链已经走到了尽头。

所以我们找对象的属性: person => .proto => Person.prototype => .proto => Object.prototype => proto => null

打印如下会为true,因为虽然person本身construct找不到,但会顺着原型链找,也就是Person.prototype.constructor也就是Peson构造函数本身

console.log(person.constructor === person)