js之call() apply() bind() $proxy()的总结

关于this的使用

先贴一段代码

window.name = 'window';
var obj = {
name:'I'
}
function foo(name,sex){
setTimeout(function(){
console.log(this.name+' love '+name+' cause '+name+' is a '+sex);
},100);
}
//foo('you','girl');  //window love you cause you is a girl
//foo.call(obj,'you','girl');  //window love you cause you is a girl

上述函数中this是定义在setTimeout定时器函数内部，所以this指向window，所以执行foo（） this指向window.

call是指将foo函数中的this指向obj（即在obj对象内部环境执行foo函数），此时的foo函数的this并不是setTimeout函数内部的this

如想用到foo函数内部的this，可以先将this用一个变量保存起来，代码如下

function foo(name,sex){
var that = this;
setTimeout(function(){
console.log(that.name+' love '+name+' cause '+name+' is a '+sex);
},100);
}
foo('you','girl');  //window love you cause you is a girl
foo.call(obj,'you','girl');  //I love you cause you is a girl
foo.apply(obj,['you','girl']); //I love you cause you is a girl

当用ES6箭头函数时，内部的this始终是指向一开始创建的对象（函数）

function arrow_foo(name,sex){
setTimeout(() => {
console.log(this.name+' love '+name+' cause '+name+' is a '+sex);
},100);
}
arrow_foo('you','girl');  //window love you cause you is a girl
arrow_foo.call(obj,'you','girl'); //I love you cause you is a girl

将上述ES6代码用谷歌转化工具traceur转换成ES5,原理就一目了然了：代码如下

function arrow_foo(name, sex) {
var $__0 = this;
setTimeout(function() {
console.log($__0.name + ' love ' + name + ' cause ' + name + ' is a ' + sex);
}, 100);
}

一段代码总结call,apply,bind,$proxy

function arrow_foo(name,sex){
setTimeout(() => {
console.log(this.name+' love '+name+' cause '+name+' is a '+sex);
},100);
}
arrow_foo('you','girl');  //window love you cause you is a girl
arrow_foo.call(obj,'you','girl'); //I love you cause you is a girl
arrow_foo.bind(obj,'you','girl')();//I love you cause you is a girl
$.proxy(arrow_foo,obj,'you','girl')();//I love you cause you is a girl

总结

由以上代码可以总结出：

1. foo.call()与foo.apply()原理是一样的，将foo函数的this指向指定的对象（或者表述为在指定对象的上下文环境中运行foo函数）；

2. bind(obj)与$proxy(obj)不同的是他们返回的是一个新的函数，该函数的this执行指定的对象obj。