js中this对象用法分析

前端之家收集整理的这篇文章主要介绍了js中this对象用法分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

this对象是在函数运行时,基于函数的执行环境绑定的。

其实这句话的本质就是,谁调用函数,this就指向谁

具体的来说,通常有以下几种情况:

全局函数

在全局环境中,this指向Window

上面的例子很简单,函数A在全局环境中执行,也就是全局对象Window调用函数。此时this指向Window

对象方法

作为对象方法调用时,this指向调用方法的对象

到这里我们举的例子都比较简单易懂,接下来来一个有意思的:

这个例子和前一个例子不一样,运行c.getFunc()时,首先返回的是一个匿名函数,我们将这个函数赋值给cFun,接着在全局环境中调用了cFun(),所以此时this指向的还是Window。

如果我们一定要让这里返回的是c对象呢?在开头我们说过,this对象是在函数执行时确定的,在例子3中,执行c.getFunc()时,this对象指向的还是c,所以我们只要保持住这个this就好了,对上面的代码稍微改动:

这也就是我们经常可以在一些代码中看到var self = this或者var that = this之类的原因了。

call和apply

此时this对象通常指向函数中指定的this值(注意这里的通常2字,考试要考的)

call和apply算是老生常谈,但还是稍微介绍下,怕新同学可能没接触过(其实是为了凑点字数),拿call来说,语法是这样的

这个方法怎么用呢,看下面的例子:

属性只是因为觉得孤零零的太难看了~~) } d.getThis.call(e)//e

在这里我们就可以看出call函数的意思了:指定一个对象o1去调用其他对象o2的方法,此时this对象指向o1

好了,那为什么前面我们说通常呢?因为,这里的thisArg是可以指定为null和undefined的。请看:

此时的this指向全局对象Window

箭头函数

es6中的箭头函数现在也用的比较频繁,但是有个需要注意的点是:

函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

其实出现这种情况的根本原因是:箭头函数没有this对象,所以箭头函数的this就是外层代码的this

{ console.log(this) } } f.getThis()//Window

这个例子和前面例子2是基本一样的,只是把普通函数改写成箭头函数,但是此时的this对象已经指向了外层的Window。

考虑到这一点可能不好理解,我们再看几个例子:

console.log(this) } } g.getThis()()//Window h.getThis()()//h

这个例子里,g的getThis写法就和之前的例子3一样,由于函数在全局环境中运行,所以此时this指向Window;h的getThis使用了箭头函数,所以this指向了外层代码块的this所以,此时this指向的是h。

总结

一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向Window

在call和apply函数中this指向指定的对象,如果指定的对为undefined或者null,那么this对象指向Window

在箭头函数中,this对象等同于外层代码块的this

然后依然是每次都一样的结尾,如果内容错误的地方欢迎指出;如果对你有帮助,欢迎点赞和收藏,感谢你对编程之家的支持

原文链接:https://www.f2er.com/js/34328.html

猜你在找的JavaScript相关文章