重温JS基础-1-动态this三兄弟

相信对很多兄弟对js的this弄不清楚，但是咱们今天先不说this（什么默认全局，显示设定，隐设定，动态忽略等等），咱们单说那能改变当前this的三剑客。 call  apply  bind

先看默认情况下，this默认指向全局，

var name = '动物'
function animal(){
	console.log(this.name+'-在跑')
}
animal(); //输出 动物-在跑

上面代码，this.name默认取了全局的name，动物，animal内部

下面先介绍一下分别用三剑客，动态一下this，来实现一下

var name = '动物'
function animal(){
	console.log(this.name+'-在跑')
}
animal.call({name:'猫咪'});

animal.apply({name:'狗狗'});

animal.bind({name:'老虎'})();

 结果如下

 

可能你不知道你函数里面用的this是什么已经经过千回百转，找不到上下文了，但是通过动态指定你永远能够知道自己要的是什么。

带参数的时候写法有些不同

var name = '动物'
function animal(age,lan){
	console.log(this.name,'年龄已经',age,'仍然在学',lan)
}
animal.call({name:'猫咪'},20,'js');

animal.apply({name:'狗狗'},[20,'java']);

animal.bind({name:'老虎'},20,'c#')();

结果如下：

 简单总结为：

三者都可以动态改变this，

call参数（新this，参数1，参数2，参数N..），参数在新的this后依次展开。

apply参数（新this，【参数1，参数2,参数N..】），apply两个参数，第一个和call一样，但是apply把剩余的实际函数参数全都封装在一个数组后面给了apply第二个参数上。

bind的参数和call相同 新this，参数1，参数2，参数N..），不同的是call和apply都是直接执行了函数，bind是返回一个函数句柄，需要再次调用，

故实际使用用bind是xxx.bind（新this，【参数1，参数2,参数N..】）(),多了一个执行（）。说明bind只是返回了函数没有执行。