深入理解JavaScript原型_面向对象编程实践

JavaScript的面向对象基于原型而非类，ES6的class是语法糖，底层仍用原型链实现继承。对象通过__proto__指向原型，查找属性时沿原型链向上追溯。函数的prototype属性被实例继承，new操作生成的对象原型指向构造函数的prototype。继承通过Object.create(父类.prototype)实现，子类原型链连接到父类，同时需修正constructor指向。class语法更简洁，但extends本质仍是原型链继承，掌握原型机制才能深入理解JavaScript对象模型。

JavaScript的面向对象机制和其他语言如Java或C++不同，它基于原型（prototype）而非类（class）来实现对象的继承与扩展。虽然ES6引入了class关键字，但这只是语法糖，底层依然是原型系统。理解原型是掌握JavaScript面向对象编程的关键。

原型与原型链：对象如何共享属性和方法

每个JavaScript对象都有一个内部链接指向另一个对象，这个对象就是它的原型。当访问一个对象的属性时，如果该对象本身没有这个属性，引擎会自动查找其原型对象，这个过程一直持续到原型链的末端——通常是Object.prototype，最终返回null。

函数在JavaScript中是一等公民，而每个函数都有一个prototype属性，这个属性是一个对象，包含可以被实例继承的属性和方法。使用new操作符调用函数时，新创建的对象的原型就会指向该函数的prototype。

例如：

立即学习“Java免费学习笔记（深入）”；

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log("Hello, I'm " + this.name);
};

const john = new Person("John");
john.greet(); // 输出: Hello, I'm John

这里，john本身没有greet方法，但它能调用，是因为它通过原型链找到了Person.prototype上的定义。

构造函数、实例与原型的关系

理解构造函数.prototype、实例.__proto__和Object.getPrototypeOf()之间的关系至关重要。

• Person.prototype 是构造函数的原型对象，用于为所有实例提供共享方法。
• john.__proto__ 指向Person.prototype，这是实例访问原型的标准方式（不推荐直接使用__proto__，应使用Object.getPrototypeOf(john)）。
• Person.prototype.constructor 默认指向Person函数本身。

可以通过以下代码验证：

Veed AI Voice Generator

Veed推出的AI语音生成器

77

查看详情

console.log(john.__proto__ === Person.prototype); // true
console.log(Object.getPrototypeOf(john) === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

利用原型实现继承

JavaScript中的继承通常通过“原型链”实现。子类的原型设置为父类的一个实例，从而让子类实例能够访问父类的方法和属性。

基本模式如下：

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + " makes a sound.");
};

function Dog(name, breed) {
  Animal.call(this, name); // 调用父类构造函数
  this.breed = breed;
}

// 建立原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(this.name + " barks!");
};

const dog = new Dog("Rex", "German Shepherd");
dog.speak(); // Rex makes a sound.
dog.bark();  // Rex barks!

关键点在于使用Object.create(Animal.prototype)来设置Dog.prototype，这样既继承了方法，又不会执行Animal的构造函数逻辑。同时要手动恢复constructor指向，避免后续出错。

现代实践：class语法与底层原型的一致性

ES6的class语法让代码更清晰，但本质不变：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + " makes a sound.");
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  bark() {
    console.log(this.name + " barks!");
  }
}

这段代码与前面的原型写法功能一致。extends背后仍然是通过原型链连接Dog.prototype到Animal.prototype。使用class并不会改变JavaScript的原型机制，只是提供了更直观的语法。

基本上就这些。掌握原型，你就能真正理解JavaScript的对象模型，无论是否使用class，都能写出高效、可维护的面向对象代码。

以上就是深入理解JavaScript原型_面向对象编程实践的详细内容，更多请关注php中文网其它相关文章！