JS的this句型

var obj = {
  id: "awesome",
  cool: function coolFn() {
      setTimeout(function (){
          console.log("awesome?" + this.id);
      }, 100);

  },
};
var id = "not awesome";
obj.cool();

上面的代码我们创建了一个新的obj的对象， 其中 有方法cool和settimeout匿名方法， 如果正常执行 这个this指向错误， 是undefined。
所以如果你想让他表现正常， 我们需要进去cool方法中把this要把它带过来， 所以我们这样改变

var obj = {
  id: "awesome",
  cool: function coolFn() {
      let self = this;
      setTimeout(function (){
          console.log("awesome?" + self.id);
      }, 100);

  },
};
var id = "not awesome";
obj.cool();

一般来说， 就是this只能渗透到cool方法中， 无法转到延迟函数的匿名函数。
但是呢， 这样写是不是太麻烦了， 定义新的this， 所以箭头函数可以帮助我们解决这个问题。

在此处插入一段代码。

ES6箭头功能

使用箭头功能如下：

var obj = {
  id: "awesome",
  cool: function coolFn() {
      setTimeout(() => {
          console.log("awesome?" + this.id);
      }, 100);
  },
};
var db = {
  id: "haha",
};
var id = "not awesome";
obj.cool();

事实上，除了箭头函数，还有更好的解决方案， 就是使用bind()

var obj = {
  id: "awesome",
  cool: function coolFn() {
    setTimeout(
      function lookLike() {
        console.log("awesome ?" + this.id);
      }.bind(this),
      100
    );
  },
};
obj.cool();

拓展

也许每个人主要都到了， 我在外部 定义了全局变量 id， 所以这个时候我会改变这个this.id指向更改为普通id呢， 让我们试试看(拓展)

var obj = {
  id: "awesome",
  cool: function coolFn() {
      setTimeout(() =>{
          console.log("awesome ?" + id);
      }, 100);

  },
};
var db = {
  id: "haha",
};
var id = "not awesome";
obj.cool();

也许每个人主要又来了。我写了一个db对象中有id： haha， 所以我们使用call绑定结果，
在使用call在我们放这个之前 id 前 加一个this， 完成指向

var obj = {
  id: "awesome",
  cool: function coolFn() {
      setTimeout(() =>{
          console.log("awesome ?" + this.id);
      }, 100);

  },
};
var db = {
  id: "haha",
};
var id = "not awesome";
obj.cool.call(db);

这个call将原指向obj的this， 指向了db，所以会导致这样的结果

我希望这篇文章能引起你的思考， 什么更好demo或者可以分享意见， 互相进步！