返回

窥探JS面向对象中的原型秘密

前端

揭开原型对象的神秘面纱

在JavaScript中，每个函数都有一个Prototype属性，指向一个对象，称为函数的Prototype对象。而所有的Prototype对象也有一个Prototype属性，它指向Function.prototype对象。因此，所有函数的Prototype对象都通过原型链与Function.prototype对象相连。

创建你的实例

JavaScript面向对象编程也是基于原型和原型链的。我们可以使用new创建一个对象的实例，该实例将拥有指向类Prototype属性的对象的内部引用。

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

const person1 = new Person('John Doe', 30);
const person2 = new Person('Jane Smith', 25);

在这个例子中，person1和person2都是Person函数的实例，它们都有一个内部引用，指向Person的Prototype对象。

探索Prototype对象

原型对象是一个普通对象，可以包含属性和方法。我们可以使用Person.prototype访问Person的Prototype对象。

console.log(Person.prototype);

输出结果：

{
  constructor: ƒ Person(name, age),
  __proto__: { ... }
}

constructor属性指向Person函数本身，__proto__属性指向Person的Prototype对象的原型对象。

继承和原型链

JavaScript中，继承是通过原型链来实现的。当我们创建一个新的对象时，该对象将继承其Prototype对象的属性和方法。

person1.sayHello(); // "Hello, my name is John Doe"
person2.sayHello(); // "Hello, my name is Jane Smith"

在上面的例子中，person1和person2都继承了Person.prototype.sayHello()方法，并使用它来打招呼。

修改Prototype对象

我们可以修改Prototype对象，以便向所有该Prototype对象的实例添加新的属性或方法。

Person.prototype.job = 'Software Engineer';

console.log(person1.job); // "Software Engineer"
console.log(person2.job); // "Software Engineer"

在这个例子中，我们向Person.prototype添加了一个名为job的属性，并将它设置为"Software Engineer"。现在，person1和person2都拥有了job属性，并且它的值都是"Software Engineer"。

拓展阅读

总结

原型对象是JavaScript面向对象编程的核心概念。通过理解Prototype对象和原型链，我们可以更好地理解和使用JavaScript面向对象编程。