当前位置:首页 > JavaScript

js 实现原型

2026-02-01 11:50:21JavaScript

原型的基本概念

在JavaScript中,每个对象都有一个原型(prototype),原型本身也是一个对象。原型用于实现继承和共享属性。当访问一个对象的属性时,如果对象本身没有该属性,JavaScript会沿着原型链向上查找,直到找到该属性或到达原型链的顶端(null)。

原型链的实现

原型链是JavaScript实现继承的核心机制。通过原型链,对象可以访问其原型对象的属性和方法。以下是一个简单的原型链示例:

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

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

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

设置对象的原型

可以通过多种方式设置对象的原型:

1. 使用构造函数

构造函数通过prototype属性设置其实例的原型。所有通过该构造函数创建的实例都会共享同一个原型对象。

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

Animal.prototype.getType = function() {
  return this.type;
};

const cat = new Animal('Cat');
console.log(cat.getType()); // 输出: Cat

2. 使用Object.create()

Object.create()方法创建一个新对象,并将传入的对象作为新对象的原型。

const proto = {
  greet() {
    console.log('Hello!');
  }
};

const obj = Object.create(proto);
obj.greet(); // 输出: Hello!

3. 使用__proto__属性

__proto__属性(已弃用)可以直接设置对象的原型。建议使用Object.setPrototypeOf()替代。

const parent = {
  value: 42
};

const child = {};
child.__proto__ = parent;
console.log(child.value); // 输出: 42

4. 使用Object.setPrototypeOf()

Object.setPrototypeOf()方法设置一个对象的原型为另一个对象。

const parent = {
  value: 42
};

const child = {};
Object.setPrototypeOf(child, parent);
console.log(child.value); // 输出: 42

获取对象的原型

可以通过以下方法获取对象的原型:

1. 使用Object.getPrototypeOf()

Object.getPrototypeOf()方法返回指定对象的原型。

const proto = {};
const obj = Object.create(proto);
console.log(Object.getPrototypeOf(obj) === proto); // 输出: true

2. 使用__proto__属性

__proto__属性也可以用于获取对象的原型。

const proto = {};
const obj = Object.create(proto);
console.log(obj.__proto__ === proto); // 输出: true

原型继承的示例

以下是一个完整的原型继承示例,展示了如何通过原型链实现继承:

js 实现原型

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.

注意事项

  • 原型链不宜过长,否则会影响性能。
  • 修改原型会影响所有继承自该原型的对象。
  • 避免直接使用__proto__属性,推荐使用Object.getPrototypeOf()Object.setPrototypeOf()

标签: 原型js
分享给朋友:

相关文章

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现报表

js实现报表

使用JavaScript实现报表 在JavaScript中实现报表功能可以通过多种方式完成,常见的方法包括使用原生JavaScript、第三方库(如Chart.js、D3.js)或结合后端数据渲染。以…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js实现dh

js实现dh

JavaScript 实现 DH(Diffie-Hellman)密钥交换 Diffie-Hellman(DH)密钥交换是一种安全协议,允许双方在不安全的通信信道上建立一个共享密钥。以下是如何在 Jav…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…