持续创作,加速成长!这是我参与「掘金日新计划 · 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)
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
以上概念是下篇的基础