进入正题,this 对象在 js 中是很常见,但是在这里也经常会出错,本文将对常见的 this 对象的情况做一些总结
this 对象是在函数运行时,基于函数的执行环境绑定的。其实这句话的本质就是,谁调用了函数,this 就指向谁
具体的来说,通常有以下几种情况:
- //例子1
- function A() {
- console.log(this)
- }
- A();//Window
上面的例子很简单,函数 A 在全局环境中执行,也就是全局对象 Window 调用了函数。此时 this 指向 Window
- //例子2
- var b = {
- getThis:function(){
- console.log(this)
- }
- }
- b.getThis()//b
到这里我们举的例子都比较简单易懂,接下来来一个有意思的:
- //例子3
- var c = {
- getFunc: function() {
- return function() {
- console.log(this)
- }
- }
- }
- var cFun = c.getFunc() cFun() //Window
这个例子和前一个例子不一样,运行 c.getFunc() 时,首先返回的是一个匿名函数,我们将这个函数赋值给 cFun,接着在全局环境中调用了 cFun(),所以此时 this 指向的还是 Window。
如果我们一定要让这里返回的是 c 对象呢?在开头我们说过,this 对象是在函数执行时确定的,在例子 3 中,执行 c.getFunc() 时,this 对象指向的还是 c,所以我们只要保持住这个 this 就好了, 对上面的代码稍微改动:
- //例子4
- var c = {
- getFunc: function() {
- var that = this //在这里保留住this
- return function() {
- console.log(that)
- }
- }
- }
- var cFun = c.getFunc() cFun() //c
这也就是我们经常可以在一些代码中看到 var self = this 或者 var that = this 之类的原因了。
此时 this 对象通常指向函数中指定的 this 值 (注意这里的通常 2 字,考试要考的)
call 和 apply 算是老生常谈,但还是稍微介绍下,怕新同学可能没接触过(其实是为了凑点字数),拿 call 来说,语法是这样的
- fun.call(thisArg, arg1, arg2, ...)
这个方法怎么用呢,看下面的例子:
- //例子5
- var d = {
- getThis: function() {
- console.log(this)
- }
- }
- var e = {
- name: 'e' //(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
- }
- d.getThis.call(e) //e
在这里我们就可以看出 call 函数的意思了: 指定一个对象 o1 去调用其他对象 o2 的方法,此时 this 对象指向 o1
好了,那为什么前面我们说通常呢?因为,这里的 thisArg 是可以指定为 null 和 undefined 的。请看:
- //例子6
- var d = {
- getThis:function(){
- console.log(this)
- }
- }
- d.getThis.call(null)//Window
- d.getThis.call(undefined)//Window
此时的 this 指向全局对象 Window
es6 中的箭头函数现在也用的比较频繁,但是有个需要注意的点是:
函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
其实出现这种情况的根本原因是: 箭头函数没有 this 对象,所以箭头函数的 this 就是外层代码的 this
- //例子7
- var f = {
- getThis:()=>{
- console.log(this)
- }
- }
- f.getThis()//Window
这个例子和前面例子 2 是基本一样的,只是把普通函数改写成箭头函数,但是此时的 this 对象已经指向了外层的 Window。
考虑到这一点可能不好理解,我们再看几个例子:
- //例子8
- var g = {
- getThis:function(){
- return function(){console.log(this)}
- }
- }
- var h = {
- getThis:function(){
- return ()=> console.log(this)
- }
- }
- g.getThis()()//Window
- h.getThis()()//h
这个例子里,g 的 getThis 写法就和之前的例子 3 一样,由于函数在全局环境中运行,所以此时 this 指向 Window;h 的 getThis 使用了箭头函数,所以 this 指向了外层代码块的 this 所以,此时 this 指向的是 h。
小结一下,
然后依然是每次都一样的结尾,如果内容有错误的地方欢迎指出;如果对你有帮助,欢迎点赞和收藏,转载请征得同意后著明出处,如果有问题也欢迎私信交流,主页添加了邮箱地址~ 溜了
来源: https://segmentfault.com/a/1190000012704180