前端面试题-JavaScriptl原型,原型链?有什么特点?（2024.2.2）

一、先理解下构造函数，实例对象 （看代码的打印结果和解释）

构造函数（Constructor）的 prototype 属性： 当你创建一个函数时，JavaScript 会自动为该函数创建一个 prototype 属性。这个 prototype 属性是一个对象，它包含可以由该构造函数创建的所有实例共享的属性和方法。

对象的 __proto__ 属性： 每个对象都有一个 __proto__ 属性，它指向该对象的原型。当你访问一个对象的属性时，JavaScript 引擎会首先查找对象本身是否有这个属性，如果没有，就会去查找对象的原型（通过 __proto__ 找到原型对象），以此类推，直到找到该属性或到达原型链的末尾。

// 构造函数
function Person(name) {
  this.name = name;
}

// 通过构造函数创建对象
var person1 = new Person('Alice');

// person1 的原型是 Person 构造函数的 prototype 属性
console.log(person1.__proto__ === Person.prototype); // 输出: true

// Person 构造函数的 prototype 的原型是 Object 构造函数的 prototype
console.log(Person.prototype.__proto__ === Object.prototype); // 输出: true

// Object 构造函数的 prototype 的原型是 null，这是原型链的终点
console.log(Object.prototype.__proto__ === null); // 输出: true

• __proto__ 是访问原型的非标准方法，它通常被称为"隐式原型"。
• 在现代 JavaScript 中，你应该使用 Object.getPrototypeOf() 或 Object.create() 等方法来访问和设置原型。

二、原型、原型链

1. 原型（prototype）：

   • 每个 JavaScript 对象都有一个原型对象，它是一个指向另一个对象的引用。
   • 原型对象可以包含属性和方法，它们可以被对象实例继承。
   • 在 JavaScript 中，对象实例可以通过 Object.prototype 访问到它的原型对象。

2. 原型链（prototype chain）：

   • 当访问一个对象的属性或方法时，JavaScript 引擎会先查找该对象本身是否具有这个属性或方法。如果没有，它会继续查找对象的原型对象，以此类推，直到找到该属性或方法，或者达到原型链的顶端（即 Object.prototype）。
   • 这种对象之间通过原型链连接起来的结构被称为原型链。

3. 特点：

   • 继承关系：原型链实现了对象之间的继承关系，允许对象实例继承原型对象的属性和方法。
   • 动态性：可以在运行时动态地改变和扩展对象的原型。这意味着你可以在程序执行过程中修改对象的原型，对所有继承自该原型的对象都会产生影响。
   • 原型和实例之间的关系 ：对象实例与它的原型之间存在连接，通过 __proto__ 属性（不建议直接使用，可以使用 Object.getPrototypeOf 或 Object.setPrototypeOf）可以访问到实例的原型对象。

// 示例
function Animal(name) {
  this.name = name;
}

// 创建 Animal 的实例
const cat = new Animal('Cat');

// 演示原型链
console.log(cat.hasOwnProperty('name'));  // true，实例本身有 name 属性
console.log(cat.hasOwnProperty('toString'));  // false，toString 是从原型链继承而来的
console.log('toString' in cat);  // true，toString 是在原型链上找到的

console.log(Object.getPrototypeOf(cat) === Animal.prototype);  // true，实例的原型是 Animal.prototype
console.log(Animal.prototype.isPrototypeOf(cat));  // true，Animal.prototype 是 cat 的原型