当前位置：首页 > JavaScript

js prototype 实现

2026-04-06 06:04:29JavaScript

理解 JavaScript 的原型概念

JavaScript 是一种基于原型的语言，每个对象都有一个原型对象，对象从原型继承属性和方法。原型链是 JavaScript 实现继承的核心机制。

使用 `prototype` 属性添加方法

函数在 JavaScript 中也是对象，每个函数都有一个 prototype 属性。通过 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 prototype 实现

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

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

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};

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

使用 `Object.create` 创建对象

Object.create 方法可以创建一个新对象，使用现有的对象作为新对象的原型。

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

const dog = Object.create(animal);
dog.name = 'Rex';
dog.speak = function() {
  console.log(`${this.name} barks.`);
};

dog.speak(); // 输出: Rex barks.

修改内置对象的原型

可以为内置对象（如 Array 或 String）添加自定义方法，但需谨慎使用，以免与其他代码冲突。

js prototype 实现

Array.prototype.last = function() {
  return this[this.length - 1];
};

const arr = [1, 2, 3];
console.log(arr.last()); // 输出: 3

检查对象的原型

使用 Object.getPrototypeOf 可以获取对象的原型，instanceof 运算符可以检查对象是否在原型链上。

const arr = [];
console.log(Object.getPrototypeOf(arr) === Array.prototype); // true
console.log(arr instanceof Array); // true

避免直接修改 `proto`

虽然 __proto__ 属性可以访问对象的原型，但直接修改它可能导致性能问题。推荐使用 Object.create 或 Object.setPrototypeOf。

const obj1 = { a: 1 };
const obj2 = { b: 2 };
Object.setPrototypeOf(obj2, obj1);
console.log(obj2.a); // 输出: 1

使用 `class` 语法糖

ES6 的 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.