javaScript的this详解

一、this 原理

参考：阮一峰的js的this原理

this指的是函数运行时所在的环境。为什么？

因为：内存的数据结构中，函数是一个单独的值，所以它可以在不同的环境（上下文）执行。所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

举例：obj.foo()是通过obj找到foo，所以就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数function(){}本身，所以foo()就变成在全局环境执行。

当属性的值是函数时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

举例：

// 函数还可以作为某个对象的方法调用，这时this就指这个上级对象。
obj = {
  name: 'a',
  getName: function () {
  // 函数没有执行的时候this不能判定指向哪，要根据上下文
    console.log(this.name);
  }
};

// 给obj.getName另取个名叫fn，fn是个指针指向obj.getName的函数
var fn = obj.getName;

// obj.getName()调用后this指向obj，输出'a'
obj.getName(); // a

// 将obj的getName赋值给fn，执行时this为window，window中没有name变量所以为undefined
fn();  // undefined

// 直接 执行！getName()，this也指向obj，打印了'a'
// 因为obj.getName()没有返回值（return），所以fn2是undefined
var fn2 = obj.getName(); // a，是obj.getName()执行console.log打印的，不是fn2的值哦
console.log(fn2); // undefined

console.log(fn === obj.getName); // true，前面有var fn = obj.getName
console.log(fn === fn2); // false，fn是一个函数，fn2是undefined

二、this 用法

参考：this的用法

/*
  参考：阮一峰http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
  待续补充：红宝书$7.2.2，P182
 */

// # this的用法

// this是在函数体内部 自动生成 的一个对象，只能在 函数体内部 使用
// this就是函数运行时所在的 环境对象。

//一、纯粹的函数调用
var x = 1;
function test() {
  console.log(this.x);
}
test(); // 1

// 二、作为对象方法的调用

function test() {
  console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1

// 三、作为构造函数调用
var x = 2;

function test() {
  this.x = 1;
}

// this指向新对象
var obj = new test();

console.log(x); // 2,全局变量x值没变

console.log(obj.x); // 1 ，this指向 obj

// 四、apply调用
// apply 作用是改变函数的调用对象，它的第一个参数 this 就表示 改变后的调用这个函数的对象
var x = 0;
function test() {
  console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;
// apply()的参数为空时，默认调用全局对象.
obj.m.apply(); // 0

// 传参后，this代表的是对象obj
obj.m.apply(obj); // 1