javascript 的原型详解

原创

mob64ca12f24f3a 2023-08-04 08:02:26 ©著作权

文章标签 构造函数原型链创建对象 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f24f3a的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript的原型详解

引言

JavaScript是一门面向对象的编程语言，而对象在JavaScript中是非常重要的一部分。在JavaScript中，对象是通过原型来实现的，原型是对象的一个属性，用于存储对象的方法和属性。理解原型的概念对于掌握JavaScript的面向对象编程是至关重要的。

本文将详细解释什么是JavaScript的原型，原型链，以及如何使用原型来创建对象和继承。

对象和原型的关系

在JavaScript中，对象是通过构造函数创建的。构造函数本身也是一个函数，用于创建对象的实例。而每个构造函数都有一个原型对象，原型对象是一个普通对象，用于存储构造函数的方法和属性。

下面是一个构造函数的示例：

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

var person1 = new Person("John", 20);
var person2 = new Person("Jane", 25);

在上面的例子中，Person是一个构造函数，用于创建Person对象的实例。person1和person2是通过Person构造函数创建的两个对象。

在JavaScript中，对象可以访问它的原型。可以通过Object.getPrototypeOf()方法来获取对象的原型。例如：

var prototype = Object.getPrototypeOf(person1);
console.log(prototype); // 输出Person {}

在上面的例子中，prototype变量将存储person1对象的原型。

原型链

每个对象的原型都是一个对象，它也有自己的原型。这样就形成了一个原型链。原型链的作用是当对象访问一个方法或属性时，在自身原型中查找，如果找不到，就会在原型的原型中继续查找，直到找到该方法或属性，或者到达原型链的顶端为止。

下面是一个原型链的示意图：

对象1 -> 对象1的原型
     -> 对象1的原型的原型
     -> 对象1的原型的原型的原型
     ...
     -> Object.prototype
     -> null

在上面的图中，对象1的原型链由自身原型、原型的原型、原型的原型的原型依次组成，直到Object.prototype为止。Object.prototype是原型链的顶端，它是所有JavaScript对象的最终原型。

使用原型创建对象

在JavaScript中，可以使用原型来创建对象。可以通过构造函数的prototype属性添加方法和属性到原型中，这样通过该构造函数创建的对象都可以访问这些方法和属性。

下面是一个使用原型创建对象的示例：

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

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

var person = new Person("John", 20);
person.sayHello(); // 输出：Hello, my name is John

在上面的例子中，Person.prototype.sayHello方法被添加到了Person的原型中。通过Person构造函数创建的对象都可以使用sayHello方法。

使用原型实现继承

原型还可以用来实现对象之间的继承。通过将子对象的原型设置为父对象的一个实例，可以实现子对象继承父对象的方法和属性。

下面是一个使用原型实现继承的示例：

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

Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

var dog = new Dog("Max");
dog.sayName(); // 输出：My name is Max

在上面的例子中，Dog对象继承了Animal对象的sayName方法。通过Object.create()方法将Dog的原型设置为Animal的一个实例，这样Dog对象就可以使用Animal的方法和属性。