JS 原型与原型链：探索属性与方法处理机制背后的奥秘

2023-11-15 21:10:56

原型与原型链简介

在 JavaScript 中，原型是一组共享属性和方法的对象。每个对象都与一个原型相关联，称为其原型对象。原型对象本身也可能具有原型对象，以此类推，形成一个称为原型链的链式结构。当访问对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到该属性或方法。这种机制称为原型继承。

深入剖析代码示例

现在，让我们用一个代码示例来更深入地理解原型与原型链的机制：

function Fn() {
  this.x = 10;
}

function Obj() {
  this.y = 20;
}

Obj.prototype = new Fn();

var f1 = new Fn();
var f2 = new Fn();
var o1 = new Obj();

console.log(f1.x); // 10
console.log(f1.y); // undefined
console.log(o1.x); // 10
console.log(o1.y); // 20

在这个示例中，我们定义了两个函数：Fn 和 Obj。Fn 函数拥有一个属性 x，而 Obj 函数拥有一个属性 y。我们还将 Obj.prototype 设置为 new Fn()，这意味着 Obj 的原型对象是 Fn 函数的实例。

接下来，我们创建了两个 Fn 函数的实例 f1 和 f2，以及一个 Obj 函数的实例 o1。

当你访问 f1.x 时，JavaScript 会在 f1 对象中查找 x 属性。由于 f1 对象没有 x 属性，因此它会沿着原型链向上查找，在 Fn 函数的原型对象中找到了 x 属性。因此，console.log(f1.x) 会输出 10。

当你访问 f1.y 时，JavaScript 会在 f1 对象中查找 y 属性。由于 f1 对象没有 y 属性，因此它会沿着原型链向上查找，但在 Fn 函数的原型对象中也没有找到 y 属性。因此，console.log(f1.y) 会输出 undefined。

当你访问 o1.x 时，JavaScript 会在 o1 对象中查找 x 属性。由于 o1 对象没有 x 属性，因此它会沿着原型链向上查找，在 Obj 函数的原型对象中找到了 x 属性。而 Obj 函数的原型对象是 Fn 函数的实例，因此 console.log(o1.x) 会输出 10。