当前位置:首页 > 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
分享给朋友:

相关文章

css3结合js制作

css3结合js制作

CSS3 结合 JavaScript 制作动态效果 CSS3 和 JavaScript 结合可以实现丰富的动态效果,包括动画、交互和响应式设计。以下是几种常见的实现方式: CSS3 动画与 Java…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <di…

js钟表实现

js钟表实现

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

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…