This point in JS

JS Medium this Point to

this The point is determined by the calling method

1. this stay Global scope ： Point to window

console.log(this); //window

2. this stay Function scope

• Ordinary function ： In strict mode this by undefined, Nonstrict mode this by window

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

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

• Arrow function ： All for window

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

3. this stay Object method （ Object context rules ）

• Ordinary function

（1） object . Method ()：this Point to the calling object of the dot

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

（2） Array [ Subscript ]()： Array （ Class array object ） List functions to call ,this This is the array （ Class array object ）

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

（3） Immediate execution function ：this Point to window object

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

（4） Timer 、 Time delayer ：this Point to 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;
// Note that this method is different from the above , This is to define a function separately and then call 
// This is an object . Method ()
setTimeout(function(){
    obj.fun()}, 1000);  //3

（5） The context of the event handler is bound to the event DOM Elements

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

• Arrow function
  All cases are window

A special case

var obj = {
    
            name: 'hh',
            func: function() {
    
            // The ordinary function in the timer is this Point to window
                setInterval(function(){
    
                    console.log(this);
                },1000)
            }
        }
        obj.func(); //window

var obj1 = {
    
            name: 'hh1',
            func: function(){
    
            // The arrow function is this Point to obj
                setInterval(()=>{
    
                    console.log(this);
                },1000)
            }
        }
        obj1.func(); //obj1