彻底搞懂原型及原型链(上)

80 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第4天,点击查看活动详情

十月,又到了背诵八股文的季节,谈谈对原型及原型链的理解几乎是面试必问的问题,但是每一次回答,讲的晦涩难懂,不知所云,归根结底了解的不够透彻,今天就彻底搞明白困扰我已久的这个问题

文章分为上、下两篇

相关概念&结论

1. 构造函数

在JavaScript中,用new关键字来进行调用的函数称为构造函数,一般首字母要大写。

// 构造函数
function Person(){
    
}

2. 实例(对象)

用new调用构造函数创建出来的对象叫做实例,或是实例对象

// son 称为 构造函数 Person的实例对象
const son = new Person()

3. prototype 属性

函数独有,每个函数都有一个属性叫做prototype,称为显式原型。

4. 原型对象

prototype属性 指向一个对象(属性的集合)这个对象叫做原型对象,包含了所有实例共享的属性和方法,默认的只有一个叫做constructor的属性,指向这个函数本身。

function Person(){

}
console.log(Person.prototype)

image.png

5. __proto__ 属性

每个对象都有一个__proto__属性,称为隐式原型,指向构造函数的原型对象

function Person(){

}
const person = new Person()
console.log(person.__proto__ === Person.prototype) // true

6. 原型链

在JavaScript 中所有都是对象,每个对象都有一个 __proto__ 属性,这个属性指向了当前对象的构造函数的原型。对象可以通过自身的 __proto__属性访问构造函数的原型对象,原型对象也有 __proto__,访问原型的原型,向上查找,直到找到Object.prototype,因此这样就串联形成一个链式结构,也就是我们称为的原型链

7. JavaScript里最顶层的两个概念

Function是最顶层的构造器

Function是JavaScript里最顶层的构造器,它构造了系统中的所有对象,包括用户定义对象、系统内置对象、甚至包括它自己

自定义对象:

function Person() {};
const son = new Person();

系统内置对象:

let arr = new Array(1,2,3);
console.log(arr);

Object是最顶层的对象

  • 所有对象都继承Object的原型
  • Object也是被Function构造出来的

8. instanceof

用法:obj insttanceof fun

作用:用来判断一个对象是否是某个构造函数的实例

解释:obj.proto.proto... => Function.prototype。 沿着对象obj的原型链查找是否存在对象 Function.prototype,若存在则返回true,若查找到原型链的终点 Object.prototype仍未找到,则返回true

以上概念是下篇的基础