JS的new做了什么？

Posted on Edited on In Views:

new 做了什么

1、创建临时对象/新对象
2、绑定原型
3、指定 this = 临时对象
4、执行构造函数
5、返回临时对象

想象我们在制作一个足球游戏，玩家可以创造球员。

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

一个球员的在计算机里就是一堆属性
位置、弹跳、速度、 生命值 奔跑(动作)、传球(动作)、突破(动作)、铲球(动作)、射门(动作)

我们只需要这样就可以制造一个球员：

1
2
3
4
5
6
7
8
9
10
11
12
var 球员 = {
  ID: 1, // 用于区分每个球员
  生命值：52，
  位置:"前锋",
  弹跳:60,
  速度:82, 
  奔跑:function(){ /*狂奔的代码*/  },
  传球:function(){ /*传球的代码*/  },
  突破:function(){ /*突破的代码*/  },
  铲球:function(){ /*铲球的代码*/  },
  射门:function(){ /*射门的代码*/ }
}

俱乐部.制造(球员)
制造二十个球员

如果需要制造 100 个球员怎么办呢？

循环 100 次吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 球员们 = []
var 球员
for(var i=0; i<100; i++){
	球员 = {
	  ID: i, //  ID 不能重复
	  生命值：52，
	  位置:"前锋",
	  弹跳:60,
	  速度:82, 
	  奔跑:function(){ /*狂奔的代码*/  },
	  传球:function(){ /*传球的代码*/  },
	  突破:function(){ /*突破的代码*/  },
	  铲球:function(){ /*铲球的代码*/  },
	  射门:function(){ /*射门的代码*/ }
	}
  球员们.push(球员)
}
俱乐部.批量制造(球员们)

质疑

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

奔跑、传球、突破、铲球、射门这五个动作对于每个球员其实是一样的，只需要各自引用同一个函数就可以了，没必要重复创建 100 个行走、100个奔跑……
只有 ID、生命值、弹跳、速度、位置需要创建 100 次，因为每个球员有自己的 ID、生命值、弹跳、速度、位置。

改进

用原型链可以解决重复创建的问题：我们先创建一个「球员原型」，然后让「球员」的 proto 指向「球员原型」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var 球员原型 = {
	  奔跑:function(){ /*狂奔的代码*/  },
	  传球:function(){ /*传球的代码*/  },
	  突破:function(){ /*突破的代码*/  },
	  铲球:function(){ /*铲球的代码*/  },
	  射门:function(){ /*射门的代码*/ }
}
var 球员们 = []
var 球员
for(var i=0; i<100; i++){
  球员 = {
      ID: i, //  ID 不能重复
	  生命值：52，
	  位置:"前锋",
	  弹跳:60,
	  速度:82, 
  }
  球员.__proto__ = 球员原型 
  球员们.push(球员)
}

俱乐部.批量制造(球员们)

优雅？

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function 球员(ID){
  var 临时对象 = {}

  临时对象.__proto__ = 球员.原型

  临时对象.ID = ID
  临时对象.生命值 = 42
  临时对象.位置 = '前锋'
  临时对象.弹跳 = 60
  临时对象.速度 = 90
  
  return 临时对象
}

球员.原型 = {
	奔跑:function(){ /*狂奔的代码*/  },
	传球:function(){ /*传球的代码*/  },
	突破:function(){ /*突破的代码*/  },
	铲球:function(){ /*铲球的代码*/  },
	射门:function(){ /*射门的代码*/ }
}

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

1
2
3
4
5
6
var 球员们 = []
for(var i=0; i<100; i++){
  球员们.push(球员(i))
}

俱乐部.批量制造(球员们)

用 new 关键字，可以让我们少写几行代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function 球员(ID){
  var 临时对象 = {}  // 1、我帮你创建临时对象

  临时对象.__proto__ = 球员.原型  // 2、我帮你绑定原型

  临时对象.ID = ID
  临时对象.生命值 = 42
  临时对象.位置 = '前锋'
  临时对象.弹跳 = 60
  临时对象.速度 = 90
  
  return 临时对象 // 3、我帮你return
}

// 4、统一叫做prototype
球员.原型 = {  
	奔跑:function(){ /*狂奔的代码*/  },
	传球:function(){ /*传球的代码*/  },
	突破:function(){ /*突破的代码*/  },
	铲球:function(){ /*铲球的代码*/  },
	射门:function(){ /*射门的代码*/ }
}

只要你在球员前面使用 new 关键字，那么可以少做四件事情：
1、不用创建临时对象，因为 new 会帮你做（你使用「this」就可以访问到临时对象）；
2、不用绑定原型，因为 new 会帮你做（new 为了知道原型在哪，所以指定原型的名字为 prototype）；
3、不用 return 临时对象，因为 new 会帮你做；
4、不要给原型想名字了，因为 new 指定名字为 prototype。

这一次我们用 new 来写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function 球员(ID){
  this.生命值 = 42
  this.ID = ID
  this.生命值 = 42
  this.位置 = "前锋"
  this.弹跳 = 60
  this.速度 = 82 
}

球员.prototype = {
	奔跑:function(){ /*狂奔的代码*/  },
	传球:function(){ /*传球的代码*/  },
	突破:function(){ /*突破的代码*/  },
	铲球:function(){ /*铲球的代码*/  },
	射门:function(){ /*射门的代码*/ }
}

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

1
2
3
4
5
6
var 球员们 = []
for(var i=0; i<100; i++){
  球员们.push(new 球员(i))
}

俱乐部.批量制造(球员们)

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

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

1
2
3
球员.prototype = {
  constructor: 球员
}

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

1
2
3
4
5
球员.prototype.奔跑 = function(){ /*狂奔的代码*/  }
球员.prototype.传球 = function(){  /*传球的代码*/ }
球员.prototype.突破 = function(){  /*突破的代码*/  }
球员.prototype.铲球 = function(){  /*铲球的代码*/  }
球员.prototype.射门 = function(){  /*射门的代码*/  }

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

1
2
3
4
5
6
7
8
球员.prototype = {
  constructor: 球员,
  奔跑:function(){ /*狂奔的代码*/  },
  传球:function(){ /*传球的代码*/ },
  突破:function(){ /*突破的代码*/  },
  铲球:function(){ /*铲球的代码*/  },
  射门:function(){ /*射门的代码*/  }
}