深入剖析JavaScript原型链属性和方法

2024-02-14 16:55:07

JavaScript原型链是一个强大而优雅的机制，它允许对象访问和继承自父对象的属性和方法。通过理解原型链及其相关的属性和方法，开发人员可以编写出更灵活、更具可扩展性的代码。

prototype属性

prototype是JavaScript中最重要的原型属性。它是存在于构造函数中的一个属性，它指向了这个构造函数的原型对象。这意味着所有通过该构造函数创建的对象都将继承自原型对象上的属性和方法。

原型属性的使用

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
person1.greet(); // Hello, my name is John and I am 30 years old.

在上面的例子中，Person.prototype.greet是一个原型方法，它被添加到Person构造函数的原型对象上。当创建person1对象时，它会继承自Person.prototype上的greet方法，并可以使用它来输出"Hello, my name is John and I am 30 years old."。

proto属性

__proto__属性是一个指向对象的原型对象的属性。它与prototype属性类似，但它存在于每个对象中，而不仅仅是构造函数中。

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

上面的例子中，person1.__proto__指向了Person.prototype，这表明person1对象继承自Person.prototype上的属性和方法。

构造函数的属性

除了prototype属性之外，构造函数还可以拥有自己的属性。这些属性不会被继承自原型对象，而是属于构造函数本身。

function Person(name, age) {
  this.name = name;
  this.age = age;
  
  Person.count++; // 静态属性
}

Person.count = 0; // 静态属性

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

console.log(Person.count); // 2