JS基础：this关键字详解

首先，我们需要搞清楚在JS里面，函数的几种调用方式:

• 普通函数调用
• 作为方法来调用
• 作为构造函数来调用
• 使用apply/call方法来调用
• Function.prototype.bind方法
• es6箭头函数

但是不管函数是按哪种方法来调用的，请记住一点：谁调用这个函数或方法,this关键字就指向谁

接下来就分情况来讨论下这些不同的情况：

①当作普通函数调用

function test(){
	this.name="我是方法中的name";
	console.log(this);	//这里的this指向window
	console.log(this.name);		//因为this指向window，所以this.name就成为了window.name		
    }
test();  //输出window对象，以及"我是方法中的name"

在这段代码中person函数作为普通函数调用，实际上test是作为全局对象window的一个方法来进行调用的,即window.test();所以这个地方是window对象调用了test方法,那么test函数当中的this即指window,同时window还拥有了另外一个属性name,值为"我是方法中的name"

var name = "我是window中的name";
function test(){
	console.log(this.name);
}
test();		//我是window中的name

在这段代码里，先在window中声明变量变量name，之后在方法中输出 this .name，因为test实际上是做为window的一个方法，所以相当于window调用了它，所以this指向window

②作为方法来调用

在上面的代码中，普通函数的调用即是作为window对象的方法进行调用。显然this关键字指向了window对象

再来看下做为方法来调用

var name="Window";
    var person={
        name:"person",
        showName:function(){
            console.log(this.name);
        }
}
person.showName();  //输出  person
//这里是person对象调用showName方法，很显然this关键字是指向person对象的，所以会输出name
    
var showNameA=person.showName;		//注意，这里没有在方法后加括号，表明没有调用方法
showNameA();    //输出  Window
//这里将person.showName方法赋给showNameA变量，此时showNameA变量相当于window对象的一个属性，因此showNameA()执行的时候相当于window.showNameA(),即window对象调用showNameA这个方法，所以this关键字指向window

再换种形式

var personA={
        name:"personA",
        showName:function(){
            console.log(this.name);
        }
}
var personB={
        name:"personB",
        sayName:personA.showName;
}
    
personB.sayName();  //输出 personB
//虽然showName方法是在personA这个对象中定义，但是调用的时候却是在personB这个对象中调用，因此this对象指向personB

③作为构造函数来调用

function  Person(name){
        this.name=name;
}
var personA=Person("xl");//当用new的时候，函数内部的this是一个新的对象，如果不new，也就是把它当成一个普通的函数执行
console.log(personA.name);// 输出  undefined
console.log(window.name);//输出  xl
//上面代码没有进行new操作，相当于window对象调用Person("xl")方法，那么this指向window对象，并进行赋值操作window.name="xl".
var personB=new Person("xl");
console.log(personB.name);// 输出 xl

new操作符

//下面这段代码模拟了new操作符(实例化对象)的内部过程
function person(name){
	var o={};
	o.__proto__=Person.prototype;  //原型继承
	Person.call(o,name);	//修改this的指向
	return o;
}
var personB=person("xl");
    
console.log(personB.name);  // 输出  xl

• 在person里面首先创建一个空对象o，将o的proto指向Person.prototype完成对原型的属性和方法的继承
• Person.call(o,name)这里即函数Person作为apply/call调用(具体内容下方)，将Person对象里的this改为o，即完成了o.name=name操作
• 返回对象o
• 因此person("xl")返回了一个继承了Person.prototype对象上的属性和方法，以及拥有name属性为"xl"的对象，并将它赋给变量personB所以console.log(personB.name)会输出"xl"

call/apply方法的调用

var name="XL";
    var Person={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
}
Person.showName.call(); //输出 "XL"
//这里call方法里面的第一个参数为空，默认指向window。
//虽然showName方法定义在Person对象里面，但是使用call方法后，将showName方法里面的this指向了window。因此最后会输出"XL";
funtion FruitA(n1,n2){
        this.n1=n1;
        this.n2=n2;
        this.change=function(x,y){
            this.n1=x;
            this.n2=y;
        }
}
    
var fruitA=new FruitA("cheery","banana");
var FruitB={
	n1:"apple",
	n2:"orange"
};
fruitA.change.call(FruitB,"pear","peach");
    
console.log(FruitB.n1); //输出 pear
console.log(FruitB.n2);// 输出 peach

FruitB调用fruitA的change方法，将fruitA中的this绑定到对象FruitB上

Function.prototype.bind()方法

var name="XL";
function Person(name){
	this.name=name;
	this.sayName=function(){
		setTimeout(function(){
			console.log("my name is "+this.name);
		},50)
	}
}
var person=new Person("xl");
person.sayName()  //输出  “my name is XL”;
//这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为XL

那么如何才能输出"my name is xl"呢？

var name="XL";
function Person(name){
	this.name=name;
	this.sayName=function(){
		setTimeout(function(){
				console.log("my name is "+this.name);
		}.bind(this),50)  //注意这个地方使用的bind()方法，绑定setTimeout里面的匿名函数的this一直指向Person对象
	}
}
var person=new Person("xl");
person.sayName(); //输出 “my name is xl”;

这里setTimeout(function(){console.log(this.name)}.bind(this),50);匿名函数使用bind(this)方法后创建了新的函数，这个新的函数不管在什么地方执行，this都指向的Person,而非window,因此最后的输出为"my name is xl"而不是"my name is XL"

另外几个需要注意的地方：
setTimeout/setInterval/匿名函数执行的时候，this默认指向window对象，除非手动改变this的指向。在《javascript高级程序设计》当中，写到：“超时调用的代码(setTimeout)都是在全局作用域中执行的，因此函数中的this的值，在非严格模式下是指向window对象，在严格模式下是指向undefined”。本文都是在非严格模式下的情况

ECMAscript 5 中 Function.prototype.bind 方法
这个方法会将函数的this值绑定到传递给bind方法的参数上，并返回一个新的函数实例：

window.num = 1;

var obj = { num: 2};
function alertNum() {
    alert(this.num);
}

alertNum();     // 1;

var newAlertNum = alertNum.bind(obj);

newAlertNum();  // 2

④匿名函数中this的指向

var name="XL";
var person={
	name:"xl",
	showName:function(){
	console.log(this.name);
	}
	sayName:function(){
		(function(callback){
                callback();
		})(this.showName)
    }
}
person.sayName();  //输出 XL
var name="XL";
var person={
	name:"xl",
	showName:function(){
		console.log(this.name);
	}
	sayName:function(){
	var that=this;
		(function(callback){
			callback();
		})(that.showName)
	}
}
person.sayName() ;  //输出  "xl"
//匿名函数的执行同样在默认情况下this是指向window的，除非手动改变this的绑定对象

⑤Eval函数

该函数执行的时候，this绑定到当前作用域的对象上

var name="XL";
var person={
   name:"xl",
   showName:function(){
   		eval("console.log(this.name)");
   }
}
   
person.showName();  //输出  "xl"
   
var a=person.showName;
a();  //输出  "XL"

⑥箭头函数

es6里面this指向固定化，始终指向外部对象，因为箭头函数没有this,因此它自身不能进行new实例化,同时也不能使用call, apply, bind等方法来改变this的指向

参考文章：
http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
https://www.cnblogs.com/lisha-better/p/5684844.html