---

谈谈 This 对象的理解。

在 ES5 中，其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象>，来，跟着我朗读三遍：this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象，this 永远指向最后调用它的那个对象。记住这句话，this 你已经了解一半了。

this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模
式来判断。

this
谈一谈你对this的理解，以及在各种环境下的this
在浏览器里，在全局范围内this指向window对象
在函数中，this永远指向最后调用他的那个对象(箭头函数除外)。
在构造函数中，this指向new出来的新对象。
call、apply、bind中的this被强绑定在指定的那个对象上。
箭头函数this为父作用域的this，不是调用时的this。

在我之前的一篇文章你不知道的执行上下文中有提到过 this，对那篇文章进行概括就是：

1. 上下文是在函数调用的时候被创建的。
2. this 是组成上下文的一部分。
   因此每次函数被调用的时候就会产生一个新的 this。具体的分为下面几种。

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

在全局环境里面，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()。

作为对象的属性被调用

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

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

person.sayName(); //Abby
sayNameWin(); //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();

作为构造函数被调用

作为构造函数被调用的时候，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

作为 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);

严格模式下面

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

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

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);

构造函数 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();

参考文章

十分钟读懂 JavaScript 中的 this