深入浅出地了解JS原型（JavaScript中的proto和prototype属性）

2024-01-05 19:23:15

JavaScript原型对象：基础认知

在JavaScript中，原型对象是一个特殊的对象，它是所有其他对象的基础。每个对象都直接或间接地链接到原型对象。原型对象包含一些公共属性和方法，这些属性和方法可以被所有链接到它的对象所继承。

proto和prototype属性：指向原型对象的指针

在JavaScript中，每个对象都有两个特殊属性：__proto__和prototype。__proto__属性指向该对象的原型对象，而prototype属性指向该对象的构造函数的原型对象。

proto属性

__proto__属性是对象的内部属性，它指向该对象的原型对象。我们可以使用__proto__属性来访问原型对象上的属性和方法。例如：

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

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

const person = new Person('John');

console.log(person.__proto__ === Person.prototype); // true
console.log(person.__proto__.greet === Person.prototype.greet); // true
person.__proto__.greet(); // Hello, my name is John

prototype属性

prototype属性是构造函数的属性，它指向该构造函数的原型对象。原型对象上的属性和方法可以被构造函数创建的所有对象所继承。例如：

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

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

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

console.log(person1.prototype === person2.prototype); // false
console.log(person1.prototype === Person.prototype); // true
person1.greet(); // Hello, my name is John
person2.greet(); // Hello, my name is Mary

JS中的原型继承：构建对象关系

在JavaScript中，原型继承是一种实现继承的方式。通过原型继承，我们可以让一个对象继承另一个对象的属性和方法。例如：

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

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

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

Student.prototype = Object.create(Person.prototype);

const student = new Student('John', 'Computer Science');

console.log(student instanceof Student); // true
console.log(student instanceof Person); // true
console.log(student.name); // John
console.log(student.major); // Computer Science
student.greet(); // Hello, my name is John