逃离对象的宿命：一层一层地直达构造函数

2023-10-22 17:26:53

揭秘 JavaScript 对象的本质：构造函数、原型链和“this”

构造函数：对象的诞生之所

想象一下，当你创造一个新的对象时，就好像在塑造一个独特的个体。构造函数 就是这个创造过程的蓝图。它定义了对象的基本属性和行为，就像一个模具，决定了对象的形态和功能。

当我们使用 new 调用构造函数时，一个全新的对象便诞生了。这个新对象继承了构造函数所定义的属性和方法，拥有了自己的独特身份，如同一个新生的婴儿。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('John', 30);
const person2 = new Person('Mary', 25);

在上面的例子中，Person 是一个构造函数，它定义了两个属性 name 和 age，以及一个方法 sayHello()。当我们创建 person1 和 person2 这两个对象时，它们都继承了 Person 构造函数所定义的属性和方法，并拥有了自己的 name 和 age 属性值。

原型对象：共享的宝库

原型对象 就像一个共享的宝库，其中存放着所有由同一个构造函数创建的对象所共有的属性和方法。它是构造函数的属性，可以被所有实例访问和使用。原型对象通常用于定义那些在所有实例中都是通用的属性和方法，从而避免在每个实例中重复定义相同的代码。

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

person1.sayHello(); // Hello, my name is John.
person2.sayHello(); // Hello, my name is Mary.

在这个例子中，我们在 Person 构造函数的原型对象上定义了一个 sayHello() 方法。这个方法可以被 person1 和 person2 这两个对象访问和使用，而无需在每个对象中重复定义。

“this”：指向对象本身的桥梁

“this” 关键字是 JavaScript 中的一个重要概念。它就像一座桥梁，指向当前的对象。在对象的方法中使用 “this” 关键字，可以访问该对象本身的属性和方法。

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

const person1 = new Person('John', 30);
person1.sayHello(); // Hello, my name is John.

在这个例子中，“this” 关键字指向 person1 对象。因此，在 sayHello() 方法中，我们可以使用 “this” 关键字来访问 person1 对象的 name 属性。

追根溯源：构造函数之旅

“this” 关键字不仅可以指向当前对象，还可以用来访问构造函数。通过 “this” 关键字，我们可以一层一层地向上追溯，直到到达构造函数。

function Person(name, age) {
  this.name = name;
  this.age = age;

  this.sayHello = function() {
    console.log(`Hello, my name is ${this.name}.`);
  };
}

const person1 = new Person('John', 30);
console.log(person1.constructor); // Person

console.log(person1.__proto__); // Person.prototype

console.log(person1.__proto__.__proto__); // Object.prototype

在这个例子中，我们可以使用 “this” 关键字来访问 person1 对象的构造函数。首先，我们使用 “this” 关键字来访问 person1 对象的 constructor 属性，这个属性指向 Person 构造函数。然后，我们使用 “__proto__” 属性来访问 person1 对象的原型对象，这个原型对象就是 Person.prototype。最后，我们再次使用 “__proto__” 属性来访问 Person.prototype 的原型对象，这个原型对象就是 Object.prototype。