JavaScript中的call()和apply()以及bind()方法

目錄

JavaScript中的call()和apply()以及bind()方法

1、首先我們來看看this指向的理解

2、接下來看看this遇到return時的情形

3、call()

4、apply()

5、bind()

在JS中，call、bind、apply三者都是用來手動改變函式的this的指向的。

1、首先我們來看看this指向的理解

舉例說明：

//例子1
var name = "angel",age = 16,gender = "女";
var obj = {
    name: "sophia",
    sex: this.gender,//此處this指向window
    age : this.age,//同上
    introduce: function() {
        console.log(this.name+",性別："+ this.gender+ "年齡："+ this.age);
        //此處的所有this指向obj
    }
};
console.log(obj.age);//16
obj.introduce();//sophia,性別：undefined年齡：16

//例子2
var hometown = "天水";
function say(){
    var user = "sophia";
    console.log(this.user);//undefined
    console.log(this.hometown);//天水    此處this指向window
}
say(); 
 

注意：this的指向在建立函式的時候是決定不了，只有在呼叫的時候才能決定，誰呼叫的就指向誰。（this永遠指向的是最後呼叫它的物件，也就是看它執行的時候是誰呼叫的）

2、接下來看看this遇到return時的情形

//返回值為物件時：
//例項1；
function Example() {
    this.user = "sophia";
    return {};
}
var eg1 = new Example();
console.log(eg1.user); // undefined

//例項2
function Example() {
    this.user = "sophia";
    return function(){};
}
var eg1 = new Example();
console.log(eg1.user); // undefined


//例項3
function Example() {
    this.user = "sophia";
    return undefined;
}
var eg1 = new Example();
console.log(eg1.user); // sophia

//例項4
function Example() {
    this.user = "sophia";
    return ;
}
var eg1 = new Example();
console.log(eg1.user); // sophia
//例項5
function Example() {
    this.user = "sophia";
    return null;
}
var eg1 = new Example();
console.log(eg1.user); // sophia
 

總之，如果當返回值是一個物件，那麼this指向的就是該返回物件，如果返回值不是一個物件那麼this還是指向函式例項。（儘管null也是物件，然而這裡this仍指向函式例項）

3、call()

舉例說明：

var a = {
    user = "sophia",
    say: function() {
         console.log(this.user);
    }
};
var b = a.say;
b(); // undefined --->誰呼叫this指向誰；這裡this指向window
//下面我們使用call()來改變this指向；
var a = {
    user = "sophia",
    say: function() {
         console.log(this.user);
    }
};
var b = a.say;
b.call(a); //this指向了物件a，結果列印： sophia
 

 call()方法的第一位引數用來改變this指向，後面的引數則需要羅列出來，中間用逗號隔開；

var a = {
    user: "sophia",
    say : function(m,n){
        console.log(this.user);
        console.log(m*n);
    }
};
var b = a.say;
b.call(a,2,8); // sophia   16

4、apply()

apply() 方法的應用場景和call()相似，第一引數用來改變this指向，而apply()的第二引數則必須是一個陣列；

注意：如果call()、apply()的第一引數寫的是null，那麼this指向window物件。

5、bind()

var a = {
    age: 18,
    say : function() {
        console.log("我今年"+this.age);
    }
};
var b = a.say;
var c = b.bind(a);
console.log(c); //ƒ (){console.log(this.user);}
console.log(c()); // 我今年18； undefined

由此我們可以知道bind()可以讓對應的函式想什麼時候呼叫就什麼時候呼叫，並且可以將引數在執行的時候新增。

var a = {
    gender: "女",
    fn: function(o,p,q){
        console.log(this.gender);
        console.log(o,p,q);
    }
};
var b = a.fn;
var c = b.bind(a,6,5);
c();// 女   6 5 undefined