揭秘JavaScript中的原型链与new操作符

2024-01-02 10:30:37

原型链和new操作符是JavaScript中两个重要的概念，也是JavaScript面向对象编程的基础。掌握这两个概念对理解JavaScript至关重要。

什么是原型链？

原型链是JavaScript实现继承的一种机制。在JavaScript中，对象可以通过原型链访问和继承其他对象中的属性和方法。原型链的本质是一个对象的指针指向另一个对象。这个指针称为__proto__属性。也就是说，一个对象的__proto__属性指向它的原型对象，而原型对象的__proto__属性指向它的原型对象，如此递归下去，直到遇到null。

原型链是如何工作的？

举个例子，假设我们有一个Person对象，它具有name和age属性。我们还假设有一个Student对象，它继承自Person对象。Student对象具有name、age和major属性。

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

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

const person = new Person('John', 25);
const student = new Student('Mary', 22, 'Computer Science');

console.log(student.name); // 'Mary'
console.log(student.age); // 22
console.log(student.major); // 'Computer Science'
console.log(student.__proto__ === Person.prototype); // true

在这个例子中，Student对象的__proto__属性指向Person对象的prototype属性。这使得Student对象可以访问和继承Person对象中的name和age属性。

什么是new操作符？

new操作符是JavaScript中用于创建新对象的语法。当使用new操作符创建一个对象时，会发生以下几件事：

创建一个新的空对象。
将新对象的__proto__属性指向构造函数的prototype属性。
调用构造函数，并将新对象作为this传递给构造函数。

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

const person = new Person('John', 25);

console.log(person.name); // 'John'
console.log(person.age); // 25
console.log(person.__proto__ === Person.prototype); // true