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

Posted 小周sri的码农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了彻底理解了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 女

 

以上是关于彻底理解了call()方法,apply()方法和bind()方法的主要内容,如果未能解决你的问题,请参考以下文章

call/apply以及this指向的理解

理解call,apply,bind区别和使用场景

彻底掌握this,call,apply

js中的call()方法与apply()方法

js中的call和apply

JS中 call和apply的区别和作用