在开发中我们使用函数时经常遇到需要修改this指向的问题,那怎么修改this指向呢??????

139 阅读2分钟

1、call()方法

call()是调用一个对象的一个方法,以另一个对象替换当前对象。

也就是说call方法可以用来代替一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始化改为新的对象,也就是括号里面的原本的对象改为call()前面的对象、即用thisobj代替call前面的东西,最终用thisobj这个对象去执行call前面的方法。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

语法:

call(thisobj,[argq,arg2])

看下方实例

function aa() { 
    console.log(this)
}
function bb() { }
var cc = { age: 20 };
aa.call()  //window
aa.call(1) //number
aa.call('') //string
aa.call(undefined)  //window
aa.call(true) //boolean
aa.call(bb) //function bb(){}
aa.call(cc) //object
aa.call(null) //window

2、apply()

apply和call的唯一区别是第二个参数的传递方式不同,apply的第二个参数必须是一个数组,而call允许传递一个参数列表。值得你注意的是,虽然apply接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递。 语法:

func.apply(thisArg, [argsArray])

看下方实例

var num = [6, 3, 9, 2, 5, 4];
var max = Math.max.apply(null, num);
var min = Math.min.apply(null, num);

3、bind()

bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用

该方法可传入两个参数,第一个参数作为this,第二个及以后的参数则作为函数的参数调用。bind是ES5新增的一个方法,它的传参和call类似,但又和call/apply有着显著的不同,即调用call或apply都会自动执行对应的函数,而bind不会执行对应的函数,只是返回了对函数的引用。

ES5中新增加的bind方法可以弥补call()和apply()方法的不足,由于call/apply会对目标函数自动执行,从而导致它无法在事件绑定函数中使用,因为事件绑定函数不需要我们手动执行,它是在事件被触发时由JS内部自动执行的。

语法:

fun.bind(this,arg1,arg2,...)

看下方实例:

var per = {
        name:"Rose"
    };
    function Name(a,b) {
        console.log("bind");
        console.log(this);
        console.log(a+b);
    };
    var res = Name.bind(person,1,2);  
    res();