JS中的this指向

JS中的this指向

this指向是由调用方式决定的

1. this在全局作用域：指向window

console.log(this); //window

2. this在函数作用域

• 普通函数：严格模式下this为undefined，非严格模式this为window

function fun(){
	console.log(this);
}
fun(); //window

'use strict'
function fun(){
	console.log(this);
}
fun(); //undefined

• 箭头函数：都为window

var fun = ()=>{
	console.log(this);
}
fun(); //window

3. this在对象的方法中（对象上下文规则）

• 普通函数

（1）对象.方法()：this指向打点的调用对象

var obj = {
     name: 'xxx',
     func: function() {
     	console.log(this);
     }
}
obj.func(); //obj

（2）数组[下标]()：数组（类数组对象）枚举出函数进行调用，this是这个数组（类数组对象）

var arr = ['A','B','C', function(){
	console.log(this);
	console.log(this[0]);
}];
arr[3](); //['A', 'B', 'C', ƒ] A

（3）立即执行函数：this指向window对象

var a = 1;
    var obj = {
        a: 2,
        fun: (function(){
       	     var a = this.a;
             return function(){
                console.log(a+this.a);
             		}
             })()
}
obj.fun(); //3

（4）定时器、延时器：this指向window

setInterval(function(){
	console.log(this);
}, 1000)

var obj = {
	a: 1,
	b: 2,
	fn: function(){
		console.log(this.a + this.b);
	}
}
var a = 3;
var b = 4;
setTimeout(obj.fn, 1000); //7

var obj = {
	a: 1,
	b: 2,
	fn: function(){
		console.log(this.a + this.b);
	}
}
var a = 3;
var b = 4;
//注意此种方法与上面不同，这是单独定义一个函数再调用
//这种是对象.方法()
setTimeout(function(){obj.fun()}, 1000);  //3

（5）事件处理函数的上下文是绑定事件的DOM元素

元素.click =  function(){
	console.log(this); //元素
}

• 箭头函数
  所有情况都为window

特殊情况

var obj = {
            name: 'hh',
            func: function() {
            //定时器里为普通函数是this指向window
                setInterval(function(){
                    console.log(this);
                },1000)
            }
        }
        obj.func(); //window

var obj1 = {
            name: 'hh1',
            func: function(){
            //为箭头函数是this指向obj
                setInterval(()=>{
                    console.log(this);
                },1000)
            }
        }
        obj1.func(); //obj1