JS函数的this指向

为什么需要this？

本文已参与「新人创作礼」活动，一起开启掘金创作之路。在常见的编程语言中，几乎都有this这个关键字，但是JavaScript中的this和常见的面向对象语言中的this不太一样：

常见面向对象的编程语言中，比如Java、C++、Swift、Dart等等一系列语言中，this通常只会出现在类的方法中。
也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象。
但是JavaScript中的this更加灵活，无论是它出现的位置还是它代表的含义

下面的代码中，我们通过对象字面量创建出来一个对象，当我们调用对象的方法时，希望将对象的名称一起进行打印。如果没有this，那么我们的代码会是下面的写法：
```
var obj = {
  name: "why",
  running: function() {
    console.log(obj.name + " running");
  },
  eating: function() {
    console.log(obj.name + " eating");
  },
  studying: function() {
    console.log(obj.name + " studying");
  }
}
```
在方法中，为了能够获取到name名称，必须通过obj的引用（变量名称）来获取。但是这样做有一个很大的弊端：如果我将obj的名称换成了info，那么所有的方法中的obj都需要换
```
var obj = {
  name: "why",
  running: function() {
    console.log(this.name + " running");
  },
  eating: function() {
    console.log(this.name + " eating");
  },
  studying: function() {
    console.log(this.name + " studying");
  }
}
```
所以我们会发现，在某些函数或者方法的编写中，this可以让我们更加便捷的方式来引用对象，在进行一些API设计时，代码更加的简洁和易于复用。

this指向什么呢？

this在全局作用下指向 window;
但是，开发中很少直接在全局作用于下去使用this，通常都是在函数中使用。

所有的函数在被调用时，都会创建一个执行上下文：

这个上下文中记录着函数的调用栈、AO对象等；this也是其中的一条记录；

this绑定规则

绑定一：默认绑定；
绑定二：隐式绑定；
绑定三：显示绑定；

绑定四：new绑定；

规则一：默认绑定

默认绑定一般是独立函数调用，独立的函数调用我们可以理解成函数没有被绑定到某个对象上进行调用；

案例一：普通函数调用该函数直接被调用，并没有进行任何的对象关联；

//这种独立的函数调用会使用默认绑定，通常默认绑定时，函数中的this指向全局对象（window）；
function foo() {
  console.log(this); // window
}

foo();

案例二：函数调用链（一个函数又调用另外一个函数）所有的函数调用都没有被绑定到某个对象上；

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

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

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

案例三：将函数作为参数，传入到另一个函数中

function foo(func) {
  func()
}

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

foo(bar);

这些案例的实现方式虽然不同，但打印的结果都是window。原因非常简单，在真正函数调用的位置，并没有进行任何的对象绑定，只是一个独立函数的调用；

规则二：隐式绑定

另外一种比较常见的调用方式是通过某个对象进行调用的：也就是它的调用位置中，是通过某个对象发起的函数调用。

案例一：通过对象调用函数 foo的调用位置是obj.foo()方式进行调用的那么foo调用时this会隐式的被绑定到obj对象上

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

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

obj.foo();

案例二：案例一的变化通过obj2又引用了obj1对象，再通过obj1对象调用foo函数；那么foo调用的位置上其实还是obj1被绑定了this；

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

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

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

obj2.obj1.foo();

案例三：隐式丢失因为foo最终被调用的位置是bar，而bar在进行调用时没有绑定任何的对象，也就没有形成隐式绑定；相当于是一种默认绑定；

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

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

// 将obj1的foo赋值给bar
var bar = obj1.foo;
bar();//window

规则三：显示绑定

隐式绑定有一个前提条件：必须在调用的对象内部有一个对函数的引用（比如一个属性）；如果没有这样的引用，在进行调用时，会报找不到该函数的错误；正是通过这个引用，间接的将this绑定到了这个对象上；如果我们不希望在对象内部包含这个函数的引用，同时又希望在这个对象上进行强制调用，这时就用到了显示绑定。 JavaScript所有的函数都可以使用call和apply方法（这个和Prototype有关）。它们两个的区别这里不再展开；其实非常简单，第一个参数是相同的，后面的参数，apply为数组，call为参数列表；这两个函数的第一个参数都要求是一个对象，这个对象就是给this准备的。在调用这个函数时，会将this绑定到这个传入的对象上。因为上面的过程，我们明确的绑定了this指向的对象，所以称之为显示绑定。

通过call或者apply绑定this对象

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

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

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

如果我们希望一个函数总是显示的绑定到一个对象上可以使用bind()

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

var obj = {
  name: "why"
}

var bar = foo.bind(obj);

bar(); // obj对象
bar(); // obj对象
bar(); // obj对象

内置函数的绑定思考

有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。这些内置函数会要求我们传入另外一个函数；我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；这些函数中的this又是如何绑定的呢？

案例一：setTimeout setTimeout中会传入一个函数，这个函数中的this通常是window

setTimeout内部是通过apply进行绑定的this对象，并且绑定的是全局对象；

setTimeout(function() {
  console.log(this); // window
}, 1000);

案例二：数组的forEach 数组有一个高阶函数forEach，用于函数的遍历：在forEach中传入的函数打印的也是Window对象；这是因为默认情况下传入的函数是自动调用函数（默认绑定）；

var names = ["abc", "cba", "nba"];
names.forEach(function(item) {
  console.log(this); // 三次window
});

规则四： new绑定

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

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

1.创建一个全新的对象；

2.这个新对象会被执行Prototype连接；

3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；

4.如果函数没有返回其他对象，表达式会返回这个新对象；

// 创建Person
function Person(name) { 
console.log(this); // Person {} 
this.name = name; // Person {name: "why"}
}
var p = new Person(“why”);
console.log(p);

规则优先级

1.默认规则的优先级最低毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this 2.显示绑定优先级高于隐式绑定

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

4.new绑定优先级高于bind

new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高

new绑定可以和bind一起使用，new绑定优先级更高

this规则之外 – 忽略显示绑定

如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则：

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

var obj = {
  name: "why"
}

foo.call(obj); // obj对象
foo.call(null); // window
foo.call(undefined); // window

var bar = foo.bind(null);
bar(); // window

this规则之外 - 间接函数引用

另外一种情况，创建一个函数的间接引用，这种情况使用默认绑定规则。

赋值(obj2.foo = obj1.foo)的结果是foo函数；

foo函数被直接调用，那么是默认绑定；

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

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

var obj2 = {
  name: "obj2"
}

obj1.foo(); // obj1对象
(obj2.foo = obj1.foo)();  // window

this规则之外 – ES6箭头函数

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

箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。

var name = 'window'
var person1 = {
  name: 'person1',
  foo: function () {
    return () => {
      console.log(this.name)
    }
  }
}
person1.foo()();//person1

JS函数的this指向

JS函数的this指向

为什么需要this？

this指向什么呢？

this绑定规则

规则一：默认绑定

规则二：隐式绑定

规则三：显示绑定

通过call或者apply绑定this对象

规则四： new绑定

规则优先级