该this关键字的行为不同在JavaScript相比于其他语言。在面向对象的语言中，this关键字指的是该类的当前实例。在JavaScript中，的值this由函数（context.function()）的调用上下文及其调用位置确定。
1.在全球范围内使用
this在全局上下文中使用时，它绑定到全局对象（window在浏览器中）
document.write(this); //[object Window]
当您this在全局上下文中定义的函数内部使用时，this仍会绑定到全局对象，因为该函数实际上是全局上下文的一种方法。
function f1()
{
return this;
}
document.write(f1()); //[object Window]
上面f1提出了一种全局对象的方法。因此，我们还可以window按以下方式在对象上调用它：
function f()
{
return this;
}
document.write(window.f()); //[object Window]
2.当在内部对象方法中使用时
当您this在对象方法内使用关键字时，this绑定到“立即”封闭对象。
var obj = {
name: "obj",
f: function () {
return this + ":" + this.name;
}
};
document.write(obj.f()); //[object Object]:obj
在上面，我已经将单词立即用双引号引起来。要指出的是，如果将对象嵌套在另一个对象中，则该对象this将绑定到直接父对象。
var obj = {
name: "obj1",
nestedobj: {
name:"nestedobj",
f: function () {
return this + ":" + this.name;
}
}
}
document.write(obj.nestedobj.f()); //[object Object]:nestedobj
即使您将函数显式添加为对象的方法，它仍然遵循上述规则，即this仍指向直接父对象。
var obj1 = {
name: "obj1",
}
function returnName() {
return this + ":" + this.name;
}
obj1.f = returnName; //add method to object
document.write(obj1.f()); //[object Object]:obj1
3.调用无上下文功能时
当您使用this在没有任何上下文的情况下调用的内部函数（即，不在任何对象上）时，它会绑定到全局对象（window在浏览器中）（即使该函数是在对象内部定义的）。
var context = "global";
var obj = {
context: "object",
method: function () {
function f() {
var context = "function";
return this + ":" +this.context;
};
return f(); //invoked without context
}
};
document.write(obj.method()); //[object Window]:global
尝试所有功能
我们也可以使用功能尝试上述几点。但是有一些区别。
- 上面我们使用对象文字表示法将成员添加到对象中。我们可以使用将成员添加到函数中
this。指定它们。
- 对象文字表示法创建了一个对象实例，我们可以立即使用它。使用函数，我们可能首先需要使用
newoperator 创建其实例。
- 同样，在对象文字方法中，我们可以使用点运算符将成员显式添加到已定义的对象中。这仅添加到特定实例。但是，我已将变量添加到函数原型中，以使其在函数的所有实例中得到反映。
在下面，我尝试了使用Object以及this上面所做的所有事情，但是首先创建函数而不是直接编写对象。
/*********************************************************************
1. When you add variable to the function using this keyword, it
gets added to the function prototype, thus allowing all function
instances to have their own copy of the variables added.
*********************************************************************/
function functionDef()
{
this.name = "ObjDefinition";
this.getName = function(){
return this+":"+this.name;
}
}
obj1 = new functionDef();
document.write(obj1.getName() + "<br />"); //[object Object]:ObjDefinition
/*********************************************************************
2. Members explicitly added to the function protorype also behave
as above: all function instances have their own copy of the
variable added.
*********************************************************************/
functionDef.prototype.version = 1;
functionDef.prototype.getVersion = function(){
return "v"+this.version; //see how this.version refers to the
//version variable added through
//prototype
}
document.write(obj1.getVersion() + "<br />"); //v1
/*********************************************************************
3. Illustrating that the function variables added by both above
ways have their own copies across function instances
*********************************************************************/
functionDef.prototype.incrementVersion = function(){
this.version = this.version + 1;
}
var obj2 = new functionDef();
document.write(obj2.getVersion() + "<br />"); //v1
obj2.incrementVersion(); //incrementing version in obj2
//does not affect obj1 version
document.write(obj2.getVersion() + "<br />"); //v2
document.write(obj1.getVersion() + "<br />"); //v1
/*********************************************************************
4. `this` keyword refers to the immediate parent object. If you
nest the object through function prototype, then `this` inside
object refers to the nested object not the function instance
*********************************************************************/
functionDef.prototype.nestedObj = { name: 'nestedObj',
getName1 : function(){
return this+":"+this.name;
}
};
document.write(obj2.nestedObj.getName1() + "<br />"); //[object Object]:nestedObj
/*********************************************************************
5. If the method is on an object's prototype chain, `this` refers
to the object the method was called on, as if the method was on
the object.
*********************************************************************/
var ProtoObj = { fun: function () { return this.a } };
var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj
//as its prototype
obj3.a = 999; //adding instance member to obj3
document.write(obj3.fun()+"<br />");//999
//calling obj3.fun() makes
//ProtoObj.fun() to access obj3.a as
//if fun() is defined on obj3
4.在构造函数内部使用时。
当函数用作构造函数时（即用new关键字调用时），this函数内部将指向正在构造的新对象。
var myname = "global context";
function SimpleFun()
{
this.myname = "simple function";
}
var obj1 = new SimpleFun(); //adds myname to obj1
//1. `new` causes `this` inside the SimpleFun() to point to the
// object being constructed thus adding any member
// created inside SimipleFun() using this.membername to the
// object being constructed
//2. And by default `new` makes function to return newly
// constructed object if no explicit return value is specified
document.write(obj1.myname); //simple function
5.在原型链上定义的内部函数中使用时
如果该方法位于对象的原型链上，则this该方法内部将引用该方法在其上调用的对象，就好像该方法是在对象上定义的一样。
var ProtoObj = {
fun: function () {
return this.a;
}
};
//Object.create() creates object with ProtoObj as its
//prototype and assigns it to obj3, thus making fun()
//to be the method on its prototype chain
var obj3 = Object.create(ProtoObj);
obj3.a = 999;
document.write(obj3.fun()); //999
//Notice that fun() is defined on obj3's prototype but
//`this.a` inside fun() retrieves obj3.a
6.在call（），apply（）和bind（）函数内部
- 所有这些方法均在上定义
Function.prototype。
- 这些方法允许一次编写一个函数，然后在不同的上下文中调用它。换句话说，它们允许指定在
this执行函数时将使用的值。它们还可以在调用原始函数时采用任何要传递给原始函数的参数。
fun.apply(obj1 [, argsArray])设置obj1为thisinside 的值，fun()并将fun()传递argsArray其的元素作为其参数。fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])-设置obj1为thisinside 的值，fun()并将fun()传递的调用arg1, arg2, arg3, ...作为其参数。fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])-返回对函数的引用，该函数fun的this内部Fun绑定到obj1参数，而参数fun绑定到指定的参数arg1, arg2, arg3,...。- 到现在
apply，call和之间的区别bind已经很明显了。apply允许指定参数以充当类似数组的对象，即具有数字length属性和相应的非负整数属性的对象。而call允许直接指定函数的参数。两者apply和call立即在指定的上下文中使用指定的参数调用该函数。另一方面，bind仅返回绑定到指定this值和参数的函数。我们可以通过将其分配给变量来捕获对该返回函数的引用，以后我们可以随时调用它。
function add(inc1, inc2)
{
return this.a + inc1 + inc2;
}
var o = { a : 4 };
document.write(add.call(o, 5, 6)+"<br />"); //15
//above add.call(o,5,6) sets `this` inside
//add() to `o` and calls add() resulting:
// this.a + inc1 + inc2 =
// `o.a` i.e. 4 + 5 + 6 = 15
document.write(add.apply(o, [5, 6]) + "<br />"); //15
// `o.a` i.e. 4 + 5 + 6 = 15
var g = add.bind(o, 5, 6); //g: `o.a` i.e. 4 + 5 + 6
document.write(g()+"<br />"); //15
var h = add.bind(o, 5); //h: `o.a` i.e. 4 + 5 + ?
document.write(h(6) + "<br />"); //15
// 4 + 5 + 6 = 15
document.write(h() + "<br />"); //NaN
//no parameter is passed to h()
//thus inc2 inside add() is `undefined`
//4 + 5 + undefined = NaN</code>
7. this内部事件处理程序
- 当直接将函数分配给元素的事件处理程序时，
this直接在事件处理函数内部使用是指相应的元素。可以使用addeventListener方法或通过传统的事件注册方法（例如）完成此类直接功能分配onclick。
- 同样，当您
this直接在<button onclick="...this..." >元素的事件属性（如）内使用时，它引用的是元素。
- 但是，
this通过事件处理函数或事件属性内部调用的另一个函数间接使用将解析为全局对象window。
- 当我们使用Microsoft的事件注册模型方法将函数附加到事件处理程序时，可以实现上述相同的行为
attachEvent。它没有将功能分配给事件处理程序（因而没有将其分配为元素的功能方法），而是对事件进行了调用（在全局上下文中有效地对其进行了调用）。
我建议最好在JSFiddle中尝试一下。
<script>
function clickedMe() {
alert(this + " : " + this.tagName + " : " + this.id);
}
document.getElementById("button1").addEventListener("click", clickedMe, false);
document.getElementById("button2").onclick = clickedMe;
document.getElementById("button5").attachEvent('onclick', clickedMe);
</script>
<h3>Using `this` "directly" inside event handler or event property</h3>
<button id="button1">click() "assigned" using addEventListner() </button><br />
<button id="button2">click() "assigned" using click() </button><br />
<button id="button3" onclick="alert(this+ ' : ' + this.tagName + ' : ' + this.id);">used `this` directly in click event property</button>
<h3>Using `this` "indirectly" inside event handler or event property</h3>
<button onclick="alert((function(){return this + ' : ' + this.tagName + ' : ' + this.id;})());">`this` used indirectly, inside function <br /> defined & called inside event property</button><br />
<button id="button4" onclick="clickedMe()">`this` used indirectly, inside function <br /> called inside event property</button> <br />
IE only: <button id="button5">click() "attached" using attachEvent() </button>
8. this在ES6中的箭头功能
在箭头函数中，其this行为将类似于普通变量：它将从其词法范围继承。该功能的this，其中箭头函数定义，将箭头功能的this。
因此，这与以下行为相同：
(function(){}).bind(this)
请参见以下代码：
const globalArrowFunction = () => {
return this;
};
console.log(globalArrowFunction()); //window
const contextObject = {
method1: () => {return this},
method2: function(){
return () => {return this};
}
};
console.log(contextObject.method1()); //window
const contextLessFunction = contextObject.method1;
console.log(contextLessFunction()); //window
console.log(contextObject.method2()()) //contextObject
const innerArrowFunction = contextObject.method2();
console.log(innerArrowFunction()); //contextObject
