全局的 this(浏览器)

console.log(this.document === document);  //true
console.log(this === window); //true

this.a = 37;  // 相当于创建了一个全局变量 a
console.log(window.a); //37

一般函数的 this(浏览器)

function f1() {
	return this;
}
f1() === window; //true, global object
这里在浏览器就是 window, 如果是 node 中就是 global 全局对象

------------------
严格模式下: 一般函数调用的 this 是指向 undefined

function f2() {
	"use strict"
	return this;
}
f2() === undefined; //true

作为对象方法的函数 this

更常见的使用 this 的时候是将作为对象方法去用

函数如果作为对象的属性,比如
var o = {
  prop:37,
  f:function() {
    return this.prop;
  }
};

console.log(o.f());  //logs 37

o 有一个属性 f, 值是一个函数, 这样一种方式也叫做对象的方法.
这种作为对象的方法去调用的时候,
比如 o.f() 调用的情况下, this 一般指向对象 o,就相当于 return o.prop
所以返回 37

-------------------------------

上面这种是定义成函数字面量的这种对象,
如果这里定义一个对象 o, 一个独立的 independent 函数, 比如

var o = {prop:37},

function independent() {
  return this.prop
}

o.f = independent;

console.log(o.f()) // 37

如果直接调用 independent 函数的话, 里面的 this 指向浏览器里的window
如果通过赋值方式临时创建一个属性 f, 并且指向为这个函数对象的时候,拿到 37
所以这里不是看函数是怎么创建的, 而是只要将该函数作为对象的方法去做 o.f 调用的话
这个 this 就指向该对象

对象原型链上的 this

创建一个对象 o, 里面有一个属性 f, 并且函数作为对象属性的值;
再创建一个对象 p, 该对象是空对象, 并且他的原型指向 o
通过 p.a 和 p.b 创建对象上的属性, 
调用原型上的方法的时候, this.a 和 this.b 仍然取到对象上的 a 和 b
这里注意的是 p 的原型才是 o
所以调用 p.f 的时候调用的对象原型链上 o 这个函数上的属性f

var o = {f:function() { return this.a + this.b }};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()) //5

get/set 方法与 this

也指向 get 和 set 方法所在的对象里面

构造器中的 this

正常如下调用是指向全局对象, 在浏览器里是 window
function MyClass() {
  this.a = 37;
}

但是如果用 new 把它作为构造器来调用的话, 
这里 this 指向原型为 MyClass.prototype 属性这样一个空对象
调用的时候由于 this.a = 37赋值, 所以最后的 this 作为返回值,
所以 o 就有 a 属性

var o = new MyClass();
console.log(o.a) //37

类似
function C2() {
	this.a = 37;
	return { a: 38 }
}
这时函数里有了 return 语句, 返回值返回一个对象
那么这时o.a 就不是 37 了
o = new C2();
console.log(o.a) //38

call / apply 方法与 this

除了不同的调用方式以外, 每一个函数对象也有一些方法可以去修改函数执行时的 this

function add(c,d) {
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

add.call(o,5,7); // 1+3+5+7 = 16
add.apply(o,[10,20]); //1+3+10+20 = 34

定义一个变量 o 有两个属性 a 和 b,
通过对象的 call 方法
(第一个参数是想作为 this 的对象, 
这里是 o, 5 和 7 是想要添加的参数, 5 赋值给 c, 7 赋值给 d)
最终调用的结果是 16

call 和 apply 基本没差别, 差别在于传参方式. 

何时用 call 和 apply?

function bar() {
  console.log(Object.prototype.toString.call(this))
}
这里想调用Object.prototype.toString, 但是想把 this 指定的时候

bind方法与 this

function f() {
  return this.a
}

var g = f.bind({a:"test"});
console.log(g()); //test

有一个函数对象 f,
通过 bind 方法中有一个参数对象 a, 
这个对象就是想将某一个对象作为 this 的时候, 来传入的对象
这样就拿到一个新的 g 对象, 这个 g 对象在调用的时候
就已经指向了 bind 参数所以拿到 a 的 test

var o = {a:37, f: f,g : g};
console.log(o.f(),o.g()) //37, test