this 解惑

chwan

在 JavaScript 函数里常见有 this 的使用,但是 this 有一些行为始终令人捉摸不定,其实了解了 this 工作机制就不会有这些疑惑。

无论是否在严格模式下,在任何函数体外部 this 都指向全局对象,我们现在讨论的是函数表达式、函数声明中的this。
另:此文情形中的函数表达式、函数声明不包括构造函数(构造函数的 this 一般都比较明确,指向隐含定义即将返回的一个新对象)以及 DOM 事件处理函数(this 指向触发事件的 DOM 元素),因为他们的 this 不令人迷惑。

箭头函数出现前

this 只是一个引用值,在 bar.foo() 的时候,foo 里的 this 被系统定义为 bar。

如果把 bar.foo 给赋值给 baz,baz直接调用系统就会认定 baz 没有上下文,baz 里的 this 就没有被定义。这时 this 的取值在严格模式下 undefined,在非严格模式浏览器环境为 window。

除了 bar.foo() 这种调用方式,其他调用下函数里 this 统统是没有值的(有定义)。

  let obj = {}; 
  obj.func = function () {
    'use strict'; 
    console.log(this);
    (function(){
      console.log(this)
    }()); 
  };
  obj.func();
------------------------------
 输出: 
  {func: ƒ}
  undefined

注意!this 的值是不常有的,只有当函数有上下文环境时,如 a.b() 这种格式下,this 值的存在才是合理,这种环境可以理解为 a 对象属性名 b 对应的函数,这时该函数内部的 this 才被系统定义指向 a,且只在运行阶段

另一种情形,如果不是 a.b() 这样调用,在合理情况下,this 的值应当是不存在的,事实上严格模式下系统也是统统这样实现的,系统不会为这样的调用设定内部变量 this 的值,统统 undefined,统统 undefined。

箭头函数出现后

箭头函数是 ES6 中新增的定义方法,一般用来代替临时声明的匿名函数,可以使函数表达式 const a = b => c, 也可以是 b => c, 它们表示你主动放弃了函数令人飘忽不定的this,以及 arguments,放弃了系统推断上下文自动赋值给 this,无论怎么调用就算是 a.b(),函数内部变量都是没有 this 的,注意!是没有 this 的,this 始终指向的是外部词法环境引用的 this, 这里的 this 从外部词法环境逐步往外找直到全局词法环境,找不到为 undefined。

阅读 236

头发长好快
学习分享

Always bet on JavaScript.

9 声望
1 粉丝
0 条评论
你知道吗?

Always bet on JavaScript.

9 声望
1 粉丝
文章目录
宣传栏