【复习】call，apply，bind三个方法的异同

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端复习专栏收录该内容

11 篇文章

订阅专栏

本文详细解析了JavaScript中this关键字的指向问题，以及如何使用call、apply、bind三种方法来改变函数内部的this指向。通过具体示例，如普通函数调用、数组操作、定时器应用等，深入浅出地讲解了这三种方法的区别和应用场景。

call，apply，bind三个方法都用来处理函数内部this指向的问题

call：会自动调用函数，并且改变this指向

// call：函数的方法，作用，改变this指向
		// 普通函数
		function fn (a, b) {
			console.log(this, a, b);// this指向window[window调用的这个函数]
		}
		// fn();
		var obj = {name : '张三丰', age : 22};

		// 改变this指向
         //obj undefined undefined
		 fn.call(obj);
		// obj 111 222
		fn.call(obj, 111, 222);

结果示例：

apply：会自动调用函数，但是传参必须数组形式

简单示例：

function fn (a, b, c) {
			console.log( this, a, b, c );
		}

		var o = {name : '刘德华', age : 23};
		// 改变this
		fn.apply(o, [111, 222, 333]);

数组中求最大值：

var arr = [123,456,23,44,66,99];
		// var n = Math.max(123,456,657,657,2345,456,345,234,345);
		// console.log( n );	
		var n = Math.max.apply(null, arr);
		console.log( n );

bind:不会自动调用函数，只能手动执行函数，传参与call一致

简单示例：

function fn (a, b,) {
			console.log(this, a, b);
		}

		var o = {name : '阿飞', age : 22};

		var newFn = fn.bind(o, 111, 222);//使用bind不会立即执行，需要手动调用
		newFn();

定时器示例：

点击禁用按钮，3s后通过bind将定时器的this指向（window）改为btn（按钮），所以3s后按钮恢复启用状态

var btn = document.querySelector('input');

		btn.onclick = function () {
			// 点击吧按钮禁用
			this.disabled = true;
			// 启动延迟性定时器
			window.setTimeout(function () {
				this.disabled = false;
				// call，apply，bind
			}.bind(this), 3000);
		}

call，apply，bind在传参和调用上有所不同