看起来,React组件中的prop很像是HTML元素的属性,不过HTML组件属性的值都死字符串类型 ,即使是内嵌JavaScript,他也必须是字符串形式。而React组件中的prop所能支持的类型则丰富的多,但是当prop的值的数据类ing不是字符串的时候,那么在JSX中必须用{}将prop值给包括起来。所以对于某些prop来说,很可能他的值是一种很怪异的形式出现,比如说对于style这个prop,他的值很可能是这样的:{{'width': '100px'}}。哈
通过前面的学习,我们可以总结一下对象属性查找的机制:如果在第一个对象上没有找到需要的属性或者方法引用,引擎就会继续在该对象的[[Prototype]]关联的那个对象上进行查找。同理,如果在后者中也还是没有找到需要的属性的话,那么将会继续在它的[[Prototype]]所关联的对象进行查找,知道找到Object.prototype为止。我们称这一系列对象的链接为“原型链”。
对象委托是一种极其强大的设计模式,它可以让我们极其自由将某个对象关联到其他对象上,从而避免了必须先要构造函数的麻烦。并且对象委托的自由度太高了,毕竟你的原型链是你自己希望有多长就可以有多长,但是必须声明的是越长的原型链对于程序的维护是越困难的。下面举一个例子:
var supercla = {
'setId': function(id){this.id = id},
'getId': function(){console.log(this.id)}
}
var child = Object.create(supercla)
child.set = function(id, label){
this.setId(id)
this.label = label
}
child.get = function(){
this.getId()
console.log(this.label)
}
var obj1 = Object.create(child)
var obj2 = Object.create(child)
obj1.set(12, 'a')
obj2.set(15, 'b')
obj1.get()//12 'a'
obj2.get()//15 'b'
需要注意的地方:对于obj1和obj2对象来说,id和label属性肯定是定义在自身上面的,关于这点,分析一下即可。
网友评论