普通函数调用的上下文

Posted 烛火星光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了普通函数调用的上下文相关的知识,希望对你有一定的参考价值。

 

javascript中函数一般分为四种调用方法:

1、普通的函数调用,最简单的形式。

2、作为方法调用,在对象上进行调用。

3、作为构造器进行调用,创建一个新对象。

4、通过apply和call方法进行调用。

而且在函数调用当中,会默认传递一个this,绑定到函数调用的上下文,如果仅仅是最简单的函数调用方法,则this会默认绑定到window。

今天,我们就在这里看一下this绑定到window的函数调用方法。

function outer() {
    console.log(this);
  }
outer();

  在chrome浏览器控制台上查看打印结果:

这是我们大家都理解的,没有任何问题。

所以把outer 当做window的属性,来调用,也能得到相同的结果。

window.outer();

很容易理解,也很容易接受。

我们继续:

function outer() {
   // console.log(this);
   function inner() {
      console.log(this);
   }
   inner()
 }
outer();

  继续在chrome浏览器控制台上查看打印结果:

  

结果依然是window,说明在这里inner也绑定了window为上下文,那么问题来了,我们能不能使用window.inner()的方式调用inner()呢?

function outer() {
      // console.log(this);
      function inner() {
        console.log(this);
      }
      inner()
    }
    outer();
    window.inner();

  查看结果:

类型错误,可是为什么呢?我们明明绑定到window上下文了,为什么在window上无法调用呢?

如果从作用域角度理解的话,在outer函数外面是无法调用私有作用域的inner函数的,好,那我们换一个调用位置

function outer() {
      // console.log(this);
      function inner() {
        console.log(this);
      }
      window.inner()
    }
    outer();

  看结果,结果依旧:

那么这究竟怎么回事?为什么上下文绑定到window上了,却无法使用window来调用该函数?那么这个上下文绑定究竟意义何在?

 

以上是关于普通函数调用的上下文的主要内容,如果未能解决你的问题,请参考以下文章

onActivityResult 未在 Android API 23 的片段上调用

函数this三种指向函数调用上下文模式递归闭包

箭头函数与普通函数的区别

片段中的 RecyclerView OnclickListener

调用模板化成员函数:帮助我理解另一个 *** 帖子中的代码片段

上下文调用模式