高端前端彻底搞定this指向（详解）

news2024/11/19 15:17:51

这篇文章只告诉你三件事情，this,this,还TM的是this。

1，this在javascript中是可有可无的

大家在学习javascript的时候，肯定或多或少看到过了很多代码。其中肯定会发现this的身影。我们知道他是代表的指向，可是让人迷惑的是this的指向怎么这么善变呢？恰似你的女朋友。真是很深啊，我来教你从零了解你的女朋友。额，了解this。

var obj = {
  name: "zlk",
  foo() {
    console.log(this.name + " foo");
  },
  bar() {
    console.log(obj.name + " bar");
  }
}
    obj.bar()
    obj.foo()

发现了嘛，可有可无的this。一点卵用都没有，所以学不学的吧。但是这样做有一个很大的弊端：如果我将对象obj的名称换成了info，那么所有的方法中的obj都需要换成info。this就不需要换哦。

2，正儿八经讲this指向问题

this指向问题一共有四种不同，让我一一道来。

一，默认绑定

该函数直接被调用，并没有进行任何的对象关联；
这种独立的函数调用会使用默认绑定，通常默认绑定时，函数中的this指向全局对象（window）；

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

foo();

所有的函数调用都没有被绑定到某个对象上；

// 2.案例二:
function test1() {
  console.log(this); // window
  test2();
}

function test2() {
  console.log(this); // window
  test3()
}

function test3() {
  console.log(this); // window
}
test1();

在真正函数调用的位置，并没有进行任何的对象绑定，只是一个独立函数的调用；我们不要常看this在哪里或者是this的环境，我们要看的是最终的调用位置，是什么形式调用的。

function foo(func) {
  func()
}

var obj = {
  name: "zlk",
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

二，隐士绑定

foo的调用位置是obj.foo()方式进行调用的
那么foo调用时this会隐式的被绑定到obj对象上

function foo() {
  console.log(this); // obj对象
}

var obj = {
  name: "zlk",
  foo: foo
}

obj.foo();

我们通过obj2又引用了obj1对象，再通过obj1对象调用foo函数；
那么foo调用的位置上其实还是obj1被绑定了this；

function foo() {
  console.log(this); // obj1对象
}

var obj1 = {
  name: "obj1",
  foo: foo
}

var obj2 = {
  name: "obj2",
  obj1: obj1
}

obj2.obj1.foo();

三，显示绑定

通过call或者apply绑定this对象

显式绑定后，this就会明确的指向绑定的对象

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

foo.call(window); // window
foo.call({name: "zlk"}); // {name: "zlk"}
foo.call(123); // Number对象,存放时123

obj.myFun.call(db)；　　　　// 德玛年龄 99
obj.myFun.apply(db);　　　 // 德玛年龄 99
obj.myFun.bind(db)();　　　// 德玛年龄 99

四，new绑定

JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。

使用new关键字来调用函数时，会执行如下的操作：

1.创建一个全新的对象；
2.这个新对象的隐士原型_ proto _会被赋值为这个函数的显示原型prototype；(如果不理解先跳过，不影响，下一章会讲原型与原型链的继承等)
3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
4.如果函数没有返回其他对象，表达式会返回这个新对象；

// 创建Person
function Person(name) {
  console.log(this); // 我们模拟出个对象Person {}
  this.name = name; // 这里的this会绑定到Person {} 讲外面的值传过来赋值后Person{name: "why"}
}

var p = new Person("why"); //我们在new一个构造函数的时候，这个函数会模拟出一个对象，返回后p接收了这个对象
console.log(p);

绑定优先级

默认规则的优先级最低

显式绑定优先级高于隐式绑定

new绑定优先级高于隐式绑定

new绑定优先级高于bind

new绑定 > 显式绑定（bind）> 隐式绑定 > 默认绑定

ES6箭头函数中this指向

在ES6中新增一个非常好用的函数类型：箭头函数

这里不再具体介绍箭头函数的用法，可以自行学习。

箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。意思就是箭头函数没有this指向这种说法，里面的this会指向上层作用域。这里有一点要注意的，无论你最终调用位置是什么方式，箭头函数的this都指向上层作用域。比如你call()自定义this指向。或者隐士绑定obj.foo()去调用的，这个this不指向call()你自定义的对象或方法，也不指向obj。它会指向箭头函数的上层作用域。

看个例子

这两段代码执行效果一样。

var obj = {
  data: [],
  getData: function() {
    var _this = this;
    setTimeout(function() {
      // 模拟获取到的数据
      var res = ["abc", "cba", "nba"];
      _this.data.push(...res);
    }, 1000);
  }
}

obj.getData();

var obj = {
  data: [],
  getData: function() {
    setTimeout(function() {
      // 模拟获取到的数据
      var res = ["abc", "cba", "nba"];
      this.data.push(...res);
    }, 1000);
  }
}

obj.getData();