理解JavaScript原型

一、看图写代码

屏幕快照 2017-08-01 下午9.00.53.png

var person_prototype = {name:'那个谁', run: function(){ console.log('能跑') }, walk: function(){ console.log('能走') }}
person1 = {}
person2 = {}
person1.__proto__ = person_prototype
person2.__proto__ = person_prototype
person1.name   // 那个谁
person2.run()  //能跑

通过将一声公有属性赋值给person1和person2的prototye上，使这两个对象有了默认的属性。

屏幕快照 2017-08-01 下午9.19.03.png

如果有三层呢，第一层person1,person2私有，第二层是亚洲人共有的属性（兄弟级有欧洲人），最下面是人类共有的属性，代码怎么写？

var person_prototype = {name:'那个谁', run: function(){ console.log('能跑') }, walk: function(){ console.log('能走') }}   //全人类的公有属性
var asian_prototype = { skin:'黄色', hair:'黑色' }  //亚洲人的公有属性
asian_prototype.__proto__  = person_prototype  //将人类的的公有属性赋给亚洲人公有属性的原型上
var person1 = {}
var person2 = {}
person1.__proto__ = asian_prototype
person2.__proto__ = asian_prototype
person1.name // '那个谁' 会先搜索第一层原型，如果没有再搜索第二层原型，不断向下

person1返回结果如下：

屏幕快照 2017-08-01 下午9.37.13.png

二、原型链

许多JS类型都有各自的原型：

• 所有的对象都有toString() valueOf() constructor hasOwnProperty()
• 所有的数组都有push() pop() shift() unshift() join() slice() splice()
• 所有的数组都有对象的所有方法，因为数组就是对象的一种
• var a = [] 那么a具有所有数组的公有属性，也具有所有对象的公有属性
• a[0] = 'yyy' 这样就添加了私有属性，是数组a私有的

原型链的树型结构.png

这篇文章很有价值：什么是JS原型链

屏幕快照 2017-08-01 下午10.28.28.png

向下找它的原型一定会找到null

三、Object.create()

• Object.create() 这是创造原型的方法，为什么不直接用proto？因为这个属性还没有纳入规范

var human = {run:function(){ console.log('能跑') }, walk:function(){ console.log('能走') }}
var asian = Object.create(human) //将human变量作为原型添加给asian
asian.skin = 'yellow'  // 私有属性
asian.hair = 'black'    // 私有属性
var person1 = Object.create(asian)  //将asian对象作为原型给person1
person1.name = '小明'  //添加私有属性

结果如下：

屏幕快照 2017-08-01 下午11.02.08.png

四、原型的使用：一个小游戏

var soldierList = []

for(var i=0; i<100; i++){
  var soldierProto = {
    attack: function(){ console.log('打他') },
    die: function(){ console.log('挂了') },
    walk: function(){ console.log('能走') }
  }
  var soldier = Object.create(soldierProto)
  soldier.life = (Math.random()+1)*100
  soldierList.push(soldier)  
}

factory.create(soldierList)

构造函数啊。。。。要看啊。。。。