原生js底层基础（十二）JavaScript this的指向详解及面试题

this什么时候指向谁，刚学习的时候很容易蒙圈，总结记录一下，希望对大家有所帮助，有写的不对的地方也欢迎指正。

1.函数预编译过程 this 指向 window
2.全局作用域里 this 指向 window
2.call / apply 可以改变函数运行时 this 指向
4.obj.func(); func()里面的 this 指向obj
5.new func() , func()里面的this指向函数本身

使用几个面试题详细说明：

题1，求打印结果：

var foo = 123;
function print(){
	this.foo = 234;
	console.log(foo);
}
print();	

打印出 234，第三行this.foo = 234 中的this指的是window, 将全局中foo的值改为234，
第四行执行时，当前局部上下文中找不到foo这个变量，于是向上往全局找，找到全局的foo, 输出234；

题2，求打印结果：

var name = 222;
var a = {
	name:111,
	say(){
		console.log(this.name)	
	}
}
var fun = a.say;
fun();	//222 全局的name
a.say()	//111 局部的name

var b = {
	name:333,
	say(fun){
		fun();
	}
}
b.say(a.say);//222
b.say = a.say;
b.say();//333

输出的四个结果分别为 222 111 222 333
第一个：fun接受了a.say的方法体，在全局下自己调用，因此this指向window，name输出的是全局的222
第二个：a.say() 执行，a里面的this是a ,因此name输出的是111
第三个：a.say的函数体当做参数放到b.say里，此时b里的this是b没错，但是注意fun()的执行无人调用，只是在b.say这个环境里执行了，所以函数体里的this还是指向window，输出222，需要慢慢捋一捋
第四个：a.say的方法体赋值给b.say, b调用say方法，this指向的是b,因此输出333

题3，求打印结果：

var foo =123;
function print(){
	//这里会自动创建this变量
	//var this = Object.create(print.prototype)
	this.foo = 234;
	console.log(foo);
}
new print();

new以后，系统会默认在print里创建一个this对象，this由原来的window改为一个空对象了，所以this.foo= 234 改变的就是this对象中的foo而不是全局的foo了，因此最后输出123

题4,以下代码，求test()和new test()的结果:

1 var a = 5;
2 function test () {
3 	a = 0;
4	console.log(a);
5	console.log(this.a);
6	var a ;
7	console.log(a)
8 }

答案 ：test() --> 0 5 0
new test() -->0 undefied 0
首先说test()，考的就是预编译和this了，预编译想了解更多看点这里
第4行中，输出的是局部函数上下文中的a,值为0 ；
第5行中，由于此时this指向的是window，所以输出5；
第7行中，输出的仍然是局部函数上下文中的a,值为0

再来说new test()，new test() 时 test函数中系统会加上一句定义 this =Object.create(test.prototype)，此时的this变成了一个空对象，在第5行中，打印this.a必然是没有的；
而在第4行和第7行，打印结果不变，他们还是输出局部上下文中a的值