JavaScript中的this

JavaScript的this

总结关键点

1. this始终指向调用该函数的对象；
2. 若没有指明调用的对象，则顺着作用域链向上查找，最顶层为global（window）对象；
3. 箭头函数中的this是定义函数时绑定的，与执行上下文有关
4. 简单对象（非函数、非类）没有执行上下文；
5. 类中的this，始终指向该实例对象；
6. 箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

关于Var对this的影响

通过var（函数作用域）声明的变量code会绑定到window上；如果使用let（块作用域）声明变量code，则不会绑定到window上

function f() {
    console.log( this.code );
}
var code = 200;
f(); // 200  此时的this指向的是window对象
code = 404;//此时将window对象下的code的值修改为404
f(); // 404  此时的this还是指window对象

分析一个例子

function doF(fn) {
    this.code = 404;
    fn();
}

function f() {
    console.log(this.code);
}

let obj = {
    code: 200,
    f: f
};

var code = 500;
doF(obj.f); // 404

最关键的东西就是——看哪个对象调用了这个最终用于输出的函数f()

逐步分析
最外部windows对象下面有 obj这个对象和两函数 doF 和 f
同时
1.obj对象中的局部变量 f 指向 f() 函数
2.doF函数会调用参数中的函数f()
3.f()打印输出code
此时 由于var的影响 window对象里的code = 500 obj对象里的code = 200

任务具体流程
1.obj.f 作为 doF函数的参数传入，doF函数调用 f() 函数
此时，由于doF是由window调用的(查看总结第一条)，所以这里的this指的是window对象，且this.code = 404导致外部window对象的code = 404
2.接下来doF函数通过参数调用 f() 函数 f()函数里的this还是指调用doF的对象window
所以最终打印的值也就还是 404

箭头函数

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。
箭头函数中的this是定义函数时绑定的，而不是在执行函数时绑定。若箭头函数在简单对象中，由于简单对象没有执行上下文，所以this指向上层的执行上下文；若箭头函数在函数、类等有执行上下文的环境中，则this指向当前函数、类

箭头函数案例

<script>

  console.log(this) // 此处为 window
  // 箭头函数
  const sayHi => function() {
    console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
  }
  // 普通对象
  const user = {
    name: '小明',
    // 该箭头函数中的 this 为函数声明环境中 this 一致
    walk: () => {
      console.log(this)
    },

    sleep: function () {
      let str = 'hello'
      console.log(this)
      let fn = () => {
        console.log(str)
        console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
      }
      // 调用箭头函数
      fn();
    }
  }

  // 动态添加方法
  user.sayHi = sayHi

  // 函数调用
  user.sayHi()
  user.sleep()
  user.walk()
</script>

特殊例子

var code = 404;

let status = {
    code : 200,
    getCode : function() {
            return function(){
                return this.code;
        };
    }
};

console.log(status.getCode()()); // 404

//在执行return返回的function函数时 还是由window调用  所以this 指代window

如果想让 this 指代 status对象 则需要使用 let 定义一个其他属于status对象的对象
var code = 404;

let status = {
    code : 200,
    getCode : function() {
        let that = this;
        return function(){
            return that.coe;
        };
    }
};

console.log(status.getCode()()); // 200