原型链(Prototype Chain)知识总结

1. ​什么是原型链?

JavaScript 中的每个对象都有一个原型对象(Prototype)​,对象可以通过原型链继承另一个对象的属性和方法。
当访问对象的属性时,如果对象本身没有该属性,JavaScript 会沿着原型链向上查找,直到找到该属性或到达原型链的顶端(null)。

2. ​原型链的核心概念

  • ​**prototype**:函数特有的属性,指向该函数的原型对象(用于构造函数创建实例时共享方法)。
  • ​**__proto__**:对象特有的属性,指向其构造函数的原型对象(即 构造函数的.prototype)。
  • 构造函数(Constructor)​:通过 new 关键字创建对象的函数。

3. ​原型链的经典例子

// 构造函数
function Person(name) {
  this.name = name;
}

// 在原型上添加方法(所有实例共享)
Person.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
};

// 创建实例
const alice = new Person("Alice");
const bob = new Person("Bob");

alice.sayHello(); // 输出 "Hello, I'm Alice"
bob.sayHello();   // 输出 "Hello, I'm Bob"

// 原型链查找过程:
// alice 自身没有 sayHello 方法 → 查找 alice.__proto__(即 Person.prototype)→ 找到方法!

4. ​原型链的继承

通过修改原型链可以实现继承:

function Student(name, grade) {
  Person.call(this, name); // 继承属性
  this.grade = grade;
}

// 继承原型方法
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// 添加子类方法
Student.prototype.study = function() {
  console.log(`${this.name} is studying.`);
};

const student = new Student("Charlie", 3);
student.sayHello(); // 继承自 Person 的方法
student.study();    // 子类自己的方法

5. ​原型链的终点

所有原型链的顶端都是 Object.prototype,而 Object.prototype.__proto__ 为 null

作用实现对象之间的属性和方法共享
应用场景继承、共享方法、减少内存占用
内存影响共享方法减少重复内存占用
底层机制对象通过 __proto__ 链式查找属性

原型链的经典使用

  • 共享方法​(节省内存):

    function Car(brand) {
      this.brand = brand;
    }
    Car.prototype.drive = function() { // 所有实例共享此方法
      console.log(`${this.brand} is driving.`);
    };
  • 继承

    function Animal(name) { this.name = name; }
    Animal.prototype.eat = function() { console.log(`${this.name} eats.`); };
    
    function Dog(name) {
      Animal.call(this, name); // 继承属性
    }
    Dog.prototype = Object.create(Animal.prototype);
    Dog.prototype.bark = function() { console.log("Woof!"); };
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值