关于Js中this问题的小总结

1.全局作用域或者普通函数中this指向全局对象window

（匿名函数具有全局作用域）

//直接打印
console.log(this) //window
		
//function声明函数
function bar () {console.log(this)}
bar() //window
		
//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window
		
//自执行函数
(function () {console.log(this)})(); //window

2.在方法调用中谁调用this指向谁

//对象方法调用
var person = {
    run: function () {console.log(this)}
}
person.run() // person

//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
    console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
   console.log(this) //btn
})

//jquery的ajax
 $.ajax({
    self: this,
    type:"get",
    url: url,
    async:true,
    success: function (res) {
        console.log(this) // this指向传入$.ajxa()中的对象
        console.log(self) // window
    }
   });
 //这里说明以下，将代码简写为$.ajax（obj） ，this指向obj,在obj中this指向window，因为在在success方法中，独享obj调用自己，所以this指向obj

3.在构造函数或者构造函数原型对象中this指向构造函数的实例

//不使用new指向window
function Person (name) {
    console.log(this) // window
    this.name = name;
}
Person('inwe')
//使用new
function Person (name) {
  this.name = name
  console.log(this) //people
  self = this
}
var people = new Person('iwen')
console.log(self === people) //true
//这里new改变了this指向，将this由window指向Person的实例对象people

4.箭头函数中this指向

①箭头函数的this绑定看的是this所在的函数定义在哪个对象下，绑定到哪个对象则this就指向哪个对象

②如果有对象嵌套的情况，则this绑定到最近的一层对象上

var obj={
	num:3,
	fn:function(){
		setTimeout(function(){
			console.log(this.num);
		});
	}
}
obj.fn();//undefined

//............................................................

var obj1={
	num:4,
	fn:function(){
		setTimeout(() => {
			console.log(this.num);
		});
	}
}
obj1.fn();//4

//............................................................

var obj1={
	num:4,
	fn:function(){
		var f=() => {    //object，也就是指obj1
			console.log(this);
			setTimeout(() => {
				console.log(this);// //object，也就是指obj1
			});
		}
		f();
	}
}
obj1.fn();

//............................................................

var obj1={
	num:4,
	fn:function(){
		var f=function(){    
			console.log(this); //window,因为函数f定义后并没有对象调用，this直接绑定到最外层的window对象
			setTimeout(() => {
				console.log(this);//window，外层this绑定到了window,内层也相当于定义在window层（全局环境）
			});
		}
		f();
	}
}
obj1.fn();

//............................................................

var obj1={
	num:4,
	fn:function(){
		var f=() => {    
			console.log(this); //object,f()定义在obj1对象中，this就指向obj1,这就是箭头函数this指向的关键
			setTimeout(function() {
				console.log(this);//window，非箭头函数的情况下还是要看宿主对象是谁，如果没有被对象调用，函数体中的this就绑定的window上
			});
		}
		f();
	}
}
obj1.fn();