JavaScript This指向

1. 上下文是在函数调用的时候被创建的。
2. this 是组成上下文的一部分。

因此每次函数被调用的时候就会产生一个新的 this。具体的分为下面几种。

1. 作为普通函数在全局环境中被调用

在全局环境里面，this 永远指向 window，因此在全局环境里作为普通函数被调用的时候，this 也是指向 window(这里仅指在浏览器环境下，不考虑Node)。

var name = 'Abby';function fn() {    console.log(this); //window    console.log(this.name); //Abby}fn();

这里，fn 其实是作为 window 的一个方法被调用的，而 name 也是 window 的一个属性，因此 fn() 实际上就是 window.fn()。

2.作为对象的属性被调用

如果函数作为一个对象的属性方法，并且被调用的时候，this 就指向这个对象。

var name = 'Jane';var person = {    name: 'Abby',    sayName: function() {           console.log(this.name);}};var sayNameWin = person.sayName;person.sayName(); //AbbysayNameWin(); //Jane   作为 window 的方法被调用的

在这里，sayName 方法是作为 person 的一个属性方法被调用的，因此指向 person，但是 sayNameWin 方法却是作为 window 的一个属性方法被调用的，因此 console.log 的值是 Jane。我们再看一个变形。

var person1 = {    name: 'Jane',    sayName: function() {   console.log(this.name)}}var person2 = {    name: 'Abby',    sayName: person1.sayName}person2.sayName(); //Abby  作为 person2 的属性方法被调用

但是当在在对象方法中再定义函数，这时候 this 又是 window 。

var name = 'Jane';var person = {    name: 'Abby',    sayName: function () {        function fn(){            console.log(this);      //window            console.log(this.name);    //Jane        }        fn();    }}person.sayName();

如果想让 this 指向 person 的话，只需要用 that 保存下来 this 的值即可，也可以使用 apply 等改变 this。

var name = 'Jane';var person = {    name: 'Abby',    sayName: function () {    var that = this;        function fn(){            console.log(that);      //Object {name: "Abby"}            console.log(that.name);    //Abby        }        fn();    }}person.sayName();

3. 作为构造函数被调用

作为构造函数被调用的时候，this 代表它即将 new 出来的对象。

function Person(name) {    this.name = name;    console.log(this);  //Person {name: "Abby"}}var person = new Person('Abby');console.log(person.name);  //Abby

如果不加 new,表示即作为普通函数调用，指向 window

function Person(name) {this.name = name;console.log(this);  //window}Person('Jane'); console.log(window.name); //Jane

4. 作为 call/apply/bind 方法的调用

作为 call/apply/bind 方法被调用的时候指向传入的值

var person = {    name: 'Abby'};function fn() {    console.log(this); //Object {name: "Abby"}    console.log(this.name); //Abby}fn.apply(person);

5. 严格模式下面

在严格模式下，在全局环境中执行函数调用的时候 this 并不会指向 window 而是会指向 undefined

'use strict';function person() {  console.log(this); //undefined};person();

6. setTimeout、setInterval中的this

《 javascript 高级程序设计》中写到：“超时调用的代码都是在全局执行域中执行的”。setTimeout/setInterval 执行的时候，this 默认指向 window 对象，除非手动改变 this 的指向。

var name = 'Jane';function Person(){    this.name = 'Abby';    this.sayName=function(){    console.log(this); //window        console.log(this.name); //Jane        };    setTimeout(this.sayName, 10);    }var person=new Person();

在这里如果想改变 this，可是使用 apply/call/bind 等，也可以使用 that 保存 this.

setTimeout 中的回调函数在严格模式下也指向 window 而不是 undefined (是个坑)

因为 setTimeout 的回调函数如果没有指定的 this ，会做一个隐式的操作，将全局上下文注入进去，不管是在严格还是非严格模式下。

'use strict';function person() {  console.log(this);  //window}setTimeout(person, 0);

7. 构造函数 prototype 属性

var name = 'Jane';function Person(){    this.name = 'Abby';}Person.prototype.sayName = function () {    console.log(this);        // Person {name: "Abby"}    console.log(this.name);      // Abby}var person = new Person();person.sayName();

在 Person.prototype.sayName 函数中，this 指向的 person 对象。即便是在整个原型链中,this 也代表当前对象的值。

8. Eval函数

在 Eval 中，this 指向当前作用域的对象。

var name = 'Jane';var person = {    name: 'Abby',    getName: function(){        eval("console.log(this.name)");    }}person.getName();  //Abby    var getNameWin=person.getName;getNameWin();  //Jane

在这里，和不使用 Eval ，作为对象的方法调用的时候得出的结果是一样的。

9. 箭头函数

箭头函数里面 this 始终指向外部对象，因为箭头函数没有 this，因此它自身不能进行new实例化，同时也不能使用 call, apply, bind 等方法来改变 this 的指向。

var person = {    name: 'Abby',    sayName: function() {        var fn = () => {            return () => {                console.log(this);   //Object {name: "Abby"}                console.log(this.name); //Abby            }        }        fn()();    }}person.sayName();