一褐筛、看圖寫代碼
屏幕快照 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返回結(jié)果如下:
屏幕快照 2017-08-01 下午9.37.13.png
二凉夯、原型鏈
許多JS類型都有各自的原型:
- 所有的對象都有toString() valueOf() constructor hasOwnProperty()
- 所有的數(shù)組都有push() pop() shift() unshift() join() slice() splice()
- 所有的數(shù)組都有對象的所有方法,因為數(shù)組就是對象的一種
- var a = [] 那么a具有所有數(shù)組的公有屬性蹲姐,也具有所有對象的公有屬性
- a[0] = 'yyy' 這樣就添加了私有屬性,是數(shù)組a私有的
原型鏈的樹型結(jié)構(gòu).png
這篇文章很有價值:什么是JS原型鏈
屏幕快照 2017-08-01 下午10.28.28.png
向下找它的原型一定會找到null
三扎阶、Object.create()
- Object.create() 這是創(chuàng)造原型的方法,為什么不直接用proto宰掉?因為這個屬性還沒有納入規(guī)范
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 = '小明' //添加私有屬性
結(jié)果如下:
屏幕快照 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)