徹底理解了call()方法，apply()方法和bind()方法
阿新 • • 發佈：2019-02-17
javascript中的每一個作用域中都有一個this物件，它代表的是呼叫函式的物件。在全域性作用域中，this代表的是全域性物件（在web瀏覽器中指的是window）。如果包含this的函式是一個物件的方法，this指向的就是這個物件。因此在上面例子中就不用直接寫物件的名字，而是使用this代替它，例如：
var human = {
name: '霍林林',
sayName: function(){
console.log(this.name);
}
}
human.sayName();
下面這個例子中，我們直接使用person.name，這種做法會增加方法與物件之間的耦合度（它們之間的依賴性變強了）。這樣寫是有問題的 ，如果我們的變數名修改了，我們必須同時修改方法中的變數名。幸運的是，JavaScript給我們提供瞭解決這個問題的方法。
var person = {
name: '霍林林',
sayName: function(){
console.log(person.name);
}
}
person.sayName();
1.改變this
this通常是被自動賦值的，但是我們可以改變this的指向。JavaScript給我們提供了 3 中 函式方法 來改變this的指向。
2.call()方法
這個方法的第一個引數表示this指向的物件，後面的所有引數都是函式的引數。例如：
function sayName(label) { console.log(label+'--->'+this.name); } var name = '張三'; var person1 = { name: '李四' }; var person2 = { name: '王二' }; sayName.call(window,'global'); //'global--->張三' sayName.call(person1,'person1'); //'person1--->李四' sayName.call(person2,'person2'); //'person2--->王二'
3.apply()方法
這個方法和call方法的作用都是相同的，只不過在傳遞引數時候，call方法可以傳遞多個引數，而apply方法只能傳遞一個方法，並且要求是一個數組。
function sayName(label) { console.log(label); console.log(this.name); } var name = '張三'; var person1 = { name: '李四' }; var person2 = { name: '王二' }; sayName.apply(window,['global']); //'global--->張三' sayName.apply(person1,['person1']); //'person1--->李四' sayName.apply(person2,['person2']); //'person2--->王二'
4.bind()方法
bind()方法第一個引數是我們希望函式中this指向的物件，後面的引數是我們希望給函式的引數繫結的值。
var obj = {
name:'小明'
age:23
};
function myName(age,gender){
console.log(this.name,age,gender);
}
var newName = myName.bind(obj);
newName(); //小明 undefined undefined
var newName2 = myName.bind(obj,18);
newName2(); //小明 18 undefined
var newName3 = myName.bind(obj,18,'女');
newName3(); //小明 18 女
var newName4 = myName.bind(obj);
newName4(18,'女'); //小明 18 女