JavaScript 中的 this 指向
今天看到有些同学对this指向有疑问,总结了下。
首先,在普通函数中,this是指向调用此函数的对象。下面我们来看几个例子。
//以下为控制台打印内容 true true
可以看到,当我们点击这两个按钮时,返回的都是 true,这个相信大家都应该知道。那么我们看接下来的一个例子
//以下为控制台打印内容
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
当我们点击的时候,打印出来的是 Window 对象,这个pr函数通过上面的button点击调用,打印出来的不应该是button按钮吗?
其实这段代码我们可以这么理解
//以下为控制台打印内容 18
可以看到,打印出来的是 18 。这个相信大家没什么疑虑。
那我们给它变一变
//以下为控制台打印内容 undefined
这个就成了undefined,为什么呢?因为fn这个函数,也就是say这个函数,是window调用的。而window上时没有age这个属性的。
那我们再看一下箭头函数,箭头函数中的this是和调用者无关,指向的是定义箭头函数所在位置作用域的this
//以下为控制台打印内容
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
可以看到,打印出来的是Window对象。因为这两个都是箭头函数,所以this指向Window,没有问题。那我们修改下代码。
//以下为控制台打印内容
可以看到,我们把上层的函数改为普通函数,this就指向调用对象了。
是不是很简单呢?