dojo.mixin、dojo.extend、dojo.delegate解析

前端之家收集整理的这篇文章主要介绍了dojo.mixin、dojo.extend、dojo.delegate解析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

dojo.mixin

dojo.mixin函数签名为:function(/*Object*/obj,/*Object...*/props){;其中obj为目标对象,props为源对象,可以传入多个,该方法用于将其它对象中的属性(也包括函数属性)混入至目标对象,然后返回目标对象,如果混入源对象与目标对象同时存在某个属性时,则源对象属性会覆盖目标对象属性,但是并不会修改目标对象的prototype。


  1. <script type="text/javascript">
  2. var a = {
  3. name : "zhangsan",address : "地球"
  4. };
  5. var b = {
  6. age : 18
  7. };
  8. var c = {
  9. address : "中国"
  10. };
  11. //将b、c对象中的属性混入目标对象a
  12. var mixed = dojo.mixin(a,b,c);
  13. //输出为 Object { name="zhangsan",address="中国",age=18}
  14. //可以看到已包含三个属性,并且目标对象a的address属性被源对象c的相对属性覆盖了
  15. console.info(mixed);
  16. //结果为true,因为混入后目标对象被返回了,只是往目标对象中添加属性,但是目标对象地址并没有发生改变
  17. console.info(mixed==a);
  18. </script>

下面我们看一下dojo中的源码:

  1. dojo.mixin = function(/*Object*/obj,/*Object...*/props){
  2. if(!obj){ obj = {}; } //如果obj目标对象不存在,则赋予一个空对象,防止异常
  3. for(var i=1,l=arguments.length; i<l; i++){ //遍历混入源对象,注意索引从1开始,因为需要排除obj目标对象
  4. d._mixin(obj,arguments[i]);//调用真正实现混入的_mixin函数
  5. }
  6. //返回原来的目标对象
  7. return obj; // Object
  8. }
  9.  
  10. var extraNames,extraLen,empty = {};
  11. //如果toString(覆盖从Object继承的toString)不能在for..in循环中遍历到,则extraNames为undefined,如果能则赋值为空列表
  12. for(var i in {toString: 1}){ extraNames = []; break; }
  13. //如果extraNames存在则dojo._extraNames会等于extraNames,即是一个空列表
  14. //如果extraNames为undefined,则dojo._extraNames为["hasOwnProperty","valueOf","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","constructor"]
  15. dojo._extraNames = extraNames = extraNames || ["hasOwnProperty","constructor"];
  16. extraLen = extraNames.length;//获取长度
  17.  
  18. dojo._mixin = function(/*Object*/ target,/*Object*/ source){
  19. var name,s,i;
  20. //遍历源对象中的属性
  21. for(name in source){
  22. //在混入的时候需要排除从Object继承而来的属性,除非源对象重新定义了从Object继承而来的属性
  23. s = source[name];//取出属性
  24. //成立条件有:
  25. //1. 目标对象中不存在源对象中的某个属性
  26. //2. 目标对象与源对象属性值不相等并且 (该属性不是从Object继承而来或者源对象重新定义了从Object继承而来的属性)
  27. if(!(name in target) || (target[name] !== s && (!(name in empty) || empty[name] !== s))){
  28. //将源对象属性值赋给目标对象
  29. target[name] = s;
  30. }
  31. }
  32. // IE doesn't recognize some custom functions in for..in 有些版本的IE对于重新定义从Object继承来而的属性不能识别,所以需要重新判断一次
  33. if(extraLen && source){
  34. for(i = 0; i < extraLen; ++i){
  35. name = extraNames[i];
  36. s = source[name];
  37. if(!(name in target) || (target[name] !== s && (!(name in empty) || empty[name] !== s))){
  38. target[name] = s;
  39. }
  40. }
  41. }
  42. //返回目标对象
  43. return target; // Object
  44. }

dojo.extend

dojo.extend函数签名为:function(/*Object*/ constructor,/*Object...*/ props); 接受一个构造函数和多个源对象。如果第一个参数不是一个构造函数,确切点说是不包含一个prototype属性。该函数用于将多个源对象中的属性混入到一个构造函数的prototype属性当中,最返回这个构造函数。该函数就是基于dojo.mixin实现的,一看源码便知:

  1. dojo.extend = function(/*Object*/ constructor,/*Object...*/ props){
  2. // summary:
  3. // Adds all properties and methods of props to constructor's
  4. // prototype,making them available to all instances created with
  5. // constructor.
  6. for(var i=1,l=arguments.length; i<l; i++){
  7. d._mixin(constructor.prototype,arguments[i]);
  8. }
  9. return constructor; // Object
  10. };

因为混入的目标对象是构造函数的prototype属性,所以通过该构造函数创建(new)出来的对象会包含所有源对象中的属性

由上可知,mixin适用于一次性混入,而extend适用于永久性混入(因为改为了prototype)

dojo.delegate

函数调用后返回一个新对象,并且会对这个新对象的[[prototype]]属性混入新的属性,源码如下:
  1. dojo.delegate = dojo._delegate = (function(){
  2. //临时构造函数
  3. function TMP(){}
  4. //返回一个匿名函数,该函数其实就是dojo.delegate函数
  5. return function(obj,props){
  6. TMP.prototype = obj;
  7. var tmp = new TMP();
  8. //虽然TMP.prototype重新置为null,但是tmp对象已经创建出来了,其[[prototype]]属性已经指向了obj,
  9. //所以通过tmp对象可以访问到obj对象中的属性
  10. TMP.prototype = null;
  11. //如果props存在,则将props混入tmp对象中,所以tmp对象中就有了props对象的所有属性
  12. if(props){
  13. d._mixin(tmp,props);
  14. }
  15. return tmp; // 返回tmp对象
  16. };
  17. })();//立即执行

由上可知,dojo.delegate与dojo_delegate是一样的,指向了同一个函数对象。js中,每一个对象创建出来都会有一个[[prototype]]属性,也就是创建这个对象的构造函数的prototype属性,在FireFox中[[prototype]]属性可以通过__proto__来访问,请看下面的例子:
  1. function Foo() {
  2. this.name = "Foo";
  3. }
  4. var foo = new Foo();
  5. var de = dojo.delegate(foo,{address : "中国"});
  6. console.info(de); //Foo {address="中国",name="Foo"}
  7. //因为在delegate函数中执行了TMP.prototype = obj;
  8. console.info(de.__proto__==foo); //true

PS:dojo版本为dojo-release-1.6.3

猜你在找的Dojo相关文章