JS中this指向的深入理解

落日映苍穹つ 2021-09-29 05:10 370阅读 0赞

# 简述 #

this 是 JavaScript 语言的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁

函数的不同使用场合，this 有不同的值。总的来说，this 就是函数运行时所在的环境对象

# 一般的函数调用 #

一般的函数调用属于全局性调用，因此 this 就代表全局对象 window

var a = 1
    function fn() { 
    	var a = 2
    	console.log(this)       // window this ——> window
    	console.log(this.a)     // 1 this ——> window 
    }
    	
    fn()

# 作为对象方法的调用 #

函数作为某个对象的方法调用，此时 this 指向上级对象

var a = 1
    var obj = { 
    	a: 2,
    	fn: function() { 
    		console.log(this)       // {a: 1, fn: ƒ} this ——> obj
    		console.log(this.a)     // 2 this ——> obj
    	}
    }	
    
    obj.fn()

函数作为某个对象的方法，赋值给一个全局变量，此时 this 指向 window

var a = 1
    var obj = { 
    	a: 2,
    	fn: function() { 
    		console.log(this)       // window this ——> window
    		console.log(this.a)     // 1 this ——> window
    	}
    }	
    
    var foo = obj.fn()
    foo()

# 构造函数调用 #

所谓构造函数，就是通过这个函数，可以生成一个新对象。这时，this 就指向这个新对象

function Fn() { 
    	this.a = 1
    	console.log(this)    // Fn {a: 1} this ——> fn
    }
    
    var fn = new Fn()
    console.log(fn.a)        // 1

# 箭头函数中没有this #

箭头函数中没有 this，所以不能用作构造函数，否则会报错

var Fn = ()=> { 
        console.log(this)
    }
    var fn = new Fn()  // Fn is not a constructor

# setTimeout & setInterval #

延时函数内部的回调函数的 this 指向全局对象 window

var a = 1
    setInterval(function() { 
    	console.log(this)       // window this ——> window
    	console.log(this.a)     // 1 this ——> window
    }, 1000)
    
    setTimeout(function() { 
    	console.log(this)       // window this ——> window
    	console.log(this.a)     // 1 this ——> window
    }, 1000)

# 当this遇到return #

如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象，那么 this 指向函数的实例

function Fn()  
    {   
        this.a = 1  
        return { }
    }
    var fn = new Fn()
    console.log(fn.a)     // undefined this ——> {}
    
    function Fn()  
    {   
        this.a = 1  
        return function() { }
    }
    var fn = new Fn()
    console.log(fn.a)     // undefined this ——> function() {}
    
    function Fn()  
    {   
        this.a = 1  
        return ''
    }
    var fn = new Fn()
    console.log(fn.a)     // 1 this ——> fn