1. call纷妆、apply腌闯、bind作用于函數(shù)上
2. call
<script type="text/javascript">
var Dog = function () {
this.name = "旺星人";
this.shout = function () {
alert(this.name);
}
};
var Cat = function () {
this.name = "喵星人";
};
var dog = new Dog();
var cat = new Cat();
dog.shout.call(cat); //dog.shout中的this對象煌寇，將指向cat對象秃殉。
dog.shout(); //this還是指向dog
</script>
3. apply
<script type="text/javascript">
var xh = {
name: "小紅",
job: "JS工程師"
};
var xm = {
name: "小明",
job: "資深前端開發(fā)工程師"
};
var jx = {
name: "杰西",
job: "前端開發(fā)總監(jiān)"
};
//杰西奸鸯，男咪笑，今年24歲，在前端開發(fā)網(wǎng)擔任前端開發(fā)總監(jiān)一職
function myjob(gender, age, company) {
alert(this.name + "娄涩，" + gender + "窗怒，今年" + age + "歲，在" + company + "擔任" + this.job + "一職");
}
myjob.call(xh, "女", 22, "騰訊");
myjob.call(xm, "男", 23, "谷歌");
myjob.call(jx, "男", 24, "前端開發(fā)網(wǎng)");
myjob.apply(xh, ["女", 22, "騰訊"]);
myjob.apply(xm, ["男", 23, "谷歌"]);
myjob.apply(jx, ["男", 24, "前端開發(fā)網(wǎng)"]);
</script>
總結(jié)：
- 在call傳入?yún)?shù)的時候蓄拣，需要與函數(shù)所接受的參數(shù)一一對應扬虚；
- 在apply傳入?yún)?shù)的時候，則以數(shù)組的方式傳入，數(shù)組中的元素需要與函數(shù)所接受的參數(shù)一一對應癌别；
- call戒财、apply都是屬于立即調(diào)用
3.bind
- MDN的解釋是：bind()方法會創(chuàng)建一個（新函數(shù)），稱為綁定函數(shù)堪置，當調(diào)用這個綁定函數(shù)時躬存，綁定函數(shù)會以創(chuàng)建它時傳入 bind()方法的第一個參數(shù)作為 this，傳入 bind() 方法的第二個以及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)舀锨。
// 1.常用this賦值寫法
<script type="text/javascript">
var foo = {
bar: 1,
eventBind: function () {
var _this = this;
$('.someClass').on('click', function (event) {
/* Act on the event */
console.log(_this.bar); //1
});
}
}
</script>
// 2.bind()改變this指向
<script type="text/javascript">
var foo = {
bar: 1,
eventBind: function () {
$('.someClass').on('click', function (event) {
/* Act on the event */
console.log(this.bar); //1
}.bind(this));
}
}
</script>
- 直接使用對象屬性
<script type="text/javascript">
var jx = {
name: "杰西",
gender: "男",
age: 24,
company: "前端開發(fā)網(wǎng)（W3Cfuns.com）",
job: "前端開發(fā)總監(jiān)",
say: function () {
alert(this.name + "岭洲，" + this.gender + "，今年" + this.age + "歲坎匿，在" + this.company + "擔任" + this.job + "一職");
}
};
jx.say();
var xm = jx.say.bind({
name: "小明",
gender: "男",
age: 23,
company: "谷歌 Google",
job: "資深前端開發(fā)工程師"
});
xm();
//注意：JavaScript1.8.5版本中盾剩，原生實現(xiàn)bind方法，目前IE9+替蔬，F(xiàn)F4告私，Chrome7+，opera
</script>
- 重復使用bind會有什么效果
<script type="text/javascript">
var bar = function () {
console.log(this.x);
}
var foo = {
x: 3
}
var sed = {
x: 4
}
var func = bar.bind(foo).bind(sed);
func(); //?
var fiv = {
x: 5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?
</script>
答案是承桥，兩次都仍將輸出 3 驻粟，而非期待中的 4 和 5 。原因是快毛，在Javascript中格嗅，多次 bind() 是無效的。更深層次的原因唠帝， bind() 的實現(xiàn)屯掖，相當于使用函數(shù)在內(nèi)部包了一個 call / apply ，第二次 bind() 相當于再包住第一次 bind() ,故第二次以后的 bind 是無法生效的襟衰。
apply贴铜、call、bind比較
<script type="text/javascript">
var obj = {
x: 81,
};
var foo = {
getX: function () {
return this.x;
}
}
console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81
</script>
- 三個輸出的都是81瀑晒，但是注意看使用 bind() 方法的绍坝，他后面多了對括號。
- 也就是說苔悦，區(qū)別是轩褐，當你希望改變上下文環(huán)境之后并非立即執(zhí)行，而是回調(diào)執(zhí)行的時候玖详，使用 bind() 方法把介。而 apply/call 則會立即執(zhí)行函數(shù)。
再總結(jié)一下：
- apply 蟋座、 call 拗踢、bind 三者都是用來改變函數(shù)的this對象的指向的；
- apply 向臀、 call 巢墅、bind 三者第一個參數(shù)都是this要指向的對象，也就是想指定的上下文；
- apply 君纫、 call 驯遇、bind 三者都可以利用后續(xù)參數(shù)傳參；
- bind 是返回對應函數(shù)蓄髓，便于稍后調(diào)用妹懒；apply 、call 則是立即調(diào)用 双吆。
