1. 程式人生 > >徹底理解了call()方法,apply()方法和bind()方法

徹底理解了call()方法,apply()方法和bind()方法

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 女