关于Javascript 对象(object)的prototype

2023年5月27日上午5:16 • JavaScript

Javascript对象的prototype

在Javascript中对象是至关重要的部分，所有对象都是通过原型继承而来的。原型指的是任何Javascript对象都有一个指向原型的链接，可以通过该链接来访问原型对象的属性和方法。

为了更好的理解Javascript对象的prototype，需要首先了解Javascript中的几个重要概念：

原型链(prototype chain)
构造函数(constructor)
实例化(instance)
prototype

构造函数

构造函数可以看作是创建具有相同属性和方法的对象的模板，每次使用构造函数创建对象时，都会在内存中创建一个新的对象也称为实例。使用构造函数创建的对象都是通过原型继承的方式获取属性和方法的。

示例：

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

let person1 = new Person('Tom', 28, 'male');
let person2 = new Person('Lily', 25, 'female');

console.log(person1.name); //Tom
console.log(person2.age); //25

上述示例中，定义了一个Person构造函数，每个Person对象都拥有name、age、gender属性。通过使用new关键字，并将其赋值给变量person1，person2创建了两个Person对象实例。

原型链

每个Javascript对象(除null以外)都拥有一个指向另一个对象的链接，这个链接即该对象的原型。原型链是由原型对象构成的链式结构，用于查找对象的属性和方法。

示例：

let person = {
  name: 'Tom',
  age: 28,
  gender: 'male',
  sayHello: function(){
    console.log(`Hello, my name is ${this.name}`);
  }
}

let student = Object.create(person, {
  grade: { value: 'A' }
});

console.log(student.grade); //A
student.sayHello(); //Hello, my name is Tom

上述示例中定义了一个普通对象person，该对象拥有name、age、gender和sayHello方法。然后通过Object.create方法创建了一个新的对象student，该对象原型指向了person对象。在student对象中定义了属性grade，属性值为A。对于student对象来说，它定义的属性和方法可以通过原型链访问到person对象中的属性和方法。

prototype

每个Javascript函数都拥有prototype属性，也称为原型属性。这个属性是一个对象，可以用来存储该函数实例化后的对象所拥有的共享属性和方法。通过prototype对象定义的属性和方法，是可以被该函数生成的所有对象所共享的。

示例：

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

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

let person1 = new Person('Tom', 28, 'male');
let person2 = new Person('Lily', 25, 'female');

person1.sayHello(); //Hello, my name is Tom
person2.sayHello(); //Hello, my name is Lily

上述示例中，定义了一个Person构造函数，通过给其Prototype对象上添加sayHello方法，实现了Person构造函数实例化后的对象都拥有该方法。注意，这样的定义方式要放在实例化之前。

通过prototype扩展对象

在Javascript中，对象可以通过其原型继承属性和方法。可以通过给原型对象添加新属性或方法，也可以重写现有的原型对象的方法和属性。将属性和方法定义在原型对象中，可以得到更好的代码重用和更高效的内存使用。

示例：

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

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

let person1 = new Person('Tom', 28, 'male');

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

person1.sayHello(); //Hello, my name is Tom and I'm 28 years old.

上述示例中，通过修改Person构造函数原型中的sayHello方法，实现了输出年龄的目的。因为person1使用的是修改后的原型对象，所以即使在实例化后又修改了原型对象，person1输出的结果也不会变。