关于JavaScript的this指向讲解

在浏览器中有一个神奇的关键字

this

代指某样东西
谁调用它, 它就会指向谁

全局

如果在控制台中输入this会打印出Window

consoel.log(this)
> Window{...}

因为是浏览器调用的this那么this就会指向浏览器的全局对象Window
比如这里有一个函数foo

function foo(){
	console.log(this)
}

如果执行foo这个函数那么也会打印出Window

foo()
> Window {...}

因为是浏览器调用的foo函数
foo函数里面打印this
而谁调用的它,this就会指向谁

所以执行流程是这样的
Window 调用 了foo函数,函数 执行 打印this
是Window 调用的this所以this指向的Window

对象中

那么有没有其他情况呢?

比如我定义一个对象obj
里面有一个属性是foo 值是一个函数

var obj={
	foo:function foo(){
		console.log(this)
	}
}

如果我执行如下操作控制台会打印什么?

obj.foo()
> {foo:foo()}

可以看到竟然打印出了obj对象
因为是obj 调用 的foo函数 函数在去 执行 打印

谁 调用 的 this 呢?
是obj
谁 调用 的this 那么this就指向谁
obj 调用 的this 那么this就会指向obj

问: 下面会打印什么?

var obj={
	foo1:function (){
		function foo2(){
			console.log(this)
		}
		foo2()
	}
}
obj.foo1()

答案是

> Window {...}

首先要分清 调用 和 执行

调用 表示对象调用属性
比如

var a={
	name:"狗蛋"
}
a.name

表示 a 对象 调用 属性 name

再比如

function foo(){}
foo()

表示 执行 foo函数

那么回过头来看问题

var obj={
	foo1:function (){
		function foo2(){
			console.log(this)
		}
		foo2()
	}
}
obj.foo1()

obj 调用 的 foo1函数
而 foo1函数里面是 执行 foo2

那么谁调用的 foo2呢?
没有任何对象调用它
那么 foo2里的this指向的就是Window

如果没有任何明确的对象调用 this
那么this就会指向 Window

关于箭头函数

箭头函数的this会绑定到上下文的this

比如

var obj={
	foo:()=>{console.log(this)}
}
obj.foo()

因为使用的是箭头函数
而箭头函数的this会指向到外部的this

比如

var obj={
	foo1:function (){
		(()=>{console.log(this)})()
	}
}
obj.foo1()

箭头函数的this会绑定到外部的this

所以打印的是obj对象

类

JS中类里使用this关键字和上方是一样的
比如:
这里声明一个Goudan类

class Goudan{
    constructor(){
        this.name = '狗蛋'
    }
}

constructor代表构造方法
当创建Goudan对象时会执行一次构造方法
如:

class Goudan{
    constructor(){
        console.log(11)
    }
}
new Goudan()
// 此处会执行构造方法里的打印
> 11

那么回顾上面的类，构造方法里的this代表什么呢?
如果打印出来this,会出现这种结果

> Goudan {...}

这是因为在类中的this会指向当前所在的类
这也是为什么在Vue中使用data里的数据需要在属性前面加上this
因为Vue将data里的数据挂载到了当前的Vue对象上
使用时this也就代表了当前的Vue对象

案例:

class Goudan{
    constructor(){
        this.name = '狗蛋';
    }
    say(){
    	console.log(this.name);
    }
}
let goudan = new Goudan();
goudan.say();

控制台会打印什么?

答案:

> 狗蛋

解析:
在 new Goudan()时创建一个对象并执行类里的constructor构造方法
构造方法中的this指向的是创建出来的对象,里面的name属性并赋值狗蛋
在这个类里有一个方法say方法打印this.name
而say里的this谁调用它this就指向谁
而new Goudan创建出来的对象赋值给了变量goudan
goudan调用了say方法this指向goudan
而在执行构造方法时赋值给了name='狗蛋'所以打印出狗蛋

注意
在类中并没有一个全局对象Window所以当this执行不明确时会出现undefined
比如

class Goudan{
    constructor(){
        this.name = '狗蛋';
    }
    say(){
    	function foo(){
    		console.log(this);
		}
		foo();
    }
}
let goudan = new Goudan();
goudan.say();
// 打印出
> undefined

因为没有任何对象调用foo()所以this指向不明确
那么this就是undefined
在类中也是适用箭头函数的
例如:

class Goudan{
    constructor(){
        this.name = '狗蛋'
    }
    say(){
        (_=>{ // 这里箭头函数绑定了上下文 所以this就是指向创建出来的对象
            console.log(this.name);
        })();
    }
}
let goudan = new Goudan();
goudan.say();
// 控制台打印
> 狗蛋