开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天,点击查看活动详情
上一篇说的是选项式非父子组件
说正文
JavaScript 中的每个对象都有一个指向其原型(prototype)的内部链接,这个原型对象也有自己的原型,这样一直连着形成了一个原型链(prototype chain)。
在 JavaScript 中,当我们访问一个对象的属性或方法时,如果该对象本身没有这个属性或方法,JavaScript 引擎就会沿着该对象的原型链一层层往上查找,直到找到该属性或方法或到达原型链的顶端(null)为止。
例如,我们创建一个对象 person,并将其原型设置为一个叫做 human 的对象:
const human = {
species: 'Homo sapiens'
};
const person = {
name: 'John',
age: 25
};
Object.setPrototypeOf(person, human);
此时,person 的原型就是 human,而 human 的原型是 Object.prototype,这样就形成了一个原型链:
person ---> human ---> Object.prototype ---> null
当我们访问 person 的属性时,JavaScript 引擎会按照原型链的顺序查找,如果找到了该属性就直接返回,如果一直查找到了原型链的顶端还没有找到该属性,那么就会返回 undefined。
例如,我们访问 person 对象的 name 属性和 species 属性时:
console.log(person.name); // 输出 "John"
console.log(person.species); // 输出 "Homo sapiens"
在上面的例子中,JavaScript 引擎首先在 person 对象中查找 name 属性,找到了就直接返回其值,然后继续查找 species 属性,在 human 对象中找到了就返回其值。
需要注意的是,在访问原型链中的属性时,如果该属性是一个对象,那么同样可以继续沿着原型链查找该对象的属性。如果在查找的过程中,找到了一个原型对象,但是该对象的原型指向了自身,这就形成了一个循环引用,JavaScript 引擎会停止查找,避免陷入死循环。