JavaScript中this关键字具体指向什么对象？

本文共计723个文字，预计阅读时间需要3分钟。

今天看到有些同学对this指向有疑问，总结了下。首先，在普通函数中，this指向调用此函数的对象。下面看几个例子。

button按钮1/buttonbutton按钮2/buttonscriptlet btns=document.getE...

今天看到有些同学对this指向有疑问，总结了下。

首先，在普通函数中，this是指向调用此函数的对象。下面我们来看几个例子。

<button>按钮1</button> <button>按钮2</button> <script> let btns = document.getElementsByTagName('button') btns[0].onclick = function() { console.log(this === btns[0]) } btns[1].addEventListener('click', function() { console.log(this === btns[1]) }) </script> //以下为控制台打印内容 true true

可以看到，当我们点击这两个按钮时，返回的都是 true，这个相信大家都应该知道。那么我们看接下来的一个例子

<button onclick="pr()">按钮1</button> <script> function pr() { console.log(this) } </script> //以下为控制台打印内容 Window{window: Window, self: Window, document: document, name: '', location: Location,…}

当我们点击的时候，打印出来的是 Window 对象，这个pr函数通过上面的button点击调用，打印出来的不应该是button按钮吗？

其实这段代码我们可以这么理解

<button>按钮1</button> <script> function pr() { console.log(this) } document.querySelector('button').onclick = function() { pr() }

这样子写的话，对打印出来的this是Window对象是不是就理解了呢？

看完了事件里面的this，我们再看一下另外的情况

<script> let obj = { age: 18, say: function() { console.log(this.name) } } obj.say() </script> //以下为控制台打印内容 18

可以看到，打印出来的是 18 。这个相信大家没什么疑虑。

那我们给它变一变

<script> let obj = { age: 18, say: function() { console.log(this.age) } } let fn = obj.say fn() </script> //以下为控制台打印内容 undefined

这个就成了undefined，为什么呢？因为fn这个函数，也就是say这个函数，是window调用的。而window上时没有age这个属性的。

那我们再看一下箭头函数，箭头函数中的this是和调用者无关，指向的是定义箭头函数所在位置作用域的this

<button>按钮1</button> <script> document.querySelector('button').onclick = () => { let obj = { age: 18, say: () => { console.log(this) } } obj.say() } </script> //以下为控制台打印内容 Window {window: Window, self: Window, document: document, name: '', location: Location, …}

可以看到，打印出来的是Window对象。因为这两个都是箭头函数，所以this指向Window，没有问题。那我们修改下代码。

<button>按钮1</button> <script> document.querySelector('button').onclick = function() { let obj = { age: 18, say: () => { console.log(this) } } obj.say() } </script> //以下为控制台打印内容 <button>按钮1</button>

可以看到，我们把上层的函数改为普通函数，this就指向调用对象了。

是不是很简单呢？