JavaScript中的【this】

一、this是什么–基于调用位置的上下文；调用位置不同，this值不同。

this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置（也就是函数的调用方式）！

var foo = "golbal foo";
var myObj = {foo : 'myObj foo'};
var say = function(){
	console.log(this.foo);
}
 
myObj.say = say;
myObj.say();	//结果：myObj foo
say();		//结果：golbal foo

二、为什么使用this

this提供了一种更优雅的方式来隐式“传递”对象引用，因此可以将API设计得更加简洁并易于复用。

var me = {
	name: "fenfei"
}; 
//不使用this，调用
function speak(name){
	console.log("Hello, I'm "+ name);
}
speak(me.name);		//Hello, I'm fenfei
 
//使用this，调用
function speak(){
	console.log("Hello, I'm "+ this.name);
}
speak.call(me);		//Hello, I'm fenfei

三. this的四大绑定规则

1. 默认绑定–函数调用类型：独立函数调用，this指向全局对象。在严格模式下，全局对象将无法使用默认绑定，因此this会绑定到undefined。

var a = "foo";
function foo(){
	"use strict";
	console.log(this.a);
}
foo();	// TypeError：this is undefined

2. 隐式绑定–调用位置是否有上下文对象，或者说被某个对象拥有或者包含

function foo(){
	console.log(this.a);
}
var obj1 = {
	a : 2,
	foo : foo
}
var obj2 = {
	a : 1,
	obj1 : obj1
}
obj2.obj1.foo();	//结果：2

当foo()被调用时，它的落脚点指向obj1对象，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
对象属性引用链中只有最顶层或者说最后一次层会影响调用位置。

3. 显示绑定
   call、apply

function foo(){
	console.log(this.a);
}
var obj = {	a:2 };
var bar = function(){
	foo.call(obj);
};
bar(); //2
setTimeout( bar, 1000);	//2
bar.call( window );	//2

创建了函数bar()，在其内部手动调用了foo.call(obj)，因此强制把foo的this绑定到了obj上。无论之后如何调用函数bar，总会手动在obj上调用foo。这种显示的强制绑定，称为“硬绑定”。

4. new绑定
   new调用函数会自动执行下面操作：
   （1）创建（或者说构造）一个全新的对象；
   （2）这个新对象会被执行[[原型]]连接；
   （3）这个新对象会绑定到函数调用的this；
   （4）如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象。

四、优先级

了解了函数调用中this绑定的四条规则，需要做的就是找到函数的调用位置并判断对应哪条规则。

1. 函数是否是new绑定？如果是，this绑定的是新创建的对象。
   var bar = new Foo();
2. 函数是否通过call、apply显示绑定或硬绑定？如果是，this绑定的是指定的对象。
   var bar = foo.call(obj);
3. 函数是否在某个上下文对象中隐式调用？如果是，this绑定的是那个上下文对象。
   var bar = obj.foo();
4. 上述全不是，则使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到全局window对象。
   var bar = foo();

五、绑定this注意点

1. 忽略this
   把null或undefined作为this的绑定对象传入call、apply、bind，调用时会被忽略，实际应用的是默认绑定规则！

function foo(){
	console.log(this.a);
}
var a = 1;
foo.call(null, 2);			//1
foo.apply(undefined, [3]);	//1

2. 间接引用

function foo(){
	console.log(this.a);
}
var a = 2;
var o = { a : 3,foo : foo};
var p = { a : 4};
o.foo();			//3
(p.foo = o.foo)();	//2 间接引用
var pfoo = o.foo;
pfoo();			//2 隐式丢失

六、详解如何确定this

1.（隐式绑定）如果某个对象中某个成员是个function，当从这个对象上调用这个方法时this指向当前对象。

var FenFei = {
	firstname:"li",
	lastname:"gang",
	timeTravel:function(year){
		console.log(this.firstname + " " + this.lastname + " is time traveling to " + year);
	}
}
FenFei.timeTravel(2014);	//li gang is time traveling to 2014（父/拥有者对象：FenFei）

2.（隐私绑定）可以通过创建一个新的对象，来引用FenFei对象上的timeTravel方法。

var Camile = {
	firstname:"li",
	lastname:"yunxia"
} 
Camile.timeTravel = FenFei.timeTravel;
Camile.timeTravel(2014);	//li yunxia is time traveling to 2014（父/拥有者对象：Camile）

3.（new绑定）构造函数里的this
当使用构造函数创建一个对象的实例时，构造函数里的this就是新建的实例。

var TimeTravel = function(fName, lName){
	this.firstname = fName;
	this.lastname = lName;
}
 
var FenFei = new TimeTravel("li", "gang");
console.log(FenFei.firstname + " " + FenFei.lastname);		//li gang

4.（显示绑定）call和apply方法设定this值

var Camile = {
	firstname:"li",
	lastname:"yunxia"
} 
FenFei.timeTravel.call(Camile,2014);		//li yunxia is time traveling to 2014（指定this对象为Camile）
FenFei.timeTravel.apply(Camile,[2014]);	//li yunxia is time traveling to 2014（指定this对象为Camile）

5.（显示绑定）bind将函数绑定至某个对象（ES5）

function f(y){
	return this.x + y;
}
var o = {x:1};
/* f.bind(o)返回一个新函数，调用g(2)会把原始的函数f()当作o的方法来调用 */
var g = f.bind(o);	
g(2);	// 3

补充

1. 使用new为函数创建多个实例的时候，这些实例会共享prototype。
   当在一个实例里直接给this添加属性的时，会隐藏prototype中与之同名的属性。
   如果想访问prototype中的属性值而不是自己的设定的属性值：
   （1）删除实例自己添加的属性： delete 实例名.属性名
   （2）直接访问prototype中的属性：Thing.prototype.name

function Thing(){}
Thing.prototype.name = "leegang";
Thing.prototype.getName = function(){
	console.log(this.name);
}
Thing.prototype.setName = function(newName){
	this.name = newName;
}
Thing.prototype.deleteName = function(){
	delete this.name;
}
 
var thing = new Thing();	/*thing：Thing {}*/
thing.setName("liyunxia");	/*thing：Thing {name: "liyunxia"}*/
thing.getName();		//结果：liyunxia
thing.deleteName();		/*thing：Thing {}*/
thing.getName();		//结果：leegang	thing.__proto__为Thing {name: "leegang"}
 
thing.name = "liyunxia";	/*Thing {name: "liyunxia"}*/
thing.getName();		//结果：liyunxia
delete thing.name;		/*thing：Thing {}*/
thing.getName();		//结果：leegang thing.__proto__为Thing {name: "leegang"}