uTools-Manuals/docs/javascript/Reference/Operators/this.html

<article id="wikiArticle">
<div></div>
<p>与其他语言相比，<strong>函数的 <code>this</code> 关键字</strong>在 JavaScript 中的表现略有不同，此外，在<a href="Reference/Strict_mode">严格模式</a>和非严格模式之间也会有一些差别。</p>
<p>在绝大多数情况下，函数的调用方式决定了<code>this</code>的值。<code>this</code>不能在执行期间被赋值，并且在每次函数被调用时<code>this</code>的值也可能会不同。ES5引入了<a href="Reference/Global_Objects/Function/bind">bind</a>方法来设置函数的<code>this</code>值，而不用考虑函数如何被调用的，ES2015 引入了支持<code>this</code>词法解析的箭头函数（它在闭合的执行环境内设置<code>this</code>的值）。</p>
<div class="hidden">
<p> </p>
<p> </p>
<p>填充</p>
</div>
<h2 id="语法">语法</h2>
<pre><code class="language-javascript">this</code></pre>
<h3 id="值">值</h3>
<p>当前执行代码的环境对象</p>
<h2 id="全局环境">全局环境</h2>
<p>无论是否在严格模式下，在全局执行环境中（在任何函数体外部）<code>this</code> 都指向全局对象。</p>
<pre><code class="language-js">// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"</code></pre>
<h2 id="函数（运行内）环境">函数（运行内）环境</h2>
<p>在函数内部，<code>this</code>的值取决于函数被调用的方式。</p>
<h3 id="简单调用">简单调用</h3>
<p>因为下面的代码不在严格模式下，且 <code>this</code> 的值不是由该调用设置的，所以 <code>this</code> 的值默认指向全局对象。</p>
<pre><code class="language-js">function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

//在Node中：
f1() === global;   
</code></pre>
<p>然而，在严格模式下，<code>this</code>将保持他进入执行环境时的值，所以下面的<code>this</code>将会默认为<code>undefined</code>。</p>
<pre><code class="language-js">function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true
</code></pre>
<p>所以，在<strong>严格模式</strong>下，如果 <code>this</code> 没有被执行环境（execution context）定义，那它将保持为 <code>undefined</code>。</p>
<div class="note">在第二个例子中，<code>this</code>的确应该是<a href="/zh-CN/docs/Glossary/undefined">undefined</a>，因为<code>f2</code>是被直接调用的，而不是作为对象的属性或方法调用的（如 <code>window.f2()</code>）。有一些浏览器最初在支持<a href="Reference/Strict_mode">严格模式</a>时没有正确实现这个功能，于是它们错误地返回了<code>window</code>对象。</div>
<p>如果要想把 <code>this</code> 的值从一个环境传到另一个，就要用 <code><a href="Reference/Global_Objects/Function/call">call</a></code> 或者<code><a href="https://developer.mozilla.orgReference/Global_Objects/Function/apply">apply</a></code> 方法。</p>
<pre><code  class="language-javascript">// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = {a: 'Custom'};

// 这个属性是在global对象定义的。
var a = 'Global';

function whatsThis(arg) {
  return this.a;  // this的值取决于函数的调用方式
}

whatsThis();          // 'Global'
whatsThis.call(obj);  // 'Custom'
whatsThis.apply(obj); // 'Custom'
</code></pre>
<p>当一个函数在其主体中使用 <code>this</code> 关键字时，可以通过使用函数继承自<code>Function.prototype</code> 的 <code><a href="Reference/Global_Objects/Function/call">call</a></code> 或 <code><a href="Reference/Global_Objects/Function/apply">apply</a></code> 方法将 <code>this</code> 值绑定到调用中的特定对象。</p>
<pre><code  class="language-javascript">function add(c, d) {
  return this.a + this.b + c + d;
}

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

// 第一个参数是作为‘this’使用的对象
// 后续参数作为参数传递给函数调用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第一个参数也是作为‘this’使用的对象
// 第二个参数是一个数组，数组里的元素用作函数调用中的参数
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34</code></pre>
<p>使用 <code>call</code> 和 <code>apply</code> 函数的时候要注意，如果传递给 <code>this</code> 的值不是一个对象，JavaScript 会尝试使用内部 <code>ToObject</code> 操作将其转换为对象。因此，如果传递的值是一个原始值比如 <code>7</code> 或 <code>'foo'</code>，那么就会使用相关构造函数将它转换为对象，所以原始值 <code>7</code> 会被转换为对象，像 <code>new Number(7)</code> 这样，而字符串 <code>'foo'</code> 转化成 <code>new String('foo')</code> 这样，例如：</p>
<pre><code  class="language-javascript">function bar() {
  console.log(Object.prototype.toString.call(this));
}

//原始值 7 被隐式转换为对象
bar.call(7); // [object Number]
</code></pre>
<h3 id="bind方法"><code>bind</code>方法</h3>
<p>ECMAScript 5 引入了 <code><a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Function/bind" title="en-US/docs/JavaScript/Reference/Global Objects/Function/bind">Function.prototype.bind</a></code>。调用<code>f.bind(someObject)</code>会创建一个与<code>f</code>具有相同函数体和作用域的函数，但是在这个新函数中，<code>this</code>将永久地被绑定到了<code>bind</code>的第一个参数，无论这个函数是如何被调用的。</p>
<pre><code class="language-js">function f(){
  return this.a;
}

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

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty
</code></pre>
<h3 id="箭头函数">箭头函数</h3>
<p>在<a href="Reference/Functions/Arrow_functions">箭头函数</a>中，<code>this</code>与封闭词法环境的<code>this</code>保持一致。在全局代码中，它将被设置为全局对象：</p>
<pre><code  class="language-javascript">var globalObject = this;
var foo = (() =&gt; this);
console.log(foo() === globalObject); // true</code></pre>
<div class="note">
<p>注意：如果将<code>this</code>传递给<code>call</code>、<code>bind</code>、或者<code>apply</code>，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（<code>thisArg</code>）应该设置为<code>null</code>。</p>
</div>
<pre><code  class="language-javascript">// 接着上面的代码
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); // true

// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true

// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === globalObject); // true</code></pre>
<p>无论如何，<code>foo</code> 的 <code>this</code> 被设置为他被创建时的环境（在上面的例子中，就是全局对象）。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的<code>this</code>被设置为封闭的词法环境的。</p>
<pre><code  class="language-javascript">// 创建一个含有bar方法的obj对象，
// bar返回一个函数，
// 这个函数返回this，
// 这个返回的函数是以箭头函数创建的，
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
  bar: function() {
    var x = (() =&gt; this);
    return x;
  }
};

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this，
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true</code></pre>
<p>在上面的例子中，一个赋值给了 <code>obj.bar</code>的函数（称为匿名函数 A），返回了另一个箭头函数（称为匿名函数 B）。因此，在 <code>A</code> 调用时，函数B的<code>this</code>被永久设置为obj.bar（函数A）的<code>this</code>。当返回的函数（函数B）被调用时，它<code>this</code>始终是最初设置的。在上面的代码示例中，函数B的<code>this</code>被设置为函数A的<code>this</code>，即obj，所以即使被调用的方式通常将其设置为 <code>undefined</code> 或全局对象（或者如前面示例中的其他全局执行环境中的方法），它的 <code>this</code> 也仍然是 <code>obj</code> 。</p>
<h3 id="作为对象的方法">作为对象的方法</h3>
<p>当函数作为对象里的方法被调用时，它们的 <code>this</code> 是调用该函数的对象。</p>
<p>下面的例子中，当 <code>o.f()</code>被调用时，函数内的<code>this</code>将绑定到<code>o</code>对象。</p>
<pre><code class="language-js">var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37
</code></pre>
<p>请注意，这样的行为，根本不受函数定义方式或位置的影响。在前面的例子中，我们在定义对象<code>o</code>的同时，将函数内联定义为成员 <code>f</code> 。但是，我们也可以先定义函数，然后再将其附属到<code>o.f</code>。这样做会导致相同的行为：</p>
<pre><code class="language-js">var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37
</code></pre>
<p>这表明函数是从<code>o</code>的<code>f</code>成员调用的才是重点。</p>
<p>同样，<code>this</code> 的绑定只受最靠近的成员引用的影响。在下面的这个例子中，我们把一个方法<code>g</code>当作对象<code>o.b</code>的函数调用。在这次执行期间，函数中的<code>this</code>将指向<code>o.b</code>。事实证明，这与他是对象 <code>o</code> 的成员没有多大关系，最靠近的引用才是最重要的。</p>
<pre><code  class="language-javascript"><code>o.b = {g: independent, prop: 42};
console.log(o.b.g()); // 42</code></code></pre>
<h4 id="原型链中的_this">原型链中的 <code><strong>this</strong></code></h4>
<p>对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么<code>this</code>指向的是调用这个方法的对象，就像该方法在对象上一样。</p>
<pre><code class="language-js">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
</code></pre>
<p>在这个例子中，对象<code>p</code>没有属于它自己的<code>f</code>属性，它的f属性继承自它的原型。虽然在对 <code>f</code> 的查找过程中，最终是在 <code>o</code> 中找到 <code>f</code> 属性的，这并没有关系；查找过程首先从 <code>p.f</code> 的引用开始，所以函数中的 <code>this</code> 指向<code>p</code>。也就是说，因为<code>f</code>是作为<code>p</code>的方法调用的，所以它的<code>this</code>指向了<code>p</code>。这是 JavaScript 的原型继承中的一个有趣的特性。</p>
<h4 id="getter_与_setter_中的_this">getter 与 setter 中的 <code>this</code></h4>
<p>再次，相同的概念也适用于当函数在一个 <code>getter</code> 或者 <code>setter</code> 中被调用。用作 <code>getter</code> 或 <code>setter</code> 的函数都会把 <code>this</code> 绑定到设置或获取属性的对象。</p>
<pre><code  class="language-javascript">function sum() {
  return this.a + this.b + this.c;
}

var o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  }
};

Object.defineProperty(o, 'sum', {
    get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // logs 2, 6
</code></pre>
<h3 id="作为构造函数">作为构造函数</h3>
<p>当一个函数用作构造函数时（使用<a href="Reference/Operators/new">new</a>关键字），它的<code>this</code>被绑定到正在构造的新对象。</p>
<div class="note">
<p><span style="line-height: 22.007999420166px;">虽然构造器返回的默认值是<code>this</code>所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回<code>this</code>对象）。</span></p>
</div>
<pre><code  class="language-javascript">/*
 * 构造函数这样工作:
 *
 * function MyConstructor(){
 *   // 函数实体写在这里
 *   // 根据需要在this上创建属性，然后赋值给它们，比如：
 *   this.fum = "nom";
 *   // 等等...
 *
 *   // 如果函数具有返回对象的return语句，
 *   // 则该对象将是 new 表达式的结果。 
 *   // 否则，表达式的结果是当前绑定到 this 的对象。
 *   //（即通常看到的常见情况）。
 * }
 */

function C(){
  this.a = 37;
}

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


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
console.log(o.a); // logs 38
</code></pre>
<p>在刚刚的例子中（<code>C2</code>），因为在调用构造函数的过程中，手动的设置了返回对象，与<code>this</code>绑定的默认对象被丢弃了。（这基本上使得语句 “<code>this.a = 37;</code>”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。</p>
<h3 id="作为一个DOM事件处理函数">作为一个DOM事件处理函数</h3>
<p>当函数被用作事件处理函数时，它的<code>this</code>指向触发事件的元素（一些浏览器在使用非<code>addEventListener</code>的函数动态添加监听函数时不遵守这个约定）。</p>
<pre><code class="language-js">// 被调用时，将关联的元素变成蓝色
function bluify(e){
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象时为 true
  console.log(this === e.target);        
  this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i&lt;elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}</code></pre>
<h3 id="作为一个内联事件处理函数">作为一个内联事件处理函数</h3>
<p>当代码被内联<a href="/zh-CN/docs/Web/Guide/Events/Event_handlers">on-event 处理函数</a>调用时，它的<code>this</code>指向监听器所在的DOM元素：</p>
<pre><code class="language-html">&lt;button onclick="alert(this.tagName.toLowerCase());"&gt;
  Show this
&lt;/button&gt;
</code></pre>
<p>上面的 alert 会显示<code>button</code>。注意只有外层代码中的<code>this</code>是这样设置的：</p>
<pre><code class="language-html">&lt;button onclick="alert((function(){return this})());"&gt;
  Show inner this
&lt;/button&gt;
</code></pre>
<p>在这种情况下，没有设置内部函数的<code>this</code>，所以它指向 global/window 对象（即非严格模式下调用的函数未设置<code>this</code>时指向的默认对象）。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-this-keyword" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">The this keyword</small></a></td>
<td><span class="spec-Draft">Draft</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-this-keyword" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">The this keyword</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.1.1" hreflang="en" lang="en" rel="noopener">ECMAScript 5.1 (ECMA-262)<br/><small lang="zh-CN">The this keyword</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf#sec-11.1.1" hreflang="en" lang="en" rel="noopener">ECMAScript 3rd Edition (ECMA-262)<br/><small lang="zh-CN">The this keyword</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td> </td>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf#sec-11.1.1" hreflang="en" lang="en" rel="noopener">ECMAScript 1st Edition (ECMA-262)<br/><small lang="zh-CN">The this keyword</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>Initial definition. Implemented in JavaScript 1.0.</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>this</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              1</td><td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              4</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
<span>Full support</span>
                  
                </abbr></span></dt><dd>Full support</dd></dl></section></div><p></p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="Reference/Strict_mode">严格模式</a></li>
<li><a class="external" href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/" rel="noopener">Gentle explanation of 'this' keyword in JavaScript</a></li>
</ul>
</article>