不同调用方式的函数的this指向

总结：函数内的this指向，是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同，一般指向我们函数的调用者！

 

函数内this的指向

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象、原型对象里面的方法也指向实例对象
对象方法调用	该方法所属的对象
事件绑定方法	绑定事件的对象
定时器函数	window
立即执行函数	window

 

1、普通函数调用

<script>
	function fn(){
		console.log(this); //this指向window
	}
	fn();
</script>

普通函数方式调用fn()可以看成是window.fn()，所以fn()的调用者是window。（一般省略window.）

2、构造函数调用

<script>
	function Star(name){
		this.name = name;
		console.log(this);  //this指向：Star {name: "刘德华"}
	};
	Star.prototype.sing = function() {
		console.log(this);  //this指向：Star {name: "刘德华"}
	}
	var ldh = new Star("刘德华");
	ldh.sing(); 
</script>

构造函数内部的this及prototype里面的函数的this指向的都是调用它的实例对象（也就是ldh这个实例）,故this指向：Star {name: "刘德华"}

3、对象方法调用

<script>
	var obj = {
		SayHello: function() {
			console.log(this);  //this指向{SayHello: ƒ}也就是obj这个对象
		}
	}
	obj.SayHello();
</script>

对象方法调用函数，此时this指向调用这个函数的对象。

4、事件绑定调用

<script>
	var btn = document.getElementById("btn");
	btn.onclick = function() {
		console.log(this); //this指向<button id="btn">按钮</button>
	}
</script>

事件绑定调用方式调用函数时，this指向触发这个事件的对象，也即调用它的对象(btn对象)

5、定时器函数调用

<script>
	setInterval(function(){
		console.log(this); //this指向window
	},1000)
</script>

此时定时器可以看成是window.setInterval，故this指向window

6、立即执行函数调用

<script>
	(function(){
	    console.log(this);
	})()
</script>

同普通函数调用，故this指向window。