当前位置：首页 > JavaScript

js实现原型

2026-02-01 10:53:04JavaScript

原型的基本概念

在JavaScript中，每个对象都有一个原型（prototype），原型本身也是一个对象。原型用于实现继承和共享属性。通过原型，可以避免在每个实例中重复定义方法和属性，从而节省内存。

创建原型的方式

使用构造函数创建原型是一种常见方法。构造函数通过new关键字调用时，会创建一个新对象，并将该对象的原型指向构造函数的prototype属性。

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

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

const person1 = new Person('Alice');
person1.greet(); // 输出: Hello, my name is Alice

修改原型对象

原型对象可以在运行时动态修改。所有实例会共享这些修改，即使实例在修改之前已经创建。

js实现原型

Person.prototype.sayGoodbye = function() {
  console.log(`Goodbye from ${this.name}`);
};

person1.sayGoodbye(); // 输出: Goodbye from Alice

原型链的查找机制

当访问一个对象的属性或方法时，JavaScript引擎会先在对象自身查找。如果找不到，会沿着原型链向上查找，直到找到该属性或到达原型链的末端（null）。

console.log(person1.hasOwnProperty('name')); // true
console.log(person1.hasOwnProperty('greet')); // false

使用`Object.create`创建原型

Object.create方法可以显式指定新对象的原型。这种方式更灵活，适合不需要构造函数的场景。

js实现原型

const animal = {
  makeSound() {
    console.log(`${this.sound}`);
  }
};

const dog = Object.create(animal);
dog.sound = 'Woof';
dog.makeSound(); // 输出: Woof

原型继承的注意事项

原型继承可能导致共享属性的意外修改。如果原型属性是引用类型（如数组或对象），所有实例会共享同一引用。

function Team() {}
Team.prototype.members = [];

const team1 = new Team();
team1.members.push('Alice');
const team2 = new Team();
console.log(team2.members); // 输出: ['Alice']

ES6的`class`语法

ES6引入了class语法，本质上是原型的语法糖。class提供了更清晰的语法来实现原型继承。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // 输出: Rex barks.