JavaScript 原型

JavaScript 的原型(Prototype)是其面向对象编程模型的核心概念之一,它决定了对象如何继承属性和方法。通过理解 JavaScript 的原型,你可以更好地理解对象之间的关系以及如何扩展对象功能。


核心概念

  1. [[Prototype]](内部属性)

    • 每个 JavaScript 对象都有一个隐藏的内部属性,称为 [[Prototype]]
    • 这个属性通常指向另一个对象,也就是该对象的原型。
  2. Object.prototype

    • 所有普通对象都最终继承自 Object.prototype,除非手动更改。
    • Object.prototype 是原型链的顶端,它的 [[Prototype]]null
  3. __proto__

    • 这是一些浏览器(如 Chrome 和 Firefox)中提供的访问 [[Prototype]] 的非标准方式。
    • 它主要用于调试,不推荐在实际代码中使用。
    • 现代的方式是使用 Object.getPrototypeOf(obj)Object.setPrototypeOf(obj, prototype)
  4. 构造函数与 .prototype

    • 每个函数(作为构造函数)都有一个 prototype 属性。
    • 当用构造函数创建一个对象时,该对象的 [[Prototype]] 会被设置为该构造函数的 prototype

示例

1. 创建对象与原型链
function Person(name) {
  this.name = name;
}

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

const person1 = new Person("Alice");
person1.sayHello(); // Hello, my name is Alice

console.log(person1.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null
2. 使用 Object.create 创建对象
const proto = {
  greet() {
    console.log("Hello!");
  },
};

const obj = Object.create(proto);
obj.greet(); // Hello!
console.log(Object.getPrototypeOf(obj) === proto); // true
3. 修改原型
function Dog(name) {
  this.name = name;
}

const dog = new Dog("Rex");

// 修改原型
Dog.prototype.bark = function () {
  console.log(`${this.name} says Woof!`);
};

dog.bark(); // Rex says Woof!

原型链

JavaScript 通过原型链实现继承。如果对象在自身没有找到属性或方法,会沿着原型链向上查找,直到顶端的 Object.prototype,若仍未找到,则返回 undefined

示例:

const obj = {};
console.log(obj.toString()); // "[object Object]" 来自 Object.prototype

原型链结构:

  • objObject.prototypenull

注意点

  1. 避免循环引用
    修改原型链时要小心,避免导致无限循环。

    const a = {};
    a.__proto__ = a; // 不推荐,可能导致错误
    
  2. 性能问题
    频繁访问深层次的原型链可能会导致性能问题。

  3. 现代方法
    使用 class 语法可以更优雅地操作原型。

    class Animal {
      speak() {
        console.log("Animal speaks");
      }
    }
    
    class Dog extends Animal {
      bark() {
        console.log("Dog barks");
      }
    }
    
    const dog = new Dog();
    dog.speak(); // Animal speaks
    dog.bark();  // Dog barks
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值