首页 > 代码库 > 普通函数调用的上下文

普通函数调用的上下文

 

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来调用该函数?那么这个上下文绑定究竟意义何在?

 

普通函数调用的上下文