继续原理，到底是怎么的

分类：前端技术

JS 的 new 到底是干什么的？

2017/04/10 · JavaScript · 4 评论 · new

原文出处：方应杭

大部分讲 new 的文章会从面向对象的思路讲起，但是我始终认为，在解释一个事物的时候，不应该引入另一个更复杂的事物。

今天我从「省代码」的角度来讲 new。

—————————

想象我们在制作一个策略类战争游戏，玩家可以操作一堆士兵攻击敌方。

我们着重来研究一下这个游戏里面的「制造士兵」环节。

一个士兵的在计算机里就是一堆属性，如下图：

我们只需要这样就可以制造一个士兵：

JavaScript

var 士兵 = { ID: 1, // 用于区分每个士兵兵种:"美国大兵", 攻击力:5, 生命值:42, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 兵营.制造(士兵)

var 士兵 = {

ID: 1, // 用于区分每个士兵

兵种:"美国大兵",

攻击力:5,

生命值:42,

行走:function(){ /*走俩步的代码*/},

奔跑:function(){ /*狂奔的代码*/ },

死亡:function(){ /*Go die*/ },

攻击:function(){ /*糊他熊脸*/ },

防御:function(){ /*护脸*/ }

}

兵营.制造(士兵)

摘要：理解 JS 继承。

在其他语言中，new操作符都是用来实例化创建一个对象的，JavaScript 中同样如此，但是它又有一些不同。为了说清楚这个问题我们先来看一下JavaScript 中的类、原型、原型链、继承这些概念吧。

对于JavaScript的继承和原型链，虽然之前自己看了书也听了session，但还是一直觉得云里雾里，不禁感叹JavaScript真是一门神奇的语言。这次经过Sponsor的一对一辅导和自己回来后反复思考，总算觉得把其中的精妙领悟一二了。

制造一百个士兵

如果需要制造 100 个士兵怎么办呢？

循环 100 次吧：

JavaScript

var 士兵们 = [] var 士兵 for(var i=0; i<100; i ){ 士兵 = { ID: i, // ID 不能重复兵种:"美国大兵", 攻击力:5, 生命值:42, 行走:function(){ /*走俩步的代码*/}，奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 士兵们.push(士兵) } 兵营.批量制造(士兵们)

var 士兵们 = []

var 士兵

for(var i=0; i<100; i ){

士兵 = {

ID: i, // ID 不能重复

兵种:"美国大兵",

攻击力:5,

生命值:42,

行走:function(){ /*走俩步的代码*/}，

奔跑:function(){ /*狂奔的代码*/ },

死亡:function(){ /*Go die*/ },

攻击:function(){ /*糊他熊脸*/ },

防御:function(){ /*护脸*/ }

}

士兵们.push(士兵)

}

兵营.批量制造(士兵们)

哎呀好简单。

原文：搞懂 JavaScript 继承原理

质疑

上面的代码存在一个问题：浪费了很多内存。

行走、奔跑、死亡、攻击、防御这五个动作对于每个士兵其实是一样的，只需要各自引用同一个函数就可以了，没必要重复创建 100 个行走、100个奔跑……
这些士兵的兵种和攻击力都是一样的，没必要创建 100 次。
只有 ID 和生命值需要创建 100 次，因为每个士兵有自己的 ID 和生命值。

Fundebug经授权转载，版权归原作者所有。

JavaScript 中没有传统类的概念，它的类就是一个方法，也就是说JavaScript 中是通过function来定义类的。比如我们可以这样子来定义一个类。

改进

看过我们的专栏以前文章（JS 原型链）的同学肯定知道，用原型链可以解决重复创建的问题：我们先创建一个「士兵原型」，然后让「士兵」的 __proto__ 指向「士兵原型」

JavaScript

var 士兵原型 = { 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}，奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } var 士兵们 = [] var 士兵 for(var i=0; i<100; i ){ 士兵 = { ID: i, // ID 不能重复生命值:42 } /*实际工作中不要这样写，因为 __proto__ 不是标准属性*/ 士兵.__proto__ = 士兵原型士兵们.push(士兵) } 兵营.批量制造(士兵们)

var 士兵原型 = {

兵种:"美国大兵",

攻击力:5,

行走:function(){ /*走俩步的代码*/}，

奔跑:function(){ /*狂奔的代码*/ },

死亡:function(){ /*Go die*/ },

攻击:function(){ /*糊他熊脸*/ },

防御:function(){ /*护脸*/ }

}

var 士兵们 = []

var 士兵

for(var i=0; i<100; i ){

士兵 = {

ID: i, // ID 不能重复

生命值:42

}

/*实际工作中不要这样写，因为 __proto__ 不是标准属性*/

士兵.__proto__ = 士兵原型

士兵们.push(士兵)

}

兵营.批量制造(士兵们)

在理解继承之前，需要知道 js 的三个东西：

function Person(name, age) {

优雅？

有人指出创建一个士兵的代码分散在两个地方很不优雅，于是我们用一个函数把这两部分联系起来：

JavaScript

function 士兵(ID){ var 临时对象 = {} 临时对象.__proto__ = 士兵.原型临时对象.ID = ID 临时对象.生命值 = 42 return 临时对象 } 士兵.原型 = { 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}，奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } // 保存为文件：士兵.js

function 士兵(ID){

var 临时对象 = {}

临时对象.__proto__ = 士兵.原型

临时对象.ID = ID

临时对象.生命值 = 42

return 临时对象

}

士兵.原型 = {

兵种:"美国大兵",

攻击力:5,

行走:function(){ /*走俩步的代码*/}，

奔跑:function(){ /*狂奔的代码*/ },

死亡:function(){ /*Go die*/ },

攻击:function(){ /*糊他熊脸*/ },

防御:function(){ /*护脸*/ }

}

// 保存为文件：士兵.js

然后就可以愉快地引用「士兵」来创建士兵了：

JavaScript

var 士兵们 = [] for(var i=0; i<100; i ){ 士兵们.push(士兵(i)) } 兵营.批量制造(士兵们)

var 士兵们 = []

for(var i=0; i<100; i ){

士兵们.push(士兵(i))

}

兵营.批量制造(士兵们)

this.name = name;

JavaScript创建对象

JS 之父的关怀

JS 之父创建了 new 关键字，可以让我们少写几行代码：

只要你在士兵前面使用 new 关键字，那么可以少做四件事情：

不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
不用 return 临时对象，因为 new 会帮你做；
不要给原型想名字了，因为 new 指定名字为 prototype。

this.age = age;

这一次我们用 new 来写

JavaScript

function 士兵(ID){ this.ID = ID this.生命值 = 42 } 士兵.prototype = { 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } // 保存为文件：士兵.js

function 士兵(ID){

this.ID = ID

this.生命值 = 42

}

士兵.prototype = {

兵种:"美国大兵",

攻击力:5,

行走:function(){ /*走俩步的代码*/},

奔跑:function(){ /*狂奔的代码*/ },

死亡:function(){ /*Go die*/ },

攻击:function(){ /*糊他熊脸*/ },

防御:function(){ /*护脸*/ }

}

// 保存为文件：士兵.js

然后是创建士兵（加了一个 new 关键字）：

JavaScript

var 士兵们 = [] for(var i=0; i<100; i ){ 士兵们.push(new 士兵(i)) } 兵营.批量制造(士兵们)

var 士兵们 = []

for(var i=0; i<100; i ){

士兵们.push(new 士兵(i))

}

兵营.批量制造(士兵们)

new 的作用，就是省那么几行代码。（也就是所谓的语法糖）

this.sing = function() { alert(this.name) }

在面向对象语言中，通常通过定义类然后再进行实例化来创建多个具有相同属性和方法的对象。但是在JavaScript中并没有类的概念，不过ECMAScript中的构造函数可以用来创建特定类型的对象。因此，在JavaScript中可以创建自定义的构造函数，并且通过new操作符来创建对象。

注意 constructor 属性

new 操作为了记录「临时对象是由哪个函数创建的」，所以预先给「士兵.prototype」加了一个 constructor 属性：

JavaScript

士兵.prototype = { constructor: 士兵 }

士兵.prototype = {

constructor: 士兵

}

如果你重新对「士兵.prototype」赋值，那么这个 constructor 属性就没了，所以你应该这么写：

JavaScript

士兵.prototype.兵种 = "美国大兵" 士兵.prototype.攻击力 = 5 士兵.prototype.行走 = function(){ /*走俩步的代码*/} 士兵.prototype.奔跑 = function(){ /*狂奔的代码*/ } 士兵.prototype.死亡 = function(){ /*Go die*/ } 士兵.prototype.攻击 = function(){ /*糊他熊脸*/ } 士兵.prototype.防御 = function(){ /*护脸*/ }

士兵.prototype.兵种 = "美国大兵"

士兵.prototype.攻击力 = 5

士兵.prototype.行走 = function(){ /*走俩步的代码*/}

士兵.prototype.奔跑 = function(){ /*狂奔的代码*/ }

士兵.prototype.死亡 = function(){ /*Go die*/ }

士兵.prototype.攻击 = function(){ /*糊他熊脸*/ }

士兵.prototype.防御 = function(){ /*护脸*/ }

或者你也可以自己给 constructor 重新赋值：

JavaScript

士兵.prototype = { constructor: 士兵, 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } }

士兵.prototype = {

constructor: 士兵,

兵种:"美国大兵",

攻击力:5,

行走:function(){ /*走俩步的代码*/},

奔跑:function(){ /*狂奔的代码*/ },

死亡:function(){ /*Go die*/ },

攻击:function(){ /*糊他熊脸*/ },

防御:function(){ /*护脸*/ }

}

完。

2 赞 6 收藏 4 评论

this 的值到底是什么

}

在JavaScript中并没有“指定的”构造函数类型，构造函数实质上也是函数，它和一般函数的区别只在于调用方式不同。只有当通过new操作符来调用的时候它才可以作为构造函数来创建对象实例，并且把构造函数的作用域赋给这个新对象(将this指向这个新对象)。如果没有使用new来调用构造函数，那就是普通的函数调用，这个时候this指向的是window对象，这样做会导致所有的属性和方法被添加到全局，因此一定要注意命名构造函数时首字母大写，并且永远使用new来调用它。

JS 的 new 到底是干什么的

1. 什么是 JS 原型链？

我们知道 JS 有对象，比如

var obj = { name: "obj" };

我们通过控制台把 obj 打印出来：

我们会发现 obj 已经有几个属性了。那么问题来了：valueOf / toString / constructor 是怎么来？我们并没有给 obj.valueOf 赋值呀。

上面这个图有点难懂，我手画一个示意图：

我们发现控制台打出来的结果是：

obj 本身有一个属性 name
obj 还有一个属性叫做proto
obj 还有一个属性，包括 valueOf, toString, constructor 等
obj.proto其实也有一个叫做proto的属性(console.log 没有显示)，值为 null

现在回到我们的问题：obj 为什么会拥有 valueOf / toString / constructor 这几个属性？

答案：这跟proto有关。

当我们「读取」 obj.toString 时，JS 引擎会做下面的事情：

看看 obj 对象本身有没有 toString 属性。没有就走到下一步。
看看 obj.proto对象有没有 toString 属性，发现 obj.proto有 toString 属性，于是找到了，所以 obj.toString 实际就是第 2 步中找到的 obj.proto.toString。
如果 obj.proto没有，那么浏览器会继续查看 obj.proto.proto
如果 obj.proto.proto也没有，那么浏览器会继续查看 obj.proto.proto.proto
直到找到 toString 或者proto为 null。

上面的过程，就是「读」属性的「搜索过程」。而这个「搜索过程」，是连着由proto组成的链子一直走的。这个链子，就叫做「原型链」。

那么，有类了就一定存在着继承，而js的继承跟传统的类继承模型不同，它是使用 prototype 原型模型。这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是实现 js中的原型继承则要困难的多。JavaScript 使用原型链的继承方式。我们来看下这个例子。

复制代码

共享原型链

现在我们还有另一个对象

var obj2 = { name: "obj2" };

那么 obj.toString 和 obj2.toString 其实是同一东西，也就是 obj2.proto.toString。

说白了，我们改其中的一个proto.toString ，那么另外一个其实也会变!

复制代码

function Person(name, gender) {

差异化

如果我们想让 obj.toString 和 obj2.toString 的行为不同怎么做呢？直接赋值就好了：

obj.toString = function() { return "新的 toString 方法";};

[读]属性时会沿着原型链搜索
[新增]属性时不会去看原型链

function Foo() {

this.name = name;

2. this 的值到底是什么

你可能遇到过这样的 JS 面试题：

var obj = { foo: function() { console.log; }};var bar = obj.foo;obj.foo(); // 打印出的 this 是 objbar(); // 打印出的 this 是 window

请解释最后两行函数的值为什么不一样。

this.value = 42;

this.gender = gender;

函数调用

JS里面有三种函数调用形式：

func;obj.child.method;func.call(context, p1, p2); // 先不讲 apply

一般，初学者都知道前两种形式，而且认为前两种形式「优于」第三种形式。我们方方老师大姥说了，你一定要记住，第三种调用形式，才是正常调用形式：

func.call(context, p1, p2);

其他两种都是语法糖，可以等价地变为 call 形式：

func等价于 func.call(undefined, p1, p2);

obj.child.method 等价于 obj.child.method.call(obj.child, p1, p2);

至此我们的函数调用只有一种形式：

func.call(context, p1, p2);

这样，this 就好解释了this 就是上面 context。

this 是你 call 一个函数时传的 context，由于你从来不用 call 形式的函数调用，所以你一直不知道。

先看 func 中的 this 如何确定：

当你写下面代码时;function func() { console.log;}func();等价于;function func() { console.log;}func.call(undefined); // 可以简写为 func.call()

按理说打印出来的 this 应该就是 undefined 了吧，但是浏览器里有一条规则：

如果你传的 context 就 null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）

因此上面的打印结果是 window。如果你希望这里的 this 不是 window，很简单：

func.call; // 那么里面的 this 就是 obj 对象了

var obj = { foo: function() { console.log; }};var bar = obj.foo;obj.foo(); // 转换为 obj.foo.call，this 就是 objbar();// 转换为 bar.call()// 由于没有传 context// 所以 this 就是 undefined// 最后浏览器给你一个默认的 this —— window 对象

}

　　 this.say = function() {

[ ] 语法

function fn() { console.log;}var arr = [fn, fn2];arr[0](); // 这里面的 this 又是什么呢？

我们可以把 arr0想象为 arr.0，虽然后者的语法错了，但是形式与转换代码里的 obj.child.method 对应上了，于是就可以愉快的转换了：

arr[0]();

假想为 arr.0()然后转换为 arr.0.call那么里面的 this 就是 arr 了 :)

this 就是你 call 一个函数时，传入的第一个参数。
如果你的函数调用不是 call 形式，请将其转换为 call 形式

码部署后可能存在的 BUG 没法实时知道，事后为了解决这些 BUG，花了大量的时间进行 log 调试，这边顺便给大家推荐一个好用的 BUG 监控工具Fundebug。

Foo.prototype = {

　　　　console.log("Hello");

3. JS 的 new 到底是干什么的？

我们声明一个士兵，具有如下属性：

var 士兵 = { ID: 1, // 用于区分每个士兵兵种: "美国大兵", 攻击力: 5, 生命值: 42, 行走: function() { /*走俩步的代码*/ }, 奔跑: function() { /*狂奔的代码*/ }, 死亡: function() { /*Go die*/ }, 攻击: function() { /*糊他熊脸*/ }, 防御: function() { /*护脸*/ }};

我们制造一个士兵，只需要这样：

兵营.制造;

如果需要制造 100 个士兵怎么办呢？

循环 100 次吧：var 士兵们 = []var 士兵for(var i=0; i<100; i ){ 士兵 = { ID: i, // ID 不能重复兵种:"美国大兵", 攻击力:5, 生命值:42, 行走:function(){ /*走俩步的代码*/}，奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 士兵们.push}兵营.批量制造

method: function() {}

　　}

质疑

上面的代码存在一个问题：浪费了很多内存

行走、奔跑、死亡、攻击、防御这五个动作对于每个士兵其实是一样的，只需要各自引用同一个函数就可以了，没必要重复创建 100 个行走、100 个奔跑……
这些士兵的兵种和攻击力都是一样的，没必要创建 100 次。
只有 ID 和生命值需要创建 100 次，因为每个士兵有自己的 ID 和生命值。

};

}

改进

通过第一节可以知道，我们可以通过原型链来解决重复创建的问题：我们先创建一个「士兵原型」，然后让「士兵」的proto指向「士兵原型」。

var 士兵原型 = { 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}，奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ }}var 士兵们 = []var 士兵for(var i=0; i<100; i ){ 士兵 = { ID: i, // ID 不能重复生命值:42 } /*实际工作中不要这样写，因为 __proto__ 不是标准属性*/ 士兵.__proto__ = 士兵原型士兵们.push}兵营.批量制造

优雅？

有人指出创建一个士兵的代码分散在两个地方很不优雅，于是我们用一个函数把这两部分联系起来：

function 士兵{ var 临时对象 = {}; 临时对象.__proto__ = 士兵.原型; 临时对象.ID = ID; 临时对象.生命值 = 42; return 临时对象;}士兵.原型 = { 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}，奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ }}// 保存为文件：士兵.js 然后就可以愉快地引用「士兵」来创建士兵了：var 士兵们 = []for(var i=0; i<100; i ){ 士兵们.push}兵营.批量制造

JS 之父看到大家都这么搞，觉得何必呢，我给你们个糖吃，于是 JS 之父创建了 new 关键字，可以让我们少写几行代码：

只要你在士兵前面使用 new 关键字，那么可以少做四件事情：

不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
不用绑定原型，因为 new 会帮你做(new 为了知道原型在哪，所以指定原型的名字 prototype);
不用 return 临时对象，因为 new 会帮你做；
不要给原型想名字了，因为 new 指定名字为 prototype。

function Bar() {}

var person1 = new Person("Mike", "male");

这一次用 new 来写

function 士兵{ this.ID = ID this.生命值 = 42}士兵.prototype = { 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ }}// 保存为文件：士兵.js然后是创建士兵（加了一个 new 关键字）：var 士兵们 = []for(var i=0; i<100; i ){ 士兵们.push)}兵营.批量制造

new 的作用，就是省那么几行代码。（也就是所谓的语法糖）

var person2 = new Person("Kate", "female");

注意 constructor 属性

new 操作为了记录「临时对象是由哪个函数创建的」，所以预先给「士兵.prototype」加了一个 constructor 属性：

士兵.prototype = { constructor: 士兵};

如果你重新对「士兵.prototype」赋值，那么这个 constructor 属性就没了，所以你应该这么写：

士兵.prototype.兵种 = "美国大兵";士兵.prototype.攻击力 = 5;士兵.prototype.行走 = function() { /*走俩步的代码*/};士兵.prototype.奔跑 = function() { /*狂奔的代码*/};士兵.prototype.死亡 = function() { /*Go die*/};士兵.prototype.攻击 = function() { /*糊他熊脸*/};士兵.prototype.防御 = function() { /*护脸*/};

或者你也可以自己给 constructor 重新赋值：

士兵.prototype = { constructor: 士兵, 兵种: "美国大兵", 攻击力: 5, 行走: function() { /*走俩步的代码*/ }, 奔跑: function() { /*狂奔的代码*/ }, 死亡: function() { /*Go die*/ }, 攻击: function() { /*糊他熊脸*/ }, 防御: function() { /*护脸*/ }};

// 设置Bar的prototype属性为Foo的实例对象

复制代码

四、继承

继承的本质就是上面的讲的原型链

Bar.prototype = new Foo();

这段代码就定义了一个构造函数Person, 并且给它添加了name和gender属性以及say方法。通过调用new操作符来创建了两个Person的实例person1和person2.可以通过代码来验证一下：

1)借助构造函数实现继承

function Parent1() { this.name = "parent1";}Parent1.prototype.say = function() {};function Child1() { Parent1.call; this.type = "child";}console.log(new Child1;

这个主要是借用 call 来改变 this 的指向，通过 call 调用 Parent ，此时 Parent 中的 this 是指 Child1。有个缺点，从打印结果看出 Child1 并没有 say 方法，所以这种只能继承父类的实例属性和方法，不能继承原型属性/方法。

Bar.prototype.foo = 'Hello World';

2)借助原型链实现继承

/** * 借助原型链实现继承 */function Parent2() { this.name = "parent2"; this.play = [1, 2, 3];}function Child2() { this.type = "child2";}Child2.prototype = new Parent2();console.log(new Child2;var s1 = new Child2();var s2 = new Child2();

通过一讲的，我们知道要共享莫些属性，需要对象.proto= 父亲对象的.prototype,但实际上我们是不能直接操作proto，这时我们可以借用 new 来做，所以Child2.prototype = new Parent2(); <=> Child2.prototype.proto= Parent2.prototype; 这样我们借助 new 这个语法糖，就可以实现原型链继承。但这里有个总是，如打印结果，我们给 s1.play 新增一个值，s2 也跟着改了。所以这个是原型链继承的缺点，原因是 s1.pro和 s2.pro指向同一个地址即父类的 prototype。

person1 instanceof Person; //true;

3)组合方式实现继承

/** * 组合方式 */function Parent3() { this.name = "parent3"; this.play = [1, 2, 3];}Parent3.prototype.say = function() {};function Child3() { Parent3.call; this.type = "child3";}Child3.prototype = new Parent3();var s3 = new Child3();var s4 = new Child3();s3.play.push;console.log(new Child3;console.log(s3.play, s4.play);

将 1 和 2 两种方式组合起来，就可以解决 1 和 2 存在问题，这种方式为组合继承。这种方式有点缺点就是我实例一个对象的时，父类 new 了两次，一次是 var s3 = new Child3()对应 Child3.prototype = new Parent3()还要 new 一次。

// 修正Bar.prototype.constructor为Bar本身

person2 instanceof Person; //true;

4)组合继承的优化 1

这边主要为 Child4.prototype = Parent4.prototype，因为我们通过构造函数就可以拿到所有属性和实例的方法，那么现在我想继承父类的原型对象，所以你直接赋值给我就行，不用在去 new 一次父类。其实这种方法还是有问题的，如果我在控制台打印以下两句:

从打印可以看出，此时我是没有办法区分一个对象是直接由它的子类实例化还是父类呢？我们还有一个方法判断来判断对象是否是类的实例，那就是用 constructor,我在控制台打印以下内容：

咦，你会发现它指向的是父类，这显然不是我们想要的结果，上面讲过我们 prototype 里面有一个 constructor, 而我们此时子类的 prototype 指向是父类的 prototye ,而父类 prototype 里面的 contructor 当然是父类自己的，这个就是产生该问题的原因。

Bar.prototype.constructor = Bar;

并且person1和person2都分别具有了name，gender属性，并且都被附上了构造对象时传入的值。同时它们也都具有say方法。

组合继承的优化 2

/** * 组合继承的优化2 */function Parent5() { this.name = "parent4"; this.play = [1, 2, 3];}Parent5.prototype.say = function() {};function Child5() { Parent5.call; this.type = "child4";}Child5.prototype = Object.create(Parent5.prototype);

这里主要使用Object.create()，它的作用是将对象继承到proto属性上。举个例子：

var test = Object.create({ x: 123, y: 345 });console.log; //{}console.log; //123console.log(test.__proto__.x); //3console.log(test.__proto__.x === test.x); //true

那大家可能说这样解决了吗，其实没有解决,因为这时 Child5.prototype 还是没有自己的 constructor,它要找的话还是向自己的原型对象上找最后还是找到 Parent5.prototype, constructor 还是 Parent5 ,所以要给 Child5.prototype 写自己的 constructor:

Child5.prototype = Object.create(Parent5.prototype);Child5.prototype.constructor = Child5;

参考

什么是 JS 原型链？
this 的值到底是什么？一次说清楚
JS 的 new 到底是干什么的？

var bar= new Bar() // 创建Bar的一个新实例

不过通过比较可以看出来，虽然这时person1和person2都具有say方法，但它们其实并不是同一个Function的实例，也就是说当使用new来创建构造函数的实例时，每个方法都在实例上重新被创建了一遍：

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。自从2016年双十一正式上线，Fundebug累计处理了10亿错误事件，付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用！

// 原型链

person1.say == person2.say; //false

test [Bar的实例]

这样的重复创建Function是没有必要的，甚至在实例变多的时候造成一种浪费。为此，我们可以使用构造函数的prototype属性来解决问题。prototype原型对象是用来寻访继承特征的地方，添加到prototype对象中的属性和方法都会被构造函数创建的实例继承，这时实例中的方法就都是指向原型对象中Function的引用了：

Bar.prototype [Foo的实例]

{ foo: 'Hello World' }

复制代码

Foo.prototype

function Person(name, gender) {

{method: ...};

this.name = name;

Object.prototype

this.gender = gender;

{toString: ... /* etc. */};

}

复制代码

　　上面的例子中，test 对象从 Bar.prototype 和 Foo.prototype 继承下来；因此，它能访问 Foo 的原型方法 method。同时，它也能够访问那个定义在原型上的 Foo 实例属性 value。需要注意的是 new Bar() 不会创造出一个新的 Foo 实例，而是重复使用它原型上的那个实例；因此，所有的 Bar 实例都会共享相同的 value 属性。

Person.prototype.say = function() {

console.log("Hello");

　　这里我觉得有必要来说一下原型、原型链和实例之间的关系。JavaScript中，每个函数都有一个prototype属性，这是一个指针，指向了这个函数的原型对象。这个对象包含这个函数创建的实例的共享属性和方法。也就是说原型对象中的属性和方法是所有实例共享。而这个原型对象有一个constructor属性，指向了该构造函数。每个通过该构造函数创建的对象都包含一个指向原型对象的内部指针__proto__。原型链作为实现继承的主要方法，其基本思想是：让原型对象等于另一个类型的实例，这样原型对象将包含一个指向另一个原型的指针，相应的，另一个原型中也包含着一个指向另一个构造函数的指针，假如另一个原型又是另一个类型的实例，如此层层递进，就构成了实例与原型的链条，这个链条就称之为原型链.

}

回到主题上，但我们使用new Foo()创造出一个示例这过程中它做了写什么事呢？

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

var person1 = new Person("Mike", "male");

2、属性和方法被加入到 this 引用的对象中。

var person2 = new Person("Kate", "female");

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var foo = {};

person1.say == person2.say //true

foo.__proto__ = Object.prototype;

复制代码

Object.call(foo);

　　同理，当我们new Bar()的时候，也是创建了一个空对象，并且 this 变量引用该对象，同时，Bar.prototype = new Foo();然后bar.__proto__ = Foo.prototype,最后，由Foo.call(bar)隐式的返回了this; 其中，Bar.prototype = new Foo()会使得Bar.prototype.constructor == Foo,所以这里我们要使用Bar.prototype.constructor = Bar;把Bar自身的构造函数修正过来。

prototype, constructor, 和__proto__

　　到这里我们可以发现，JavaScript中的new操作与其说是新建了一个示例，更不如说做是由一个工厂模式产生出来一个实例。

我们再来看个例子，这个是汤姆大叔博客中的例子。

构造函数，原型对象，实例的关系是：JavaScript中，每个函数都有一个prototype属性，这是一个指针，指向了这个函数的原型对象。而这个原型对象有一个constructor属性，指向了该构造函数。每个通过该构造函数创建的对象都包含一个指向原型对象的内部指针__proto__。

复制代码

function A() {}

A.prototype.x = 10;

用代码表示它们的关系：

var a = new A();

alert(a.x); // 10 – 从原型上得到

Person.prototype.constructor === Person;

person1.__proto__ === Person.prototype;

// 设置.prototype属性为新对象

person2.__proto__ === Person.prototype;

// 为什么显式声明.constructor属性将在下面说明

A.prototype = {

constructor: A,

继承的实现

y: 100

};

JavaScript中使用原型链作为实现继承的主要方法。由于对象实例拥有一个指向原型对象的指针，而当这个原型对象又等于另一个类型的实例时，它也具有这个指向另一类型原型对象的指针。因此通过指向原型对象的指针__proto__就可以层层递进的找到原型对象，这就是原型链。通过原型链来完成继承：

var b = new A();

function Teacher(title) {

// 对象"b"有了新属性

this.title = title;

alert(b.x); // undefined

}

alert(b.y); // 100 – 从原型上得到

Teacher.prototype = new Person();

// 但a对象的原型依然可以得到原来的结果

var teacher = new Teacher("professor");

alert(a.x); // 10 - 从原型上得到

这时，我们通过将Teacher的prototype原型对象指向Person的实例来完成了Teacher对Person的继承。可以看到Teacher的实例teacher具有了Person的属性和方法。

function B() {

但是如果只是将构造函数的prototype原型对象指向另一对象实例，发生的事情其实可以归纳为：

this.x = 10;

return new Array();

}

Teacher.prototype instanceof Person //true

// 如果"B"构造函数没有返回（或返回this）

Teacher.prototype.constructor == Person //true

// 那么this对象就可以使用，但是下面的情况返回的是array

Teacher.prototype.__proto__ === Person.prototype //true

var b = new B();

问题出现了：这时Teacher的构造函数变成了Person。虽然我们在使用创建的实例的属性和方法的时候constructor的类型并不会产生很大的影响，但是这依然是一个很不合理的地方。因此一般在使用原型链实现继承时，在将prototype指向另一个构造函数的实例之后需要再将当前构造函数的constructor改回来：

alert(b.x); // undefined

alert(Object.prototype.toString.call(b)); // [object Array]

Teacher.prototype = new Person();

复制代码

Teacher.prototype.constructor = Teacher;

这里有两个主要特点：

这样才是真正的实现了原型链继承并且不改变当前构造函数和原型对象的关系：

首先，新创建对象的原型是从当前时刻函数的prototype属性获取的（这意味着同一个构造函数创建的两个创建对象的原型可以不同是因为函数的prototype属性也可以不同）。

其次，正如我们上面提到的，如果在对象初始化的时候，[[Call]]返回的是对象，这恰恰是用于整个new操作符的结果

到这里，我们就可以将这个继承过程封装成一个extend方法来专门完成继承的工作了：

中同样如此，但是它又有一些不同。为了说清楚这个问题我们先来看一下...

var extend = function(Child, Parent) {

Child.prototype = new Parent();

Child.prototype.constructor = Child;

return new Child();

};

现在这个方法接受两个参数：Child和Parent，并且在完成继承之后实例化一个Child对象并返回。我们当然可以根据需要来继续丰富这个函数，包括实例化的时候需要传入的参数什么的。

...

本文由pc28.am发布于前端技术,转载请注明出处：继续原理，到底是怎么的

上一篇：提供传统平台的替代品，Google之类公司的代码质下一篇：没有了