Js中的call和apply

最新推荐文章于 2025-03-16 16:19:16 发布

原创最新推荐文章于 2025-03-16 16:19:16 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #call #apply #this #执行环境

本文详细解析了JavaScript中this的指向规则及其在不同上下文中的变化，并通过实例展示了call与apply如何动态改变函数内部this的指向。

函数有俩个属性，call和apply，这俩属性都是用于动态的改变this，

普通的函数的this都是指向调用函数的对象或者该函数生成对的对象，如下面的例子

		function Foo(){
			this.name = "ruiy";
			this.age = 20;
			console.log(this);//Foo{name:"ruiy",age:20}
		}
		var obj = new Foo();
		console.log(obj.name);//ruiy
		console.log(obj.age);20
		Foo();//Window
		obj.fun = function(){
			console.log(this);
		}
		obj.fun();//Foo{name:"ruiy",age:20}

实际上，Js中的指针复杂要比上述复杂的多，但是记住一点，this的值只在执行的时候有值，在不同的情况下会有不同的值，但是都和调用它的执行环境有关，基本指向当前活动的对象。

下面回到call函数，apply就是将传入的参数以数组的形式传入即可，其他都相同

	function changeStyle(attr,value){
		// console.log(this);
		// console.log(this.style);
		this.style[attr] = value;
		console.log(this);
	}
	window.onload = function(){
		console.log(this);//Window对象
		var oDiv = document.getElementById("box");
		window.changeStyle.call(oDiv,"height","200px");//<div>对象
	}

可以上述代码的log看出，函数调用call将自己应用的对象改变了，即原来是在window对象下，然后调用之后，这个函数应有于oDiv对象了。