欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-28 19:07:20
大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩。由于在js中的this的应用比较迷惑,有些时候,我们使用this的时候会出现很多意外,今天这三个方法拯救你的所有迷惑。call(fun, arg1, arg2...),引用别的对象,动态修改this的指向。先简单看一个例子let demo1 = { name: 'Kaiqisan',uid: 10001,doSomething: function () {console.log(this.name, this.....

大家好,都吃了吗?我是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