js 调用原型方法

在JavaScript中，每个对象都有一个原型（prototype），它是一个对象，包含了可以被其他对象共享的属性和方法。当我们试图访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript会在该对象的原型链上查找，直到找到该属性或方法或者到达原型链的末端（即null）。

基础概念

构造函数：用于创建和初始化对象的函数。通过new关键字调用。
原型对象：每个函数都有一个prototype属性，这个属性指向一个对象，即原型对象。
实例：通过构造函数创建的对象。
原型链：实例对象通过__proto__属性链接到构造函数的原型对象，形成原型链。

优势

代码复用：通过原型，多个实例可以共享相同的方法，节省内存。
继承：可以实现基于原型的继承，子类可以继承父类的属性和方法。

类型

构造函数原型：通过构造函数的prototype属性定义的方法，所有实例共享。
对象字面量原型：通过对象字面量创建的对象，其原型默认指向Object.prototype。

应用场景

共享方法：当多个对象需要共享某些方法时，可以将这些方法定义在原型上。
继承：通过原型链实现对象之间的继承关系。

示例代码

// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 在构造函数的原型上定义方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 创建实例
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

// 调用原型方法
person1.sayHello(); // 输出: Hello, my name is Alice and I am 30 years old.
person2.sayHello(); // 输出: Hello, my name is Bob and I am 25 years old.

// 验证原型方法
console.log(person1.hasOwnProperty('sayHello')); // 输出: false
console.log(Person.prototype.isPrototypeOf(person1)); // 输出: true

常见问题及解决方法

问题1：为什么实例对象可以直接调用原型上的方法？

原因：JavaScript中的原型链机制。当访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的末端。

问题2：如何判断一个方法是否定义在原型上？

解决方法：可以使用hasOwnProperty方法判断对象本身是否有该方法，或者使用isPrototypeOf方法判断原型对象是否是实例对象的原型。

console.log(person1.hasOwnProperty('sayHello')); // false
console.log(Person.prototype.isPrototypeOf(person1)); // true

问题3：如何覆盖原型上的方法？

解决方法：可以在实例对象上定义同名的方法，这样实例对象会优先使用自己的方法，而不是原型上的方法。

person1.sayHello = function() {
  console.log(`Hi, I'm ${this.name}.`);
};

person1.sayHello(); // 输出: Hi, I'm Alice.
person2.sayHello(); // 输出: Hello, my name is Bob and I am 25 years old.

通过这种方式，可以灵活地在实例级别覆盖原型方法，实现特定的行为。