this关键字在JavaScript中的表现与其他语言不同。在面向对象语言中，this关键字指的是类的当前实例。在JavaScript中，this的值由函数（#3）的调用上下文和调用位置决定。

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 objectdocument.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将成员添加到函数中。来指定它们。
• 对象文字表示法创建了一个我们可以立即使用的对象实例。对于函数，我们可能需要首先使用new运算符创建其实例。
• 同样在对象文字方法中，我们可以使用点操作符显式地将成员添加到已经定义的对象中。这只添加到特定的实例中。但是，我已经向函数原型添加了变量，以便它在函数的所有实例中得到反映。

下面我尝试了我们使用Object和上面的this所做的所有事情，但首先创建函数而不是直接编写对象。

/*********************************************************************1. When you add variable to the function using this keyword, itgets added to the function prototype, thus allowing all functioninstances 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 behaveas above: all function instances have their own copy of thevariable 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 aboveways 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 />"); //v2document.write(obj1.getVersion() + "<br />"); //v1
/*********************************************************************4. `this` keyword refers to the immediate parent object. If younest the object through function prototype, then `this` insideobject 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` refersto the object the method was called on, as if the method was onthe object.*********************************************************************/var ProtoObj = { fun: function () { return this.a } };var obj3 = Object.create(ProtoObj); //creating an object setting ProtoObj//as its prototypeobj3.a = 999;                       //adding instance member to obj3document.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.内部调用（）、应用（）和绑定（）函数

• 所有这些方法都在Function.prototype上定义。
• 这些方法允许编写一次函数并在不同的上下文中调用它。换句话说，它们允许指定this的值，该值将在函数执行时使用。它们还接受调用时传递给原始函数的任何参数。
• #0在fun()中将obj1设置为this的值，并调用fun()传递argsArray的元素作为其参数。
• #0-在fun()内将obj1设置为this的值，并调用fun()传递arg1, arg2, arg3, ...作为其参数。
• #0-返回对函数fun的引用，其中this在乐趣中绑定到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 = 15document.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 + 6document.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 = 15document.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等传统事件注册方法完成。
• 类似地，当您直接在元素的事件属性（如<button onclick="...this..." >）中使用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. ES6箭头函数中的#0

在箭头函数中，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

JavaScript中的this总是指被处决函数的“所有者”。

如果未定义显式所有者，则引用最顶部的所有者，即窗口对象。

所以如果我做了

function someKindOfFunction() {this.style = 'foo';}

element.onclick = someKindOfFunction;

this将引用元素对象。但要小心，很多人都会犯这个错误。

<element onclick="someKindOfFunction()">

在后一种情况下，您只是引用函数，而不是将其交给元素。因此，this将引用窗口对象。

this是JavaScript中被误解的概念之一，因为它的行为因地而异。简单地说，this指的是我们当前正在执行的函数的“所有者”。

this有助于获取我们使用的当前对象（又名执行上下文）。如果您了解当前函数在哪个对象中执行，您就可以轻松理解当前this是什么

var val = "window.val"
var obj = {val: "obj.val",innerMethod: function () {var val = "obj.val.inner",func = function () {var self = this;return self.val;};
return func;},outerMethod: function(){return this.val;}};
//This actually gets executed inside window objectconsole.log(obj.innerMethod()()); //returns window.val
//Breakdown in to 2 lines explains this in detailvar _inn = obj.innerMethod();console.log(_inn()); //returns window.val
console.log(obj.outerMethod()); //returns obj.val

上面我们创建了3个同名“val”的变量。一个在全局上下文中，一个在obj中，另一个在obj的innerLaw中。JavaScript通过从本地去全局的范围链来解析特定上下文中的标识符。

#0可以区分的地方很少

调用对象的方法

var status = 1;var helper = {status : 2,getStatus: function () {return this.status;}};
var theStatus1 = helper.getStatus(); //line1console.log(theStatus1); //2
var theStatus2 = helper.getStatus;console.log(theStatus2()); //1

当line1执行时，JavaScript为函数调用建立一个执行上下文（EC），将this设置为最后一个“”之前出现的任何对象引用的对象。。所以在最后一行中，您可以理解a()是在全局上下文中执行的，即window。

与构造

this可用于引用正在创建的对象

function Person(name){this.personName = name;this.sayHello = function(){return "Hello " + this.personName;}}
var person1 = new Person('Scott');console.log(person1.sayHello()); //Hello Scott
var person2 = new Person('Hugh');var sayHelloP2 = person2.sayHello;console.log(sayHelloP2()); //Hello undefined

当执行newPerson()时，将创建一个全新的对象。Person被调用，其this被设置为引用该新对象。

函数调用

function testFunc() {this.name = "Name";this.myCustomAttribute = "Custom Attribute";return this;}
var whatIsThis = testFunc();console.log(whatIsThis); //window
var whatIsThis2 = new testFunc();console.log(whatIsThis2);  //testFunc() / object
console.log(window.myCustomAttribute); //Custom Attribute

如果我们错过了new关键字，whatIsThis指的是它能找到的最全局的上下文（window）

使用事件处理程序

如果事件处理程序是内联的，this引用全局对象

<script type="application/javascript">function click_handler() {alert(this); // alerts the window object}</script>
<button id='thebutton' onclick='click_handler()'>Click me!</button>

通过JavaScript添加事件处理程序时，this指的是生成事件的DOM元素。

• 您还可以使用.apply().call()和.bind()操作上下文
• JQuery代理是另一种方法，您可以使用它来确保函数中的this将是您想要的值。（检查理解$.代理（）、jQuery.proxy（）用法）
• var that = this在JavaScript中意味着什么

javascript的this

简单的函数调用

考虑以下函数：

function foo() {console.log("bar");console.log(this);}foo(); // calling the function

请注意，我们在正常模式下运行它，即不使用严格模式。

在浏览器中运行时，this的值将记录为window。这是因为window是Web浏览器范围内的全局变量。

如果您在node.js这样的环境中运行相同的代码，this将引用应用程序中的全局变量。

现在，如果我们在严格模式下通过将语句"use strict";添加到函数声明的开头来运行它，this将不再引用任何环境中的全局变量。这样做是为了避免在严格模式下混淆。this在这种情况下只会记录undefined，因为它就是这样，它没有定义。

在下面的例子中，我们将看到如何操作this的值。

在对象上调用函数

有不同的方法可以做到这一点。如果您在Javascript中调用过forEach和slice等本机方法，您应该已经知道在这种情况下this变量指的是您调用该函数的Object（请注意，在Javascript中，几乎所有内容都是Object，包括Arrays和Functions）。以以下代码为例。

var myObj = {key: "Obj"};myObj.logThis = function () {// I am a methodconsole.log(this);}myObj.logThis(); // myObj is logged

如果Object包含包含Function的属性，则该属性称为方法。调用此方法时，将始终将其this变量设置为与之关联的Object。严格和非严格模式都是如此。

请注意，如果一个方法存储（或者更确切地说，复制）在另一个变量中，对this的引用将不再保留在新变量中。例如：

// continuing with the previous code snippet
var myVar = myObj.logThis;myVar();// logs either of window/global/undefined based on mode of operation

考虑一个更常见的实际场景：

var el = document.getElementById('idOfEl');el.addEventListener('click', function() { console.log(this) });// the function called by addEventListener contains this as the reference to the element// so clicking on our element would log that element itself

new关键字

考虑Javascript中的构造函数：

function Person (name) {this.name = name;this.sayHello = function () {console.log ("Hello", this);}}
var awal = new Person("Awal");awal.sayHello();// In `awal.sayHello`, `this` contains the reference to the variable `awal`

这是如何工作的？好吧，让我们看看当我们使用new关键字时会发生什么。

1. 使用new关键字调用函数将立即初始化Person类型的Object。
2. 此Object的构造函数将其构造函数设置为Person。另外，请注意typeof awal只会返回Object。
3. 这个新的Object将被分配给Person.prototype的原型。这意味着Person原型中的任何方法或属性都可用于Person的所有实例，包括awal。
4. 现在调用函数Person本身；this是对新构造的对象awal的引用。

很简单，嗯？

请注意，官方的ECMAScript规范没有说明此类类型的函数是实际的constructor函数。它们只是普通函数，new可以用于任何函数。只是我们这样使用它们，所以我们只这样称呼它们。

在函数上调用函数：call和apply

所以是的，因为function也是Objects（事实上Javascript中的第一类变量），即使函数也有方法……嗯，函数本身。

所有函数都继承自全局Function，其中两个方法是call和apply，两者都可用于操作调用它们的函数中this的值。

function foo () { console.log (this, arguments); }var thisArg = {myObj: "is cool"};foo.call(thisArg, 1, 2, 3);

这是使用call的典型示例。它基本上接受第一个参数并将函数foo中的this设置为对thisArg的引用。传递给call的所有其他参数都作为参数传递给函数foo。
所以上面的代码将在控制台中记录{myObj: "is cool"}, [1, 2, 3]。在任何函数中更改this的值都是非常好的方法。

apply与call几乎相同，接受它只需要两个参数：thisArg和一个包含要传递给函数的参数的数组。所以上面的call调用可以像这样翻译成apply：

foo.apply(thisArg, [1,2,3])

请注意，call和apply可以覆盖我们在第二个项目符号中讨论的点方法调用设置的this的值。很简单：）

介绍……bind！

bind是call和apply的兄弟。它也是Javascript中所有函数从全局Function构造函数继承的方法。bind和call/apply的区别在于call和apply实际上都会调用该函数。另一方面，bind返回一个预先设置了call0和call1的新函数。让我们举个例子来更好地理解这一点：

function foo (a, b) {console.log (this, arguments);}var thisArg = {myObj: "even more cool now"};var bound = foo.bind(thisArg, 1, 2);console.log (typeof bound); // logs `function`console.log (bound);/* logs `function () { native code }` */
bound(); // calling the function returned by `.bind`// logs `{myObj: "even more cool now"}, [1, 2]`

看到这三者之间的区别了吗？这很微妙，但它们的使用方式不同。与call和apply一样，bind也会覆盖点方法调用设置的this的值。

请注意，这三个函数都不会对原始函数进行任何更改。call和apply将返回新构造函数的值，而bind将返回新构造的函数本身，准备好被调用。

额外的东西，收到

有时，您不喜欢this随范围而变化，尤其是嵌套范围。请看下面的示例。

var myObj = {hello: function () {return "world"},myMethod: function () {// copy this, variable names are case-sensitivevar that = this;// callbacks ftw \o/foo.bar("args", function () {// I want to call `hello` herethis.hello(); // error// but `this` references to `foo` damn!// oh wait we have a backup \o/that.hello(); // "world"});}};

在上面的代码中，我们看到this的值随着嵌套范围的变化而变化，但我们想要原始范围中this的值。所以我们将this复制到that并使用副本而不是this。聪明吧？

索引：

1. 默认情况下this中包含什么？
2. 如果我们使用对象点表示法将函数调用为方法怎么办？
3. 如果我们使用new关键字呢？
4. 我们如何用call和apply操作this？
5. 使用bind。
6. 复制this以解决嵌套范围问题。

由于这个线程已经出现，我为刚接触#0主题的读者编写了几点。

this的值是如何确定的？

我们使用这个词的方式类似于我们在英语等自然语言中使用代词的方式：“John跑得很快，因为他试图赶上火车。”相反，我们可以写“…John试图赶上火车”。

var person = {firstName: "Penelope",lastName: "Barrymore",fullName: function () {
// We use "this" just as in the sentence above:console.log(this.firstName + " " + this.lastName);
// We could have also written:console.log(person.firstName + " " + person.lastName);}}

this没有赋值直到对象调用定义它的函数。在全局范围内，所有全局变量和函数都在window对象上定义。因此，全局函数中的this引用（并具有）全局window对象。

当use strict时，全局函数和未绑定到任何对象的匿名函数中的this的值为undefined。

this关键字是最被误解:1）我们借用一个使用this的方法，2）我们将一个使用this的方法分配给一个变量，3）一个使用this的函数作为回调函数传递，4）this在闭包内部使用-一个内部函数。

什么拥有未来

在ECMA脚本6中定义，arrow-函数采用this绑定封闭（函数或全局）范围。

function foo() {// return an arrow functionreturn (a) => {// `this` here is lexically inherited from `foo()`console.log(this.a);};}var obj1 = { a: 2 };var obj2 = { a: 3 };
var bar = foo.call(obj1);bar.call( obj2 ); // 2, not 3!

虽然箭头函数提供了使用bind()的替代方案，但重要的是要注意它们本质上是禁用传统的this机制，以支持更广泛理解的词法范围。

参考资料：

1. this&对象原型，作者：Kyle Simpson.©2014 Getify Solutions.
2. javascriptissexy.comhttp://goo.gl/pvl0GX
3. Angus Croll-http://goo.gl/Z2RacU

这里是JavaScript中this的一个很好的来源。

以下是摘要：

• 今年全球

  在浏览器中，在全局范围内，this是window对象

  <script type="text/javascript">console.log(this === window); // truevar foo = "bar";console.log(this.foo); // "bar"console.log(window.foo); // "bar"

  在使用repl的node中，this是顶部命名空间。您可以将其称为global。

  >this{ ArrayBuffer: [Function: ArrayBuffer],Int8Array: { [Function: Int8Array] BYTES_PER_ELEMENT: 1 },Uint8Array: { [Function: Uint8Array] BYTES_PER_ELEMENT: 1 },...>global === thistrue

  在从脚本执行的node中，全局范围内的this以空对象开始。它与global不同

  \\test.jsconsole.log(this);  \\ {}console.log(this === global); \\ fasle

• function this

Except in the case of DOM event handlers or when a thisArg is provided (see further down), both in node and in a browser using this in a function that is not called with new references the global scope…

<script type="text/javascript">foo = "bar";
function testThis() {this.foo = "foo";}
console.log(this.foo); //logs "bar"testThis();console.log(this.foo); //logs "foo"</script>

如果你使用use strict;，在这种情况下this将是undefined

<script type="text/javascript">foo = "bar";
function testThis() {"use strict";this.foo = "foo";}
console.log(this.foo); //logs "bar"testThis();  //Uncaught TypeError: Cannot set property 'foo' of undefined</script>

如果你用new调用一个函数，this将是一个新的上下文，它不会引用全局this。

<script type="text/javascript">foo = "bar";
function testThis() {this.foo = "foo";}
console.log(this.foo); //logs "bar"new testThis();console.log(this.foo); //logs "bar"
console.log(new testThis().foo); //logs "foo"</script>

• 原型这个

您创建的函数成为函数对象。它们会自动获得一个特殊的prototype属性，这是您可以为其赋值的东西。当您通过使用new调用函数创建实例时，您可以访问您分配给prototype属性的值。您使用this访问这些值。

function Thing() {console.log(this.foo);}
Thing.prototype.foo = "bar";
var thing = new Thing(); //logs "bar"console.log(thing.foo);  //logs "bar"

在prototype上分配数组或对象通常是错误的。如果您希望每个实例都有自己的数组，请在函数中创建它们，而不是在原型中创建它们。

function Thing() {this.things = [];}
var thing1 = new Thing();var thing2 = new Thing();thing1.things.push("foo");console.log(thing1.things); //logs ["foo"]console.log(thing2.things); //logs []

• 反对这

您可以在对象的任何函数中使用this来引用该对象的其他属性。这与使用new创建的实例不同。

var obj = {foo: "bar",logFoo: function () {console.log(this.foo);}};
obj.logFoo(); //logs "bar"

• DOM事件

在超文本标记语言DOM事件处理程序中，this始终是对事件附加到的DOM元素的引用

function Listener() {document.getElementById("foo").addEventListener("click",this.handleClick);}Listener.prototype.handleClick = function (event) {console.log(this); //logs "<div id="foo"></div>"}
var listener = new Listener();document.getElementById("foo").click();

除非你是bind

function Listener() {document.getElementById("foo").addEventListener("click",this.handleClick.bind(this));}Listener.prototype.handleClick = function (event) {console.log(this); //logs Listener {handleClick: function}}
var listener = new Listener();document.getElementById("foo").click();

• 超文本标记语言this

在可以放置JavaScript的超文本标记语言属性中，this是对元素的引用。

<div id="foo" onclick="console.log(this);"></div><script type="text/javascript">document.getElementById("foo").click(); //logs <div id="foo"...</script>

• 评估这个

您可以使用eval访问this。

function Thing () {}Thing.prototype.foo = "bar";Thing.prototype.logFoo = function () {eval("console.log(this.foo)"); //logs "bar"}
var thing = new Thing();thing.logFoo();

• 与此

您可以使用with将this添加到当前范围以读取和写入this上的值，而无需显式引用this。

function Thing () {}Thing.prototype.foo = "bar";Thing.prototype.logFoo = function () {with (this) {console.log(foo);foo = "foo";}}
var thing = new Thing();thing.logFoo(); // logs "bar"console.log(thing.foo); // logs "foo"

• jQuery这个

jQuery在很多地方都会有this引用一个DOM元素。

<div class="foo bar1"></div><div class="foo bar2"></div><script type="text/javascript">$(".foo").each(function () {console.log(this); //logs <div class="foo...});$(".foo").on("click", function () {console.log(this); //logs <div class="foo...});$(".foo").each(function () {this.click();});</script>

这样使用Scope就像这样

  <script type="text/javascript" language="javascript">$('#tbleName tbody tr').each(function{var txt='';txt += $(this).find("td").eq(0).text();\\same as above but synatx differentvar txt1='';txt1+=$('#tbleName tbody tr').eq(0).text();alert(txt1)});</script>

txt1和txt的值相同在上例中$（this）=$（'#tbleName tbody tr'）相同

这是我见过的最好的解释：使用Clarity理解JavaScriptthis

这个引用始终引用（并保存值）一个对象-一个单一的对象-它通常用于函数或方法，尽管它可以在全局函数之外使用范围。请注意，当我们使用严格模式时，这保存了未定义的全局函数和未定义的匿名函数绑定到任何对象。

有四种情况这个可能会令人困惑：

1. 当我们传递一个方法（使用这个）作为参数用作回调函数时。
2. 当我们使用内部函数（闭包）时。重要的是要注意闭包不能通过使用this关键字访问外部函数的这个变量，因为this变量只能由函数本身访问，而不能由内部函数访问。
3. 当依赖于这个的方法被分配给跨上下文的变量时，在这种情况下，这个引用了另一个超出最初预期的对象。
4. 当使用这个以及bind、应用和调用方法时。

他给出了代码示例、解释和解决方案，我认为这很有帮助。

关于this的最详细和最全面的文章如下：

JavaScript中'this'关键字的温和解释

this背后的想法是理解函数调用类型对设置this值具有重要意义。

当遇到识别this的麻烦时，不要问问自己：

#0取自在哪里？

做问问自己：

函数援引是什么？

对于箭头函数（上下文透明的特殊情况），问问自己：

箭头函数定义的值this是什么？

这种心态在处理this时是正确的，会让你免于头痛。

关于如何在JavaScript中解释“这个”关键字有很多困惑。希望这篇文章能一劳永逸地解决所有这些问题。还有更多。请仔细阅读整篇文章。事先警告，这篇文章很长。

无论使用它的上下文如何，“这个”总是引用Javascript中的“当前对象”。然而，“当前对象”的内容与背景不同。背景可能正好是6中的1以下：

1. 全球（即在所有函数之外）
2. 内部直接“非绑定函数”调用（即通过调用functionName.bind绑定没有被的函数）
3. 内部间接“非绑定函数”调用到functionName.call和functionName.apply
4. 在“绑定函数”调用中（即已经绑定通过调用functionName.bind的函数）
5. 通过“新”创建对象
6. 内部内联DOM事件处理程序

以下将逐一描述每个上下文：

1. 全球背景（即在所有函数之外）：

   在所有函数之外（即在全局上下文中）"当前对象“（因此“这个”的值）始终是浏览器的“windows”对象。

2. 内部直接“非绑定函数”调用：

   在直接的“非绑定函数”调用中，对象调用的函数调用成为“当前对象”（因此“这个”的值）。如果在没有显式当前对象的情况下调用函数，则当前对象是"窗口"对象（对于非严格模式）或未定义（对于严格模式）。中定义的任何函数（或变量）全局上下文自动成为"窗口"对象的属性。例如，假设函数在全局上下文中定义为

   function UserDefinedFunction(){alert(this)}

   它成为窗口对象的属性，就好像您定义了作为

   window.UserDefinedFunction=function(){alert(this)}

   在“非严格模式”下，直接通过"用户定义函数（）"调用/调用此函数将自动调用/调用“用户自定义函数”中的“当前对象”（因此是的值）。在“非严格模式”中调用此函数将导致以下结果

   UserDefinedFunction() // displays [object Window]  as it automatically gets invoked as window.UserDefinedFunction()

   在“严格模式”下，直接通过以下方式调用/调用函数"用户定义函数（）"将“不是”自动调用/调用它作为"窗口。用户定义的函数（）"。因此”当前对象“（和“这个”的值）在“UserCustedFunction”应为未定义。在“严格模式”下调用此函数将导致以下结果

   UserDefinedFunction() // displays undefined

   但是，使用窗口对象显式调用它将导致以下

   window.UserDefinedFunction() // "always displays [object Window]   irrespective of mode."

   让我们看另一个例子。请查看以下代码

    function UserDefinedFunction(){alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)}
   var o1={a:1,b:2,f:UserDefinedFunction}var o2={c:3,d:4,f:UserDefinedFunction}
   o1.f() // Shall display 1,2,undefined,undefinedo2.f() // Shall display undefined,undefined,3,4

   在上面的例子中，我们看到当“用户自定义函数”是通过o1调用，“这个”取o1的值将显示其属性"一个"和"b"的值"c"和"d"显示为未定义和o1没有定义这些属性

   类似地，当通过o2调用“用户自定义函数”时，"一个"和"b"的值显示为未定义，因为o2没有定义这些属性。

3. 内部间接“非绑定函数”调用到functionName.call和functionName.apply：

   当一个“非绑定函数”被调用时

   function UserDefinedFunction(){alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)}var o1={a:1,b:2,f:UserDefinedFunction}var o2={c:3,d:4,f:UserDefinedFunction}
   UserDefinedFunction.call(o1) // Shall display 1,2,undefined,undefinedUserDefinedFunction.apply(o1) // Shall display 1,2,undefined,undefined
   UserDefinedFunction.call(o2) // Shall display undefined,undefined,3,4UserDefinedFunction.apply(o2) // Shall display undefined,undefined,3,4
   o1.f.call(o2) // Shall display undefined,undefined,3,4o1.f.apply(o2) // Shall display undefined,undefined,3,4
   o2.f.call(o1) // Shall display 1,2,undefined,undefinedo2.f.apply(o1) // Shall display 1,2,undefined,undefined

   "this"参数没有显式传递给，（因此"this"的值）在非严格模式下设置为"窗口"，在严格模式下设置为“未定义”。

4. 在“绑定函数”调用中（即通过调用functionName.bind绑定的函数）：

   绑定函数是一个函数，其“这个”值已被修复。以下代码演示了“这个”在case中的工作原理的绑定函数

   function UserDefinedFunction(){alert(this.a + ","  + this.b + ","  + this.c  + ","  + this.d)}var o1={a:1,b:2,f:UserDefinedFunction,bf:null}var o2={c:3,d:4,f:UserDefinedFunction,bf:null}
   var bound1=UserDefinedFunction.bind(o1); // permanantly fixes "this" value of function "bound1" to Object o1bound1() // Shall display 1,2,undefined,undefined
   var bound2=UserDefinedFunction.bind(o2); // permanantly fixes "this" value of function "bound2" to Object o2bound2() // Shall display undefined,undefined,3,4
   var bound3=o1.f.bind(o2); // permanantly fixes "this" value of function "bound3" to Object o2bound3() // Shall display undefined,undefined,3,4
   var bound4=o2.f.bind(o1); // permanantly fixes "this" value of function "bound4" to Object o1bound4() // Shall display 1,2,undefined,undefined
   o1.bf=UserDefinedFunction.bind(o2) // permanantly fixes "this" value of function "o1.bf" to Object o2o1.bf() // Shall display undefined,undefined,3,4
   o2.bf=UserDefinedFunction.bind(o1) // permanantly fixes "this" value of function "o2.bf" to Object o1o2.bf() // Shall display 1,2,undefined,undefined
   bound1.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound function
   bound1.apply(o2) // Shall still display 1,2,undefined,undefined. "apply" cannot alter the value of "this" for bound function
   o2.bf.call(o2) // Shall still display 1,2,undefined,undefined. "call" cannot alter the value of "this" for bound functiono2.bf.apply(o2) // Shall still display 1,2,undefined,undefined."apply" cannot alter the value of "this" for bound function

   如上面的代码所示，任何“绑定函数”的“this”值不能通过调用/应用进行更改。此外，如果“这个”参数未显式传递给绑定，“当前对象”（因此“这个”的值）在非中设置为"窗口"严格模式和“未定义”在严格模式。还有一件事。绑定已经绑定的函数不会改变“这个”的值。它仍然设置为第一个绑定函数设置的值。

5. 通过“新”创建对象：

   在构造函数内部，“当前对象”（因此是“这个”）引用当前正在创建的对象通过“新”而不管函数的绑定状态。然而如果构造函数是一个绑定函数，它将被调用为绑定函数设置的预定义参数集。

6. 内部内联DOM事件处理程序：

   请查看以下超文本标记语言片段

   <button onclick='this.style.color=white'>Hello World</button><div style='width:100px;height:100px;' onclick='OnDivClick(event,this)'>Hello World</div>

   上述示例中的“这个”表示“按钮”元素和“div”元素。

   在第一个示例中，按钮的字体颜色应设置为点击时为白色。

   在第二个示例中，当单击"div"元素时，它将用第二个参数调用OnDivClick函数引用单击的div元素。但是“这个”的值“未定义”分别在不严格和严格模式中（如果OnDivClick是未绑定函数）或设置为预定义绑定值（如果OnDivClick是界函数）