行为委托

看起来,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属性肯定是定义在自身上面的,关于这点,分析一下即可。

END

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 特别说明,为便于查阅,文章转自https://github.com/getify/You-Dont-Know-JS...
    杀破狼real阅读 328评论 0 1
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 1,805评论 0 11
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,253评论 19 139
  • js API1.全局对象NAN 非数字值的特殊值infinity 代表正无穷的数据undefined 2.函数属性...
    Aa刘德健阅读 1,666评论 0 2
  • 这个场景中我们将讲解两个控制器对象,一个用来处理网页的登录form(表单),另一个实际处理服务器的认证(通信) 根...
    yanghanbin_it阅读 510评论 0 0