JavaScript 原型链知识点解析

xiaoshi 05-30 17 抢沙发

默认

摘要： ...

JavaScript原型链深度解析：从入门到精通

什么是原型链？

JavaScript中的原型链是这门语言最核心的特性之一，也是许多开发者感到困惑的概念。简单来说，每个JavaScript对象都有一个隐藏的[[Prototype]]属性（可以通过__proto__访问），它指向另一个对象，这个对象就是它的"原型"。当访问一个对象的属性时，如果对象本身没有这个属性，JavaScript引擎就会沿着原型链向上查找，直到找到该属性或者到达原型链的末端（null）。

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

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

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

在这个例子中，john对象本身没有sayHello方法，但通过原型链，它能够访问到Person.prototype上的方法。

原型链的构成

理解原型链需要掌握几个关键点：

构造函数：用于创建对象的函数，通常首字母大写
prototype属性：每个函数都有一个prototype属性，指向一个对象
proto属性：每个对象都有一个proto属性，指向它的原型对象
constructor属性：原型对象上的constructor属性指向构造函数本身

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

const dog = new Animal('dog');

console.log(dog.__proto__ === Animal.prototype); // true
console.log(Animal.prototype.constructor === Animal); // true
console.log(dog.__proto__.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

原型继承的实现

JavaScript使用原型链来实现继承。ES6虽然引入了class语法，但底层仍然是基于原型链的。

// 父类
function Vehicle(make) {
  this.make = make;
}

Vehicle.prototype.start = function() {
  console.log(`${this.make} is starting...`);
};

// 子类
function Car(make, model) {
  Vehicle.call(this, make);
  this.model = model;
}

// 设置原型链
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

Car.prototype.drive = function() {
  console.log(`${this.make} ${this.model} is driving...`);
};

const myCar = new Car('Toyota', 'Camry');
myCar.start(); // Toyota is starting...
myCar.drive(); // Toyota Camry is driving...

原型链的查找机制

当访问一个对象的属性时，JavaScript引擎会按照以下顺序查找：

首先检查对象自身是否有该属性
如果没有，检查对象的__proto__指向的原型对象
继续沿着原型链向上查找，直到找到该属性或到达原型链末端（null）

const obj = {
  a: 1
};

const child = Object.create(obj);
child.b = 2;

console.log(child.b); // 2 - 来自child自身
console.log(child.a); // 1 - 来自原型链
console.log(child.c); // undefined - 未找到

现代JavaScript中的原型链

ES6引入了class语法，使得原型继承更加直观，但底层机制没有改变。

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}`);
  }
}

const alice = new Student('Alice', 5);
alice.sayHello(); // Hello, Alice!
alice.study(); // Alice is studying in grade 5

原型链的常见问题

性能问题：过长的原型链会影响属性查找速度
意外覆盖：修改原型会影响所有实例
枚举问题：原型上的属性会被for...in循环枚举（可使用hasOwnProperty过滤）
constructor丢失：手动设置prototype时可能忘记重置constructor

function Problem() {}
Problem.prototype = {
  method1: function() {},
  method2: function() {}
};

const p = new Problem();
console.log(p.constructor === Problem); // false
console.log(p.constructor === Object); // true

最佳实践

优先使用ES6 class语法，它更清晰且不易出错
避免直接修改内置对象的原型（如Array.prototype）
对于简单对象，考虑使用Object.create而不是构造函数
需要继承时，使用class extends语法
谨慎使用__proto__，推荐使用Object.getPrototypeOf和Object.setPrototypeOf

// 更好的方式
const parent = {
  greet() {
    console.log('Hello from parent');
  }
};

const child = Object.create(parent);
child.greet(); // Hello from parent