ZhangYang's Blog

JavaScript的new

发表于 | 分类于

制造一个程序员

1
2
3
4
5
6
7
8
9
10
var 程序员 = {
  ID: 1, // 用于区分每个程序员
  程序员类型:"前端",
  技能: JavaScript,
  年龄: 18, 
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    }
}
清华.制造(程序员)

制造一百个程序员

循环100次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var 程序员们 = []
var 程序员
for(var i=0; i<100; i++){
    var 程序员 = {
      ID: 1, // 用于区分每个程序员
      程序员类型:"前端",
      技能: JavaScript,
      年龄: 18, 
      行走:function(){ /*走俩步的代码*/},
      奔跑:function(){ /*狂奔的代码*/  },
      死亡:function(){ /*Go die*/    }
    }
  程序员们.push(程序员)
}
清华.批量制造(程序员们)

改进

创建一个「程序员原型」，然后让「程序员」的 proto 指向「程序员原型」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var 程序员原型 = {
  程序员类型:"前端",
  技能: JavaScript,
  年龄: 18, 
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    }
}
var 程序员们 = []
var 程序员
for(var i=0; i<100; i++){
  程序员 = {
    ID: i, // ID 不能重复
  }
  程序员.__proto__ = 程序员原型 
  程序员们.push(程序员)
}
清华.批量制造(程序员们)

优雅

创建一个程序员的代码分散在两个地方很不优雅，用一个函数把这两部分联系起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function 程序员(ID){
  var 临时对象 = {}
  临时对象.__proto__ = 程序员.原型
  临时对象.ID = ID
  return 临时对象
}
程序员.原型 = {
  程序员类型:"前端",
  技能: JavaScript,
  年龄: 18, 
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    }
}
// 保存为文件：程序员.js
引用「程序员」来创建程序员
var 程序员们 = []
for(var i=0; i<100; i++){
  程序员们.push(程序员(i))
}
清华.批量制造(程序员们)

new的作用

在程序员前面使用new关键字，少做三件事情

  • 不用创建临时对象，因为 new 会帮你做
  • 不用绑定原型，因为 new 会帮你做
  • 不用 return 临时对象，因为 new 会帮你做

new的改进

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function 程序员(ID){
  this.ID = ID
}
程序员.prototype = {
  程序员类型:"前端",
  技能: JavaScript,
  年龄: 18, 
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    }
}
// 保存为文件：程序员.js
然后是创建程序员（加了一个 new 关键字）
var 程序员们 = []
for(var i=0; i<100; i++){
  程序员们.push(new 程序员(i))
}
程序员.批量制造(程序员们)

constructor属性

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

1
2
3
程序员.prototype = {
  constructor: 程序员
}

重新对「士兵.prototype」赋值，那么这个 constructor 属性,所以应该这么写

1
2
3
4
5
6
程序员.prototype.程序员类型 = "前端"
程序员.prototype.技能 = "JavaScript"
程序员.prototype.年龄 = 18
程序员.prototype.行走 = function(){ /*走俩步的代码*/}
程序员.prototype.奔跑 = function(){ /*狂奔的代码*/  }
程序员.prototype.死亡 = function(){ /*Go die*/    }

给 constructor 重新赋值

1
2
3
4
5
6
7
8
9
程序员.prototype = {
  constructor: 程序员,
  程序员类型:"前端",
  技能: JavaScript,
  年龄: 18, 
  行走:function(){ /*走俩步的代码*/},
  奔跑:function(){ /*狂奔的代码*/  },
  死亡:function(){ /*Go die*/    }
}