原形与原型链之链条缺失时，寻找通路的方法

2024-02-03 10:32:03

前言

在前端系统化学习中，JS原型和原型链的概念是绕不开的知识点，也是很多初学者的绊脚石。本文将以轻松易懂的方式，对原型和原型链进行详细讲解，并深入剖析链条缺失时的情况，帮助读者理解原型链的查找过程，并给出链条缺失时的应对方案。

原型和原型链

1. 原型

原型是JavaScript中的一个特殊对象，它是所有对象的父对象。原型包含了所有对象共享的属性和方法，这些属性和方法可以直接被对象访问和使用。例如，Object.prototype原型对象包含了toString、valueOf等方法，这些方法可以直接被所有对象调用。

2. 原型链

原型链是一条从对象到原型的链路。当对象访问一个不存在的属性或方法时，JavaScript会沿着原型链向上查找，直到找到该属性或方法，或者到达Object.prototype原型对象。如果在原型链中找不到该属性或方法，则会返回undefined。

链条缺失时

在某些情况下，原型链可能会出现缺失的情况，这通常是因为对象没有显式指定原型对象，或者原型对象被意外覆盖或修改了。例如：

function Person() {}

const person = new Person();

console.log(person.prototype); // undefined

在上面的代码中，Person函数没有显式指定原型对象，因此person对象的原型链中没有原型对象，导致person.prototype返回undefined。

寻找通路

当原型链缺失时，我们可以通过以下方法寻找通路：

1. 显式指定原型对象

function Person() {}

Person.prototype = {
  sayHello: function() {
    console.log('Hello!');
  }
};

const person = new Person();

console.log(person.prototype); // { sayHello: [Function: sayHello] }

在上面的代码中，我们显式指定了Person函数的原型对象，因此person对象的原型链中包含了原型对象，导致person.prototype返回了原型对象。

2. 使用Object.setPrototypeOf()方法

function Person() {}

const person = new Person();

Object.setPrototypeOf(person, {
  sayHello: function() {
    console.log('Hello!');
  }
});

console.log(person.prototype); // { sayHello: [Function: sayHello] }