call()、apply()、bind()来改变this指针的指向函数

this指向:this最终指向的是调用它的对象。

通过apply和call改变函数的this指向,他们两个函数的第一个参数都是一样的表示要改变指向的那个对象,第二个参数,apply是数组,而call则是arg1,arg2…这种形式。通过bind改变this作用域会返回一个新的函数,这个函数不会马上执行。

Function.apply(thisArg,[argsArray])方法能接收两个参数
thisArg:这个对象将代替Function类里this对象
[argsArray]:这个是数组,它将作为参数传给Function(args–>arguments)

Function.call(thisArg, arg1, arg2, …)
thisArg:这个对象将代替Function类里this对象 arg1, arg2, … :这个是一个参数列表
【当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数.】

Function.bind(thisArg[, arg1[, arg2[, …]]])
thisArg: 这个对象将代替Function类里this对象
arg1, arg2, …: 这个是一个参数列表

示例:

var name = 'Jay',
    age = 20;
var objA = {
    name: 'Tom',
    objAge: this.age,
    myFun: function() {
        console.log(this.name + ' 年龄:' + this.age)
    }
}
var objB = {
  name:'张三',
  age:18
}
console.log(obj.objAge);  //20   原因:第一行age定义的时候用的var,直接给window.this添加了age属性
objA.myFun(); //Tom 年龄undefined
objA.myFun.call(objB);    //张三 年龄:18
objA.myFun.apply(objB);  //张三 年龄:18
objA.myFun.bind(objB)()  //张三 年龄:18

再看看他们带有参数时的情况:

var name = 'Jay',
    age = 20;
var objA = {
    name: 'Tom',
    objAge: this.age,
    myFun: function(from, to) {
        console.log(this.name + ' 年龄:' + this.age +' 原居住地:'+ from +' 现居住地:'+ to)
    }
}
var objB = {
  name:'张三',
  age:18
}
objA.myFun.call(objB,'武汉','北京')       //张三 年龄:18 原居住地:武汉 现居住地:北京
objA.myFun.apply(objB,['武汉','北京'])    //张三 年龄:18 原居住地:武汉 现居住地:北京
objA.myFun.bind(objB,'武汉','北京')()     //张三 年龄:18 原居住地:武汉 现居住地:北京

bind返回一个改变了上下文 this 后的函数,便于之后调用;apply、call则是立即调用。除此之外,在ES6的箭头函数下,call和apply将失效。

想看一下应用场景,可以去看看

你可能感兴趣的:(JavaScript,javascript)