JS call() apply() bind() - Kaiqisan

大家好，都吃了吗？我是Kaiqisan,是一个不善言辞的羞射男孩。由于在js中的this的应用比较迷惑，有些时候，我们使用this的时候会出现很多意外，今天这三个方法拯救你的所有迷惑。

call(fun, arg1, arg2...),引用别的对象，动态修改this的指向。

先简单看一个例子

let demo1 = {
    name: 'Kaiqisan',
	uid: 10001,
	doSomething: function () {
		console.log(this.name, this.uid);
    }
}
demo1.doSomething()
// 最终输出为 Kaiqisan 10001

在这里this指向demo1，因为这个方法是由demo1调用出来的。

但是，如果我想要使用这个方法来调用别的对象里面的其他成员，使用this就无法实现了。

于是有了call方法

let demo1 = {
    name: 'Kaiqisan',
	uid: 10001,
	doSomething: function () {
		console.log(this.name, this.uid);
    }
}
let demo2 = {
    name: 'Tom',
	uid: 10002,
}
demo1.doSomething.call(demo2) // Tom 10002

在这里，其实this的指向就改变了本来this指向了demo1，现在指向了demo2.（可以先后打印this来验证）

PS:call方法后面可以传值，可以作为参数传入函数中

	let demo1 = {
        name: 'Kaiqisan',
		uid: 10001,
		doSomething: function (params1, params2) {
            console.log(params1, params2); // 10, 20
        }
	}
	let demo2 = {
        name: 'Tom',
		uid: 10002,
	}
	demo1.doSomething.call(demo2, 10, 20)

apply(func, arr): 用法与上面的方法完全一样，就是在后面的参数编写上面有差别

	let demo1 = {
        name: 'Kaiqisan',
		uid: 10001,
		doSomething: function () {
            console.log(arguments[0], arguments[1]); // 10, 20
			console.log(this.name, this.uid);
        }
	}
	let demo2 = {
        name: 'Tom',
		uid: 10002,
	}
	demo1.doSomething.apply(demo2, [10, 20])

apply后面传参是数组，而不是多个参数，否则报错。

这个方法与上面的call方法比起来，可以支持不定个数的参数,建议使用arguments,也比call更加灵活。

bind(this): 一般来说都是固定this指向的，至于这句话什么意思，可以看下面的代码

	let demoOutside = {
	    params1: 100,
		doMethod: function () {
            console.log(this) // 这个this指向调用它的对象 demoOutside
			setTimeout(function () {
				console.log(this); // 在这里this输出为Window
            }, 10)
        }
	}
	demoOutside.doMethod()

这里，由于作用域的制限,外面的this无法传入里面，内部function未被任何对象调用，所以this就默认指向了Window。

为了解决这个问题，就可以选择把外面的this传入里面。bind()就可以很好地解决这个问题

	let demoOutside = {
	    params1: 100,
		doMethod: function () {
			setTimeout(function () {
				console.log(this);
            }.bind(this), 10) 
        }
	}
	demoOutside.doMethod()

这样就可以把外面的this传入内部，内部function也会指向demoOutside

它相当于

	let demoOutside = {
	    params1: 100,
		doMethod: function () {
	        let _this = this // 使用参数固定this的地址
			setTimeout(function () {
				console.log(_this);	
            }, 10)
        }
	}
	demoOutside.doMethod()

也等于

	let demoOutside = {
	    params1: 100,
		doMethod: function () {
			setTimeout(() => { // 箭头函数无视作用域
				console.log(this);
            }.bind(this), 10) 
        }
	}
	demoOutside.doMethod()

现在ES6出了箭头函数之后，有了更加直观的方法把外层this传入内层，bind()方法就显得相形见绌，其的用途就越来越窄，但是，虽是如此，在有些时候，比如使用构造函数的时候，就不适合使用箭头函数（为了避免this指向混乱），在这里，就可以看情况使用bind()方法。

总结

都是修改this的指向，虽然平时用得比较少，但是面试笔试频频出现它，要熟记。

本文地址：https://blog.csdn.net/qq_33933205/article/details/109236121