深入解读 JavaScript 中的面向对象编程

深入解读 JavaScript 中的面向对象编程

2017/07/07 · JavaScript
·
面向对象

原文出处: 景庄   

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化、多态、和封装几种技术。
对 JavaScript
而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力。
本文将会深入的探讨有关使用 JavaScript
进行面向对象编程的一些核心基础知识,包括对象的创建,继承机制,
最后还会简要的介绍如何借助 ES6
提供的新的类机制重写传统的JavaScript面向对象代码。

深入解读JavaScript面向对象编程实践

2016/03/14 · JavaScript
· 4 评论 ·
面向对象

原文出处:
景庄(@ali景庄)   

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化、多态、和封装几种技术。对JavaScript而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力。

本文将会深入的探讨有关使用JavaScript进行面向对象编程的一些核心基础知识,包括对象的创建,继承机制,最后还会简要的介绍如何借助ES6提供的新的类机制重写传统的JavaScript面向对象代码。

面向对象的几个概念

在进入正题前,先了解传统的面向对象编程(例如Java)中常会涉及到的概念,大致可以包括:

  • 类:定义对象的特征。它是对象的属性和方法的模板定义。
  • 对象(或称实例):类的一个实例。
  • 属性:对象的特征,比如颜色、尺寸等。
  • 方法:对象的行为,比如行走、说话等。
  • 构造函数:对象初始化的瞬间被调用的方法。
  • 继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
  • 封装:一种把数据和相关的方法绑定在一起使用的方法。
  • 抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。
  • 多态:不同的类可以定义相同的方法或属性。

在 JavaScript
的面向对象编程中大体也包括这些。不过在称呼上可能稍有不同,例如,JavaScript
中没有原生的“类”的概念,
而只有对象的概念。因此,随着你认识的深入,我们会混用对象、实例、构造函数等概念。

面向对象的几个概念

在进入正题前,先了解传统的面向对象编程(例如Java)中常会涉及到的概念,大致可以包括:

  • 类:定义对象的特征。它是对象的属性和方法的模板定义。
  • 对象(或称实例):类的一个实例。
  • 属性:对象的特征,比如颜色、尺寸等。
  • 方法:对象的行为,比如行走、说话等。
  • 构造函数:对象初始化的瞬间被调用的方法。
  • 继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
  • 封装:一种把数据和相关的方法绑定在一起使用的方法。
  • 抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。
  • 多态:不同的类可以定义相同的方法或属性。

在JavaScript的面向对象编程中大体也包括这些。不过在称呼上可能稍有不同,例如,JavaScript中没有原生的“类”的概念,
而只有对象的概念。因此,随着你认识的深入,我们会混用对象、实例、构造函数等概念。

对象(类)的创建

在JavaScript中,我们通常可以使用构造函数来创建特定类型的对象。诸如
Object 和 Array
这样的原生构造函数,在运行时会自动出现在执行环境中。此外,我们也可以创建自定义的构造函数。例如:

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } var person1 = new Person(‘Weiwei’, 27, ‘Student’); var
person2 = new Person(‘Lily’, 25, ‘Doctor’);

1
2
3
4
5
6
7
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);

按照惯例,构造函数始终都应该以一个大写字母开头(和Java中定义的类一样),普通函数则小写字母开头。
要创建 Person 的新实例,必须使用
new
操作符。
以这种方式调用构造函数实际上会经历以下4个步骤:

  1. 创建一个新对象(实例)
  2. 将构造函数的作用域赋给新对象(也就是重设了this的指向,this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

在上面的例子中,我们创建了 Person 的两个实例 person1person2

这两个对象默认都有一个 constructor 属性,该属性指向它们的构造函数
Person,也就是说:

JavaScript

console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true

1
2
console.log(person1.constructor == Person);  //true
console.log(person2.constructor == Person);  //true

对象(类)的创建

在JavaScript中,我们通常可以使用构造函数来创建特定类型的对象。诸如Object和Array这样的原生构造函数,在运行时会自动出现在执行环境中。
此外,我们也可以创建自定义的构造函数。例如:

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } var person1 = new Person(‘Weiwei’, 27, ‘Student’); var
person2 = new Person(‘Lily’, 25, ‘Doctor’);

1
2
3
4
5
6
7
8
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
 
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);

按照惯例,构造函数始终都应该以一个大写字母开头(和Java中定义的类一样),普通函数则小写字母开头。
要创建Person的新实例,必须使用new操作符。以这种方式调用构造函数实际上会经历以下4个步骤:

  1. 创建一个新对象(实例)
  2. 将构造函数的作用域赋给新对象(也就是重设了this的指向,this就指向了这个新对象)
  3. 执行构造函数中的代码(为这个新对象添加属性)
  4. 返回新对象

有关new操作符的更多内容请参考这篇文档

在上面的例子中,我们创建了Person的两个实例person1person2
这两个对象默认都有一个constructor属性,该属性指向它们的构造函数Person,也就是说:

console.log(person1.constructor == Person); //true
console.log(person2.constructor == Person); //true

1
2
console.log(person1.constructor == Person);  //true
console.log(person2.constructor == Person);  //true

自定义对象的类型检测

我们可以使用instanceof操作符进行类型检测。我们创建的所有对象既是Object的实例,同时也是Person的实例。
因为所有的对象都继承自Object

JavaScript

console.log(person1 instanceof Object); //true console.log(person1
instanceof Person); //true console.log(person2 instanceof Object);
//true console.log(person2 instanceof Person); //true

1
2
3
4
console.log(person1 instanceof Object);  //true
console.log(person1 instanceof Person);  //true
console.log(person2 instanceof Object);  //true
console.log(person2 instanceof Person);  //true

自定义对象的类型检测

我们可以使用instanceof操作符进行类型检测。我们创建的所有对象既是Object的实例,同时也是Person的实例。
因为所有的对象都继承自Object

console.log(person1 instanceof Object); //true console.log(person1
instanceof Person); //true console.log(person2 instanceof Object);
//true console.log(person2 instanceof Person); //true

1
2
3
4
console.log(person1 instanceof Object);  //true
console.log(person1 instanceof Person);  //true
console.log(person2 instanceof Object);  //true
console.log(person2 instanceof Person);  //true

构造函数的问题

我们不建议在构造函数中直接定义方法,如果这样做的话,每个方法都要在每个实例上重新创建一遍,这将非常损耗性能。
——不要忘了,ECMAScript中的函数是对象,每定义一个函数,也就实例化了一个对象。

幸运的是,在ECMAScript中,我们可以借助原型对象来解决这个问题。

构造函数的问题

我们不建议在构造函数中直接定义方法,如果这样做的话,每个方法都要在每个实例上重新创建一遍,这将非常损耗性能。
——不要忘了,ECMAScript中的函数是对象,每定义一个函数,也就实例化了一个对象。

幸运的是,在ECMAScript中,我们可以借助原型对象来解决这个问题。

借助原型模式定义对象的方法

我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向该函数的原型对象
该对象包含了由特定类型的所有实例共享的属性和方法。也就是说,我们可以利用原型对象来让所有对象实例共享它所包含的属性和方法。

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 通过原型模式来添加所有实例共享的方法 // sayName()
方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () { console.log(this.name); }; var
person1 = new Person(‘Weiwei’, 27, ‘Student’); var person2 = new
Person(‘Lily’, 25, ‘Doctor’); console.log(person1.sayName ===
person2.sayName); // true person1.sayName(); // Weiwei
person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
// 通过原型模式来添加所有实例共享的方法
// sayName() 方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () {
  console.log(this.name);
};
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei
person2.sayName(); // Lily

正如上面的代码所示,通过原型模式定义的方法sayName()为所有的实例所共享。也就是,
person1person2访问的是同一个sayName()函数。同样的,公共属性也可以使用原型模式进行定义。例如:

JavaScript

function Chinese (name) { this.name = name; } Chinese.prototype.country
= ‘China’; // 公共属性,所有实例共享

1
2
3
4
function Chinese (name) {
    this.name = name;
}
Chinese.prototype.country = ‘China’; // 公共属性,所有实例共享

当我们new Person()时,返回的Person实例会结合构造函数中定义的属性、行为和原型中定义的属性、行为,
生成最终属于Person实例的属性和行为。

构造函数中定义的属性和行为的优先级要比原型中定义的属性和行为的优先级高,如果构造函数和原型中定义了同名的属性或行为,
构造函数中的属性或行为会覆盖原型中的同名的属性或行为。

借助原型模式定义对象的方法

我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向该函数的原型对象
该对象包含了由特定类型的所有实例共享的属性和方法。也就是说,我们可以利用原型对象来让所有对象实例共享它所包含的属性和方法。

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 通过原型模式来添加所有实例共享的方法 // sayName()
方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () { console.log(this.name); }; var
person1 = new Person(‘Weiwei’, 27, ‘Student’); var person2 = new
Person(‘Lily’, 25, ‘Doctor’); console.log(person1.sayName ===
person2.sayName); // true person1.sayName(); // Weiwei
person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
 
// 通过原型模式来添加所有实例共享的方法
// sayName() 方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () {
  console.log(this.name);
};
 
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
 
console.log(person1.sayName === person2.sayName); // true
 
person1.sayName(); // Weiwei
person2.sayName(); // Lily

正如上面的代码所示,通过原型模式定义的方法sayName()为所有的实例所共享。也就是,
person1person2访问的是同一个sayName()函数。同样的,公共属性也可以使用原型模式进行定义。例如:

function Chinese (name) { this.name = name; } Chinese.prototype.country
= ‘China’; // 公共属性,所有实例共享

1
2
3
4
5
function Chinese (name) {
    this.name = name;
}
 
Chinese.prototype.country = ‘China’; // 公共属性,所有实例共享

原型对象

现在我们来深入的理解一下什么是原型对象。

只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。
在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。
也就是说:Person.prototype.constructor指向Person构造函数。

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。
当调用构造函数创建一个新实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象。ES5中称这个指针为[[Prototype]]
在Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__(目前已被废弃);而在其他实现中,这个属性对脚本则是完全不可见的。
要注意,这个链接存在于实例与构造函数的原型对象之间,而不是实例与构造函数之间

这三者关系的示意图如下:

蒲京娱乐场网站 1

上图展示了Person构造函数、Person的原型对象以及Person现有的两个实例之间的关系。

  • Person.prototype指向了原型对象
  • Person.prototype.constructor又指回了Person构造函数
  • Person的每个实例person1person2都包含一个内部属性(通常为__proto__),person1.__proto__person2.__proto__指向了原型对象

原型对象

现在我们来深入的理解一下什么是原型对象。

只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。
在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。
也就是说:Person.prototype.constructor指向Person构造函数。

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。
当调用构造函数创建一个新实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象。ES5中称这个指针为[[Prototype]]
在Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__(目前已被废弃);而在其他实现中,这个属性对脚本则是完全不可见的。
要注意,这个链接存在于实例与构造函数的原型对象之间,而不是实例与构造函数之间

这三者关系的示意图如下:

蒲京娱乐场网站 2

上图展示了Person构造函数、Person的原型对象以及Person现有的两个实例之间的关系。

  • Person.prototype指向了原型对象
  • Person.prototype.constructor又指回了Person构造函数
  • Person的每个实例person1person2都包含一个内部属性(通常为__proto__),person1.__proto__person2.__proto__指向了原型对象

查找对象属性

从上图我们发现,虽然Person的两个实例都不包含属性和方法,但我们却可以调用person1.sayName()
这是通过查找对象属性的过程来实现的。

  1. 搜索首先从对象实例本身开始(实例person1sayName属性吗?——没有)
  2. 如果没找到,则继续搜索指针指向的原型对象person1.__proto__sayName属性吗?——有)

这也是多个对象实例共享原型所保存的属性和方法的基本原理。

注意,如果我们在对象的实例中重写了某个原型中已存在的属性,则该实例属性会屏蔽原型中的那个属性。
此时,可以使用delete操作符删除实例上的属性。

查找对象属性

从上图我们发现,虽然Person的两个实例都不包含属性和方法,但我们却可以调用person1.sayName()
这是通过查找对象属性的过程来实现的。

  1. 搜索首先从对象实例本身开始(实例person1蒲京娱乐场网站,有sayName属性吗?——没有)
  2. 如果没找到,则继续搜索指针指向的原型对象person1.__proto__sayName属性吗?——有)

这也是多个对象实例共享原型所保存的属性和方法的基本原理。

注意,如果我们在对象的实例中重写了某个原型中已存在的属性,则该实例属性会屏蔽原型中的那个属性。
此时,可以使用delete操作符删除实例上的属性。

Object.getPrototypeOf()

根据ECMAScript标准,someObject.[[Prototype]] 符号是用于指派
someObject 的原型。
这个等同于 JavaScript 的 __proto__
属性(现已弃用,因为它不是标准)。
从ECMAScript 5开始, [[Prototype]]
可以用Object.getPrototypeOf()Object.setPrototypeOf()访问器来访问。

其中Object.getPrototypeOf()在所有支持的实现中,这个方法返回[[Prototype]]的值。例如:

JavaScript

person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

1
2
person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

也就是说,Object.getPrototypeOf(p1)返回的对象实际就是这个对象的原型。
这个方法的兼容性请参考该链接)。

Object.getPrototypeOf()

根据ECMAScript标准,someObject.[[Prototype]] 符号是用于指派
someObject 的原型。
这个等同于 JavaScript 的 __proto__ 属性(现已弃用)。
从ECMAScript 5开始, [[Prototype]]
可以用Object.getPrototypeOf()Object.setPrototypeOf()访问器来访问。

其中Object.getPrototypeOf()在所有支持的实现中,这个方法返回[[Prototype]]的值。例如:

person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

1
2
person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

也就是说,Object.getPrototypeOf(p1)返回的对象实际就是这个对象的原型。
这个方法的兼容性请参考该链接)。

Object.keys()

要取得对象上所有可枚举的实例属性,可以使用ES5中的Object.keys()方法。例如:

JavaScript

Object.keys(p1); // [“name”, “age”, “job”]

1
Object.keys(p1); // ["name", "age", "job"]

此外,如果你想要得到所有实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyName()方法。

Object.keys()

要取得对象上所有可枚举的实例属性,可以使用ES5中的Object.keys()方法。例如:

Object.keys(p1); // [“name”, “age”, “job”]

1
Object.keys(p1); // ["name", "age", "job"]

此外,如果你想要得到所有实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyName()方法。

更简单的原型语法

在上面的代码中,如果我们要添加原型属性和方法,就要重复的敲一遍Person.prototype。为了减少这个重复的过程,
更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。
参考资料

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 重写整个原型对象 Person.prototype = { //
这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
constructor: Person, // Attention! sayName: function () {
console.log(this.name); } }; var person1 = new Person(‘Weiwei’, 27,
‘Student’); var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
// 重写整个原型对象
Person.prototype = {
  
  // 这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
  constructor: Person, // Attention!
  sayName: function () {
    console.log(this.name);
  }
};
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName();  // Weiwei
person2.sayName();  // Lily

在上面的代码中特意包含了一个constructor属性,并将它的值设置为Person,从而确保了通过该属性能够访问到适当的值。
注意,以这种方式重设constructor属性会导致它的[[Enumerable]]特性设置为true。默认情况下,原生的constructor属性是不可枚举的。
你可以使用Object.defineProperty()

JavaScript

// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, “constructor”, { enumerable:
false, value: Person });

1
2
3
4
5
// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
});

更简单的原型语法

在上面的代码中,如果我们要添加原型属性和方法,就要重复的敲一遍Person.prototype。为了减少这个重复的过程,
更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。
参考资料

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } Person.prototype = { //
这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
constructor: Person, // Attention! sayName: function () {
console.log(this.name); } }; var person1 = new Person(‘Weiwei’, 27,
‘Student’); var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
 
Person.prototype = {
 
  // 这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
  constructor: Person, // Attention!
 
  sayName: function () {
    console.log(this.name);
  }
};
 
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
 
console.log(person1.sayName === person2.sayName); // true
 
person1.sayName();  // Weiwei
person2.sayName();  // Lily

在上面的代码中特意包含了一个constructor属性,并将它的值设置为Person,从而确保了通过该属性能够访问到适当的值。
注意,以这种方式重设constructor属性会导致它的[[Enumerable]]特性设置为true。默认情况下,原生的constructor属性是不可枚举的。
你可以使用Object.defineProperty()

// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, “constructor”, { enumerable:
false, value: Person });

1
2
3
4
5
// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
});

组合使用构造函数模式和原型模式

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,
而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方的引用,
最大限度的节省了内存。

组合使用构造函数模式和原型模式

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,
而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方的引用,
最大限度的节省了内存。

继承

大多的面向对象语言都支持两种继承方式:接口继承和实现继承。ECMAScript只支持实现继承,而且其实现继承主要依靠原型链来实现。

前面我们知道,JavaScript中实例的属性和行为是由构造函数和原型两部分共同组成的。如果我们想让Child继承Father
那么我们就需要把Father构造函数和原型中属性和行为全部传给Child的构造函数和原型。

继承

大多的面向对象语言都支持两种继承方式:接口继承和实现继承。ECMAScript只支持实现继承,而且其实现继承主要依靠原型链来实现。

原型链继承

使用原型链作为实现继承的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。首先我们先回顾一些基本概念:

  • 每个构造函数都有一个原型对象(prototype
  • 原型对象包含一个指向构造函数的指针(constructor
  • 实例都包含一个指向原型对象的内部指针([[Prototype]]

如果我们让原型对象等于另一个类型的实现,结果会怎么样?显然,此时的原型对象将包含一个指向另一个原型的指针
相应的,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,
如此层层递进,就构成了实例与原型的链条。
更详细的内容可以参考这个链接
先看一个简单的例子,它演示了使用原型链实现继承的基本框架:

JavaScript

function Father () { this.fatherValue = true; }
Father.prototype.getFatherValue = function () {
console.log(this.fatherValue); }; function Child () { this.childValue =
false; } // 实现继承:继承自Father Child.prototype = new Father();
Child.prototype.getChildValue = function () {
console.log(this.childValue); }; var instance = new Child();
instance.getFatherValue(); // true instance.getChildValue(); // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Father () {
  this.fatherValue = true;
}
Father.prototype.getFatherValue = function () {
  console.log(this.fatherValue);
};
function Child () {
  this.childValue = false;
}
// 实现继承:继承自Father
Child.prototype = new Father();
Child.prototype.getChildValue = function () {
  console.log(this.childValue);
};
var instance = new Child();
instance.getFatherValue(); // true
instance.getChildValue();  // false

在上面的代码中,原型链继承的核心语句是Child.prototype = new Father(),它实现了ChildFather的继承,
而继承是通过创建Father的实例,并将该实例赋给Child.prototype实现的。

实现的本质是重写原型对象,代之以一个新类型的实例。也就是说,原来存在于Father的实例中的所有属性和方法,
现在也存在于Child.prototype中了。

这个例子中的实例以及构造函数和原型之间的关系如下图所示:

蒲京娱乐场网站 3

在上面的代码中,我们没有使用Child默认提供的原型,而是给它换了一个新原型;这个新原型就是Father的实例。
于是,新原型不仅具有了作为一个Father的实例所拥有的全部属性和方法。而且其内部还有一个指针[[Prototype]],指向了Father的原型。

  • instance指向Child的原型对象
  • Child的原型对象指向Father的原型对象
  • getFatherValue()方法仍然还在Father.prototype
  • 但是,fatherValue则位于Child.prototype
  • instance.constructor现在指向的是Father

因为fatherValue是一个实例属性,而getFatherValue()则是一个原型方法。既然Child.prototype现在是Father的实例,
那么fatherValue当然就位于该实例中。

通过实现原型链,本质上扩展了本章前面介绍的原型搜索机制。例如,instance.getFatherValue()会经历三个搜索步骤:

  1. 搜索实例
  2. 搜索Child.prototype
  3. 搜索Father.prototype

原型链继承

使用原型链作为实现继承的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。首先我们先回顾一些基本概念:

  • 每个构造函数都有一个原型对象(prototype
  • 原型对象包含一个指向构造函数的指针(constructor
  • 实例都包含一个指向原型对象的内部指针([[Prototype]]

如果我们让原型对象等于另一个类型的实现,结果会怎么样?显然,此时的原型对象将包含一个指向另一个原型的指针
相应的,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,
如此层层递进,就构成了实例与原型的链条。
更详细的内容可以参考这个链接
先看一个简单的例子,它演示了使用原型链实现继承的基本框架:

function Father () { this.fatherValue = true; }
Father.prototype.getFatherValue = function () {
console.log(this.fatherValue); }; function Child () { this.childValue =
false; } // 实现继承:继承自Father Child.prototype = new Father();
Child.prototype.getChildValue = function () {
console.log(this.childValue); }; var instance = new Child();
instance.getFatherValue(); // true instance.getChildValue(); // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Father () {
  this.fatherValue = true;
}
 
Father.prototype.getFatherValue = function () {
  console.log(this.fatherValue);
};
 
function Child () {
  this.childValue = false;
}
 
// 实现继承:继承自Father
Child.prototype = new Father();
 
Child.prototype.getChildValue = function () {
  console.log(this.childValue);
};
 
var instance = new Child();
instance.getFatherValue(); // true
instance.getChildValue();  // false

在上面的代码中,原型链继承的核心语句是Child.prototype = new Father(),它实现了ChildFather的继承,
而继承是通过创建Father的实例,并将该实例赋给Child.prototype实现的。

实现的本质是重写原型对象,代之以一个新类型的实例。也就是说,原来存在于Father的实例中的所有属性和方法,
现在也存在于Child.prototype中了。

这个例子中的实例以及构造函数和原型之间的关系如下图所示:

蒲京娱乐场网站 4

在上面的代码中,我们没有使用Child默认提供的原型,而是给它换了一个新原型;这个新原型就是Father的实例。
于是,新原型不仅具有了作为一个Father的实例所拥有的全部属性和方法。而且其内部还有一个指针[[Prototype]],指向了Father的原型。

  • instance指向Child的原型对象
  • Child的原型对象指向Father的原型对象
  • getFatherValue()方法仍然还在Father.prototype
  • 但是,fatherValue则位于Child.prototype
  • instance.constructor现在指向的是Father

因为fatherValue是一个实例属性,而getFatherValue()则是一个原型方法。既然Child.prototype现在是Father的实例,
那么fatherValue当然就位于该实例中。

通过实现原型链,本质上扩展了本章前面介绍的原型搜索机制。例如,instance.getFatherValue()会经历三个搜索步骤:

  1. 搜索实例
  2. 搜索Child.prototype
  3. 搜索Father.prototype