JavaScript中的原型和原型链

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

原型和原型链是JavaScript中一个重要且常常被误解的概念。它们在理解对象、继承和属性查找时扮演着关键的角色。

1. 原型:JavaScript对象的基础

在JavaScript中,几乎所有的对象都是通过构造函数(constructor)创建的。每个构造函数都有一个特殊的属性称为原型(prototype),它是一个对象,包含了构造函数的属性和方法。当我们创建一个对象时,它会继承构造函数的原型上的属性和方法。

1.1 构造函数和原型的关系

让我们通过一个示例来理解构造函数和原型之间的关系:

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

// 创建一个 Person 对象
const person1 = new Person('Alice', 25);

// 创建另一个 Person 对象
const person2 = new Person('Bob', 30);

console.log(person1.name); // 输出 'Alice'
console.log(person2.age);  // 输出 30

在上面的示例中,我们定义了一个 Person 构造函数,它有两个属性 name 和 age。然后,我们使用 new 关键字创建了两个 Person 对象 person1 和 person2。这两个对象继承了 Person 构造函数的属性。

1.2 对象的原型

每个JavaScript对象都有一个指向其原型的隐藏属性 [[Prototype]](通常通过 __proto__ 访问)。这个原型对象是一个普通对象,它包含了对象的方法和属性。

让我们看一下 person1 对象的原型:

console.log(person1.__proto__); // 输出 Person {}

JavaScript中的原型和原型链_第1张图片

person1 的原型是一个空的对象,它实际上就是 Person 构造函数的原型。这意味着 person1 可以访问 Person 构造函数原型上的属性和方法。它们之间的关系可以用下图表示:

JavaScript中的原型和原型链_第2张图片

 需要注意:constructor 是原型的一个属性。

1.3 属性查找过程

当我们访问一个对象的属性时,JavaScript 引擎会首先查找对象本身是否包含这个属性。如果对象没有这个属性,它会继续查找对象的原型,以及原型链上的其他原型,直到找到属性或查找到达原型链的末端。

让我们来看一个属性查找的例子:

console.log(person1.name); // 输出 'Alice'
console.log(person1.toString()); // 输出 '[object Object]'

在上面的示例中,当我们访问 person1 的 name 属性时,它首先查找 person1 对象本身,找到了属性 name 并输出 'Alice'。当我们调用 toString() 方法时,它查找 person1 对象本身没有这个方法,然后继续查找 Person 构造函数的原型,最终找到了 Object 构造函数的原型上的 toString() 方法。

2. 原型链:连接原型的链条

原型链是由一系列对象链接在一起的链条,用于实现属性和方法的继承。每个对象都有一个原型,这个原型又有自己的原型,以此类推,形成了原型链。原型链的终点是一个对象,它的原型为 null

2.1 原型链的构建

让我们通过一个例子来构建原型链:

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

// Animal 的原型
Animal.prototype.eat = function() {
  console.log(`${this.name} is eating.`);
};

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

// 建立原型链,使 Dog 继承 Animal
Dog.prototype = Object.create(Animal.prototype);

// Dog 的原型
Dog.prototype.bark = function() {
  console.log(`${this.name} is barking.`);
};

const myDog = new Dog('Buddy', 'Golden Retriever');

在上面的示例中,我们定义了一个 Animal 构造函数和一个 Dog 构造函数。然后,我们通过 Object.create() 来建立原型链,使 Dog 继承了 Animal。最后,我们创建了一个 myDog 对象。

2.2 属性和方法的继承

现在,myDog 对象继承了 Dog 构造函数和 Animal 构造函数的属性和方法。这意味着它可以访问 Dog 构造函数原型上的方法 bark,以及 Animal 构造函数原型上的方法 eat

myDog.bark(); // 输出 'Buddy is barking.'
myDog.eat();  // 输出 'Buddy is eating.'

在上面的示例中,myDog 对象成功地继承了原型链上的属性和方法。

2.3 修改原型链上的方法

你还可以在继承的基础上修改原型链上的方法,以满足子类型的需求。

// 修改 Dog 原型上的方法
Dog.prototype.bark = function() {
  console.log(`${this.name} is barking loudly.`);
};

myDog.bark(); // 输出 'Buddy is barking loudly.'

在上面的示例中,我们修改了 Dog 构造函数原型上的 bark 方法,使其输出不同的消息。

2.4 原型链的终点

原型链的终点是一个对象,它的原型为 null。这个对象是所有对象原型链的顶层,没有任何属性或方法。

console.log(Object.getPrototypeOf(Object.prototype)); // 输出 null

在上面的示例中,我们使用 Object.getPrototypeOf() 方法来获取 Object.prototype 的原型,发现它的原型是 null

3. JavaScript中的内置原型链

在JavaScript中,每个对象都继承自 Object 构造函数的原型。这意味着所有对象都具有一些通用的属性和方法,例如 toString()valueOf() 等。

3.1 Object.prototype

所有对象的原型链的顶端都是 Object.prototype,它包含了一些通用的方法,例如 toString() 和 valueOf()

const obj = {};
console.log(obj.toString()); // 输出 '[object Object]'

在上面的示例中,我们使用 obj 对象调用了 toString() 方法,这个方法实际上是从 Object.prototype 继承而来的。

3.2 Array.prototype

数组对象继承自 Array.prototype,这个原型包含了许多用于操作数组的方法,如 push()pop()forEach() 等。

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.length); // 输出 5
numbers.push(6);
console.log(numbers); // 输出 [1, 2, 3, 4, 5, 6]

在上面的示例中,我们使用了 Array.prototype 上的方法来操作数组 numbers

3.3 Function.prototype

所有函数对象继承自 Function.prototype,这个原型包含了一些用于函数的方法,如 call() 和 apply()

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet.call(null, 'Alice'); // 输出 'Hello, Alice!'

在上面的示例中,我们使用了 Function.prototype 上的 call() 方法来调用函数 greet

4. 实际应用:原型和原型链的使用

原型和原型链在JavaScript中的实际应用非常广泛,它们是面向对象编程的基础,并且可以用于实现继承和共享方法。以下是一些实际应用的示例:

4.1 继承

通过构造函数和原型链,你可以实现对象之间的继承关系,创建子类型并继承父类型的属性和方法。

function Shape() {
  this.color = 'red';
}

Shape.prototype.getArea = function() {
  return 0;
};

function Circle(radius) {
  this.radius = radius;
}

// Circle 继承 Shape
Circle.prototype = Object.create(Shape.prototype);

// 添加 Circle 自己的方法
Circle.prototype.getArea = function() {
  return Math.PI * Math.pow(this.radius, 2);
};

const circle = new Circle(5);
console.log(circle.color);    // 输出 'red',继承自 Shape
console.log(circle.getArea()); // 输出 78.53981633974483,来自 Circle

在上面的示例中,我们创建了一个 Shape 构造函数,它有一个 color 属性和一个 getArea() 方法。然后,我们创建了一个 Circle 构造函数,通过原型链实现了对 Shape 的继承,并添加了自己的 getArea() 方法。

4.2 对象的共享方法

通过将方法添加到原型上,可以实现多个对象之间共享方法,节省内存并提高性能。

function Car(make, model) {
  this.make = make;
  this.model = model;
}

// 将方法添加到 Car 构造函数的原型上
Car.prototype.start = function() {
  console.log(`Starting ${this.make} ${this.model}`);
};

const car1 = new Car('Toyota', 'Camry');
const car2 = new Car('Honda', 'Accord');

car1.start(); // 输出 'Starting Toyota Camry'
car2.start(); // 输出 'Starting Honda Accord'

在上面的示例中,我们将 start() 方法添加到 Car 构造函数的原型上,这意味着所有的 Car 对象都可以共享这个方法。

4.3 使用对象字面量创建对象

对象字面量是一种方便快捷的方式来创建对象,但它们实际上是通过原型链继承自 Object 构造函数的。

const person = {
  name: 'John',
  age: 30,
};

console.log(person.toString()); // 输出 '[object Object]'

在上面的示例中,person 对象是通过对象字面量创建的,它实际上继承了 Object.prototype 上的方法,包括 toString()

5. 总结

原型和原型链是JavaScript中非常重要的概念,它们用于实现对象的继承和方法的共享。了解原型和原型链的工作原理对于理解JavaScript中的对象和继承非常关键。

总结一下:

  • 原型是构造函数的属性,它包含了构造函数的方法和属性,被新创建的对象继承。
  • 原型链是一系列对象链接在一起的链条,用于实现属性和方法的继承。
  • 所有对象都有一个原型,它可以通过 __proto__ 或 Object.getPrototypeOf() 来访问。
  • 原型链的顶端是 Object.prototype,它包含了一些通用的方法。
  • 通过构造函数和原型链,可以实现对象之间的继承和方法的共享。

 给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

你可能感兴趣的:(javascript,原型模式,开发语言)