call,apply,bind是做什么的?
都是天生自帶的方法(Function.prototype),
所有的函數(shù)都可以調(diào)取這三個方法
一般用來指定this的環(huán)境?涡俊(改變this指向)
首先咱們復(fù)習(xí)一下之前學(xué)到的知識點:
// 1
var a = {
user:"浮云先生",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
b(); //undefined
// 2
var a = {
user:"浮云先生",z
fn:function(){
console.log(this.user);
}
}
a.fn(); //浮云先生
如果有不明白的同學(xué)請看第六章關(guān)于this指向厨内。
但是有時候我們不得不將這個對象保存到另外的一個變量中,那么就可以通過以下方法:
1. call()
fn.call(context, para1, ...)
把fn函數(shù)執(zhí)行渺贤,并且讓fn函數(shù)中的this變?yōu)閏ontext雏胃,而para1和...是給fn傳遞的實參
var a = {
user:"浮云先生",
fn:function(){
console.log(this.user); //浮云先生
}
}
var b = a.fn;
b.call(a);
通過在call方法,給第一個參數(shù)添加要把b添加到哪個環(huán)境中志鞍,簡單來說瞭亮,this就會指向那個對象。
call方法除了第一個參數(shù)以外還可以添加多個參數(shù)固棚,如下:
var a = {
user:"浮云先生",
fn:function(s,ss){
console.log(this.user); //浮云先生
console.log(s+ss); //3
}
}
var b = a.fn;
b.call(a,1,2);
2. apply()
fn.apply(context, [para1, ...])
把fn函數(shù)執(zhí)行统翩,并且讓fn函數(shù)中的this變?yōu)閏ontext,而para1和...是給fn傳遞的實參
var a = {
user:"浮云先生",
fn:function(){
console.log(this.user); //浮云先生
}
}
var b = a.fn;
b.apply(a);
同樣apply也可以有多個參數(shù)此洲,但是不同的是厂汗,第二個參數(shù)必須是一個數(shù)組,如下:
var a = {
user:"浮云先生",
fn:function(s,ss){
console.log(this.user); //浮云先生
console.log(s+ss); //11
}
}
var b = a.fn;
b.apply(a,[10,1]);
注意:如果call和apply的第一個參數(shù)寫的是null呜师,那么this指向的是window對象
var a = {
user:"浮云先生",
fn:function(){
console.log(this); //Window
}
}
var b = a.fn;
b.apply(null);
3.bind()
bind方法和call娶桦、apply方法有些不同,不過他們都是用來改變this指向汁汗。
var a = {
user:"浮云先生",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
var c = b.bind(a);
console.log(c); // fn---> function() { [native code] }
c(); // ---> 浮云先生
實際上bind方法返回的是一個修改過后的函數(shù).那我們賦值一個變量執(zhí)行函數(shù)得到浮云先生趟紊。
同樣bind也可以跟多個參數(shù),如下:
var a = {
user:"浮云先生",
fn:function(e,d,f){
console.log(this.user); //浮云先生
console.log(e,d,f); //10 1 2
}
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);
覺得寫的不錯的小伙伴點贊加關(guān)注哦碰酝! (=?ω?=)