普通函数调用的上下文

Posted 2020-08-23 烛火星光

 

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