JavaScript中call和apply的用法: 两者的主要作用就是改变上下文的this指针指向的对象,语法如下, 一、方法定义 1、call 方法 语法:sourceObj.call([destObj[, arg1[, arg2[, [, argN]]]]]) 参数: destObj 可选项,原对象(sourceObj)要用作的目标对象(destObj);arg1, arg2…argN 可选项,要传递给方法的可变参数序列。 说明 call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 destObj 指定的新对象。如果没有提供 destObj 参数,那么 Global 对象被用作destObj 。其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。 2、apply方法 语法:sourceObj.apply([destObj [, argArray]]) 参数: destObj 可选项,原对象(sourceObj)要用作的目标对象(destObj);argArray 可选项,要传递给方法的参数集合。 说明: 如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 destObj 任何一个参数,那么 Global 对象将被用作 destObj , 并且不传递任何参数。 二、用法举栗:
// 函数 function sCall(a, b) { return a + b; } function dCall(a, b) { return a - b; } var result = sCall.call(dCall, 2, 3); console.log(result); // 5 // 用 sCall 来替换 dCall,sCall.call(dCall, 2, 3) <==> sCall(2, 3) ,运行结果为:5; // 注意:js 中的函数其实是对象,函数名是对 function 对象的引用。 // 以下对象在对象方法、继承、多重继承中都用到 var sourceCall = function (name) { this.name = name; this.showName = function (age) { console.log(this.name + age); } } // 对象方法 var destCall = function (name) { this.name = name; } var source = new sourceCall("LiLei"); var dest = new destCall("HanMeimei"); // call需要是函数、或对象(含有上下文的实体)调用 source.showName.call(dest, 18); // HanMeimei18 // call 把 sourceCall 的方法放到 destCall 上执行;本来 destCall 没有 showName() 方法, // 但是把sourceCall 的showName()方法放到 destCall 上执行,所以 this.name 应该是 destCall , // 运行结果为:HanMeimei18; // 继承 var inheritCall = function (name) { sourceCall.call(this, name); } new inheritCall("Polly").showName(6); // Polly6 // call 使 inheritCall 继承了 sourceCall , // sourceCall.call(this, name) 是使用 sourceCall 对象代替this 对象, // 那么 inheritCall 中就有了 sourceCall 的所有属性和方法, // 于是 inheritCall 就能直接调用 sourceCall 的属性和方法了, // 运行结果为:Polly6; // 多重继承 var birdCall = function () { this.showSpecial = function (spe) { console.log(this.name + spe); // 此处的 this.name 使用的是继承的其他对象中的属性 } } var multInherit = function (name) { sourceCall.call(this, name); birdCall.call(this); } var polly = new multInherit("Polly"); polly.showName(8); // Polly8 polly.showSpecial(" can fly"); // Polly can fly // sourceCall.call(this, name) 使 multInherit 中有了 sourceCall 的所有属性和方法 // birdCall.call(this) 使 multInherit 中有了 sourceCall 的所有属性和方法 // 运行结果为:Polly8 和 Polly can fly三、区别: call 和 apply 实现的功能是完全一样的,只是参数传递方式不一样,call 是将各个参数以逗号(,)分隔开,而apply是将所有参数组成一个集合进行传递。
四、 bind() 函数: call 和 apply 是立马就调用了对应的函数,而 bind 会返回一个新的函数在需要调用的时候再调用;bind 函数的参数跟 call 一致,第一个参数也是绑定 this 的值,后面接受传递给函数的不定参数。 举个栗子:
// call,apply,bind 用法区别 var obj = { x : 1 }; function foo(y) { console.log(this.x + y); } foo.call(obj, 2); // 3 foo.apply(obj, [2]); // 3 // bind 返回一个函数,在需要的时候再调用 var foo1 = foo.bind(obj, 2); foo1(); // 3 foo1(5); // 3 // 由于在 bind 时指定了要给函数传递的参数,所以 foo1(5) 中的5不起作用 // 在 bind 时只指定要绑定到的对象,不指定要给函数传递的参数 var foo2 = foo.bind(obj); // 此时 foo2(5) 中的5就是要给函数传递的参数 foo2(5); // 6结束语: 不负光阴不负己!每天都是全力以赴的一天!