JavaScript 使用方括号（[]）引用对象的属性和方法 createDelegate

在JavaScript中，每个对象可以看作是多个属性（方法）的集合，引用一个属性（方法）
很简单，即：
对象名.属性（方法）名
除此之外，还可以用方括号的形式来引用：
对象名[“属性（方法）名”]
注意，这里的方法名和属性名是一个字符串，而非原先点号后面的标识符

var arr=new Array();
//为数组添加一个元素
arr[“push”](“abc”);
//获得数组的长度
var len=arr[“length”];
//输出数组的长度
alert(len);

等效于

var arr=new Array();
//为数组添加一个元素
arr.push( “abc”);
//获得数组的长度
var len=arr.length;
//输出数组的长度
alert(len);

这种引用属性（方法）的方式和数组类似，也体现出一个JavaScript对象就是一组属性
（方法）的集合这个性质。
这种用法适合不确定具体要引用哪个属性（方法）的场合

function User(){
this.age=21;
this.sex="male";
}
//创建user 对象
var user=new User();
//根据下拉列表框显示用户的信息
function show(slt){
if(slt.selectedIndex!=0){
alert(user[slt.value]);     //等效于alert(eval(“user.”+slt.value));
}
}
//-->
</script>
<!--下拉列表框用于选择用户信息-->
<select onchange="show(this)">
<option>请选择需要查看的信息：</option>
<option value="age">年龄</option>
<option value="sex">性别</option>
</select>

 带参数的方法的传递

 var fun = {};
        var show = function (a) {
            alert(a);
        }
//        fun["show"] = show();   undefined
        fun["show"] = window["show"];  //有效
        fun["show"]=show;              //有效（不能加刮号)
        fun.show("aa");

 这是对象传对象。

关于调用对象的方法

当一个方法没有调用自身以外的元素时，可以直接赋值

一个方法调用本身以外的元素

属性

       var obj = {
            name: "hongda",
            fun: function () { console.trace(); Ext.Msg.alert("", this.name); },
            show: function () { console.trace(); alert(this.name); }
        }
       
        var obj2 = {};
        obj2.show = obj.show;
        obj.show();        //"hongda"
        obj2.show();      //undefined

方法：

  var obj = {
            name: "hongda",
            fun: function () { console.trace(); Ext.Msg.alert("", this.name); },
            show: function () { console.trace(); this.fun();}
        }
       
        var obj2 = {};
        obj2.show = obj.show;
        obj.show();
        console.log("obj2");
        obj2.show();

obj2.show()就是一个错误的方法.

这种引用就像C#中的值传参，下面是类似引用传参的

    var obj = {
            name: "hongda",
            fun: function () { console.trace(); Ext.Msg.alert("", this.name); },
            show: function () { console.trace(); this.fun();}
        }
       
        var obj2 = {};
        obj2.show = obj.show.createDelegate(obj);
        obj.show();
        console.log("obj2");
                obj2.show();
        

注意：虽然只弹出了一次，但这不是调用的问题，是ExtJS框架的问题，Ext.Msg.alert的操作有多个时只执行最后一个，事件也是，不晓得是不是一个bug.

 createDelegate : function(obj, args, appendArgs){
        var method = this;
        return function() {
            var callArgs = args || arguments;
            if(appendArgs === true){
                callArgs = Array.prototype.slice.call(arguments, 0);
                callArgs = callArgs.concat(args);
            }else if(typeof appendArgs == "number"){
                callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
                var applyArgs = [appendArgs, 0].concat(args); // create method call params
                Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
            }
            return method.apply(obj || window, callArgs);
        };
    },

通过createDelegate方法就可以执行类似引用传递的方法，最后还是在obj.show中执行。

看看createDelegate.

   var obj = {
            name: "hongda",
            fun: function () { console.trace(); alert( this.name); },
            show: function () { console.trace(); this.fun();}
        }

        var obj2 = {};
        console.log("apply");
        //        obj2.show = obj.show.apply(obj, null);  //这是直接调用了
        obj2.show = function () { obj.show.apply(obj, null); }   //show是一个方法，要返回一个方法。
        console.log("obj");
        obj.show();
        console.log("obj2");
                obj2.show(); 

在createDelegate源码中

appendArgs==true,添加参数(arguments数列+args)

       var obj = {
            fun: function (c,d) { console.trace(); alert(c+"|||"+d); },
            show: function (a,b) { console.trace(); this.fun(a,b);}
        }
        var obj2 = {};
//        obj2.show = obj.show.createDelegate(obj, [], true);
//        obj2.show("cc","ddddd");                                       //cc|||dddd
//        obj2.show();                            //undefined|||undefined 

//        obj2.show=obj.show.createDelegate(obj,["ee"],true);
//        obj2.show("cc","ddddd");     //cc|||ddddd
//        obj2.show();                 //ee|||undefined

//        obj2.show = obj.show.createDelegate(obj, ["aa", "bbb"], true);
//        obj2.show();                                                           //aa|||bbb
//        obj2.show("cc","ddd");                                                 //cc|||ddd

//        obj2.show = obj.show.createDelegate(obj, ["aa", "bbb", "ccc", "d"], true);
//        obj2.show();               //aa|||bbb
//        obj2.show("cc","ddd");     //cc|||ddd

  Function.prototype.delegate = function (obj, args, appendArgs) {
            var method = this;
            return function () {
                var callArgs = args || arguments;
                console.log("arguments");
                console.dir(arguments);
                console.log("callArgs");
                console.info("callArgs:" + callArgs);
                if (appendArgs === true) {
                    callArgs = Array.prototype.slice.call(arguments, 0);
                    console.info("callArgs:" + callArgs);
                    callArgs = callArgs.concat(args);
                    console.info("callArgs:" + callArgs);
                } else if (typeof appendArgs == "number") {
                    callArgs = Array.prototype.slice.call(arguments, 0); //  arguments数列
                    var applyArgs = [appendArgs, 0].concat(args); //      splice的参数，appendArgs（插入位置），0为插入，args为插入的数组
                    Array.prototype.splice.apply(callArgs, applyArgs); //  相当于 数列（arguments).splice(appendArgs,0,args);
                }

                return method.apply(obj || window, callArgs);
            };
        }
        var obj = {
            fun: function (c,d) { console.trace(); alert(c+"|||"+d); },
            show: function (a,b) { console.trace(); this.fun(a,b);}
        }
        var obj2 = {};
        obj2.show = obj.show.delegate(obj, ["aa"], true);
        obj2.show();                 //aa|||undefined                                          
        obj2.show("cc");             //cc|||aa  

type appendArgs=="number",插入参数(利用splice将args数组插入到arguments的数列中）

    var obj = {
            fun: function (c,d) { console.trace(); alert(c+"|||"+d); },
            show: function (a,b) { console.trace(); this.fun(a,b);}
        }
        var obj2 = {};
        obj2.show = obj.show.delegate(obj, ["aa","b"], 1);
        obj2.show();                                                           //aa|||b
        obj2.show("cc");                                                 //cc|||aa