细致原型与原型链的总结,快速记忆口诀

157 阅读2分钟

image.png

一、原型

JavaScript 常被描述为一种基于原型的语言——每个对象都拥有一个原型对象

当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾

准确地说,这些属性和方法,都定义在Object 的构造器函数(constructor functions)的 prototype属性上,而非实例对象本身

二、原型链

原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链(prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法

在对象实例和它的构造器之间建立一个链接(它是 proto 属性,是从构造函数的 prototype 属性派生的),之后通过上溯原型链,在构造器中找到这些属性和方法

下面举个例子:

function Person(name) {
    this.name = name;
    this.age = 18;
    this.sayName = function() {
        console.log(this.name);
    }
}
// 第二步 创建实例
var person = new Person('person')

下面分析一下:

  • 构造函数 Person 存在原型对象 Person.prototype
  • 构造函数生成实例对象 person , person 的 proto 指向构造函数 Person 原型对象
  • Person.prototype.proto 指向内置对象,因为 Person.prototype 是个对象,默认是由Object 函数作为类创建的,而 Object.prototype 为内置对象
  • Person.proto 指向内置匿名函数 anonymous ,因为 Person 是个函数对象,默认由Function 作为类创建
  • Function.prototype 和 Function.proto 同时指向内置匿名函数 anonymous ,这样原型链的终点就是 null

三、总结

image.png

JS原型:原型是一个对象,叫原型对象

原型:

1.原型就是一个对象

2.每个函数都有一个Prototype属性,他的值是一个指针(地址),指向的就是原型对象

3.通过构造函数创建的实例,都有一个__proto__属性,指向原型对象

4.原型上默认有一个constructor属性,指回构造函数

原型链:

1.每个对象通过__proto__属性都能访问到它的原型(对象),原型对象也有它的原型对象(原型也有它的原型)

2.当访问一个对象属性和方法时,先在自身寻找

3.如果没有就会沿着__proto__这条链向上查找,直到最顶层Object.prototype为止