JavaScript中的this指向问题

一、全局上下文

  全局运行环境中（在任何函数体外部），this指代全局对象，无论是否在严格模式下，在浏览器中，全局对象指的是window对象。

二、函数上下文

1.直接调用

  非严格模式下的this指向

  非严格模式下，this的值不会在函数执行时被设置，默认设置为全局对象window

function foo(){
  return this;
}
foo() === window; // true

  严格模式下的this指向

  严格模式体现了JavaScript更合理更安全更严谨的发展方向，它对于JavaScript的语法和行为都做了一些改变，在this指向方面:

  一般认为，严格模式下函数内部的this不允许指向全局对象。[划重点：是函数体是否处于严格模式，本身指向全局的this是没有问题的]

  举个例子对比说明一下：

<script>
        'use strict'
        console.log(this);
</script>
//控制台输出：window

<script type="text/javascript">
        'use strict';
        function F() {　　　　
            console.log(this);　        
        };
        F();
</script>
//控制台输出 undefined

  下面演练学习成果~：
  先看一个简单的示例

function f(){
	return !this;
}
//【正常模式】返回的是false,在这里this指向全局对象window,所以 !this 等于false
function f(){
	"use strict"
	return !this;
}
//【严格模式】返回的是true,严格模式下函数内部this值为undefined,所以 !this 等于true

  面试题练手

'use strict';
var name = "caibaojian.com";
var person = {
    name: "kang",
    pro: {
        name: "Michael",
        getName: function() {
            console.log(this);
            return this.name;
        }
    }
};
console.log(person.pro.getName()); 
var pepole = person.pro.getName;
console.log(pepole()); 

  输出结果如下：

  【分析】

严格模式，对象函数内部的this不指向window，谁调用就指向谁，为空的话就是undefined。所以第一次打印的this指向pro对象，this.name自然也就是Michael
第二次打印,先将person.pro.getName赋给了全局作用域下的people，此时this会指向window，所以调用people()时，因为处于严格模式下，自然打印this会输出undefined，this.name更是cannot read property了。

2.对象方法中的this

  this的绑定只受最靠近成员引用的影响

var obj = {
  prop: 37,
  foo: function() {
    return this.prop;
  }
};
console.log(obj.foo()); // 37
//obj对象调用foo()所以this指向obj

3.作用域链中的this

  如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象

var prop = 49;
var obj = {
  prop: 37,
  foo: function() {
    return function(){
        return this.prop;
    }
  }
};
console.log(obj.foo()());//49
//产生作用域链，this指向的是看不到的作用域对象，会被浏览器解析为window，所以输出的是window对象中的prop=49

4.构造函数中的this

  当一个函数被当做构造函数使用时（使用new关键字）,它的this将与被创建的新对象绑定

function Fn(){
  this.a = 37;
}
var obj = new Fn();
console.log(obj.a); // 37

function Foo(){
  this.a = 37;
  return { a: 38 };
}
obj = new Foo();
console.log(obj.a); // 38

另外，箭头函数不绑定this，执行它会捕获所在上下文的定义处的this值作为自己的this值，至于箭头函数的上下文环境中的this指向可根据上述情况进行判断

【推荐】浅显易懂的js教程
https://github.com/JoeHetfield/You-Dont-Know-JS