diff options
Diffstat (limited to 'files/zh-cn/web/javascript/reference/operators/this/index.html')
| -rw-r--r-- | files/zh-cn/web/javascript/reference/operators/this/index.html | 498 |
1 files changed, 498 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/operators/this/index.html b/files/zh-cn/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..a3378079ac --- /dev/null +++ b/files/zh-cn/web/javascript/reference/operators/this/index.html @@ -0,0 +1,498 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - Operator + - Primary Expressions + - Reference + - this + - 参考 +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>与其他语言相比，<strong>函数的 <code>this</code> 关键字</strong>在 JavaScript 中的表现略有不同，此外，在<a href="/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>和非严格模式之间也会有一些差别。</p> + +<p>在绝大多数情况下，函数的调用方式决定了 <code>this</code> 的值（运行时绑定）。<code>this</code> 不能在执行期间被赋值，并且在每次函数被调用时 <code>this</code> 的值也可能会不同。ES5 引入了 <a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">bind</a> 方法来设置函数的 <code>this</code> 值，而不用考虑函数如何被调用的。ES2015 引入了<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>，箭头函数不提供自身的 this 绑定（<code>this</code> 的值将保持为闭合词法上下文的值）。</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">this</pre> + +<h3 id="值">值</h3> + +<p>当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。</p> + +<h2 id="描述">描述</h2> + +<h3 id="全局上下文">全局上下文</h3> + +<p>无论是否在严格模式下，在全局执行环境中（在任何函数体外部）<code>this</code> 都指向全局对象。</p> + +<pre class="brush:js notranslate">// 在浏览器中, 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"</pre> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 你可以使用 {{jsxref("globalThis")}} 获取全局对象，无论你的代码是否在当前上下文运行。</p> +</div> + +<h3 id="函数上下文">函数上下文</h3> + +<p>在函数内部，<code>this</code>的值取决于函数被调用的方式。</p> + +<p>因为下面的代码不在严格模式下，且 <code>this</code> 的值不是由该调用设置的，所以 <code>this</code> 的值默认指向全局对象，浏览器中就是 {{domxref("Window", "window")}}。</p> + +<pre class="brush:js notranslate">function f1(){ + return this; +} +//在浏览器中： +f1() === window; //在浏览器中，全局对象是window + +//在Node中： +f1() === globalThis; +</pre> + +<p>然而，在严格模式下，如果进入执行环境时没有设置 <code>this</code> 的值，<code>this</code> 会保持为 <code>undefined</code>，如下：</p> + +<pre class="brush:js notranslate">function f2(){ + "use strict"; // 这里是严格模式 + return this; +} + +f2() === undefined; // true +</pre> + +<div class="note">在第二个例子中，<code>this</code> 应是 <a href="/zh-CN/docs/Glossary/undefined">undefined</a>，因为 <code>f2</code> 是被直接调用的，而不是作为对象的属性或方法调用的（如 <code>window.f2()</code>）。有一些浏览器最初在支持<a href="/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a>时没有正确实现这个功能，于是它们错误地返回了<code>window</code>对象。</div> + +<p>如果要想把 <code>this</code> 的值从一个环境传到另一个，就要用 <code><a href="/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call</a></code> 或者<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">apply</a></code> 方法，如下方的示例所示。</p> + +<h3 id="类上下文">类上下文</h3> + +<p><code>this</code> 在 <a href="/zh-CN/docs/Web/JavaScript/Reference/Classes">类</a> 中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。</p> + +<p>在类的构造函数中，<code>this</code> 是一个常规对象。类中所有非静态的方法都会被添加到 <code>this</code> 的原型中：</p> + +<pre class="notranslate">class Example { + constructor() { + const proto = Object.getPrototypeOf(this); + console.log(Object.getOwnPropertyNames(proto)); + } + first(){} + second(){} + static third(){} +} + +new Example(); // ['constructor', 'first', 'second']</pre> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>静态方法不是 this 的属性，它们只是类自身的属性。</p> +</div> + +<h3 id="派生类">派生类</h3> + +<p>不像基类的构造函数，派生类的构造函数没有初始的 <code>this</code> 绑定。在构造函数中调用 {{jsxref("Operators/super", "super()")}} 会生成一个 <code>this</code> 绑定，并相当于执行如下代码，Base为基类：</p> + +<pre class="notranslate">this = new Base();</pre> + +<div class="blockIndicator warning"> +<p><strong>警告：</strong>在调用 <code>super()</code> 之前引用 <code>this</code> 会抛出错误。</p> +</div> + +<p>派生类不能在调用 <code>super()</code> 之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数。</p> + +<pre class="notranslate">class Base {} +class Good extends Base {} +class AlsoGood extends Base { + constructor() { + return {a: 5}; + } +} +class Bad extends Base { + constructor() {} +} + +new Good(); +new AlsoGood(); +new Bad(); // ReferenceError</pre> + +<h2 id="示例">示例</h2> + +<h3 id="函数上下文中的_this">函数上下文中的 this</h3> + +<pre dir="rtl">// An object can be passed as the first argument to call or apply and this will be bound to it. +var obj = {a: 'Custom'}; + +// We declare a variable and the variable is assigned to the global window as its property. +var a = 'Global'; + +function whatsThis() { + return this.a; // The value of this is dependent on how the function is called +} + +whatsThis(); // 'Global' as this in the function isn't set, so it defaults to the global/window object +whatsThis.call(obj); // 'Custom' as this in the function is set to obj +whatsThis.apply(obj); // 'Custom' as this in the function is set to obj +</pre> + +<h3 id="this_和对象转换">this 和对象转换</h3> + +<pre class="notranslate">function add(c, d) { + return this.a + this.b + c + d; +} + +var o = {a: 1, b: 3}; + +// 第一个参数是用作“this”的对象 +// 其余参数用作函数的参数 +add.call(o, 5, 7); // 16 + +// 第一个参数是用作“this”的对象 +// 第二个参数是一个数组，数组中的两个成员用作函数参数 +add.apply(o, [10, 20]); // 34 +</pre> + +<p>在非严格模式下使用 <code>call</code> 和 <code>apply</code> 时，如果用作 <code>this</code> 的值不是对象，则会被尝试转换为对象。<code>null</code> 和 <code>undefined</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 class="notranslate">function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +bar.call('foo'); // [object String] +bar.call(undefined); // [object global]</pre> + +<h3 id="bind方法"><code>bind</code>方法</h3> + +<p>ECMAScript 5 引入了 {{jsxref("Function.prototype.bind()")}}。调用<code>f.bind(someObject)</code>会创建一个与<code>f</code>具有相同函数体和作用域的函数，但是在这个新函数中，<code>this</code>将永久地被绑定到了<code>bind</code>的第一个参数，无论这个函数是如何被调用的。</p> + +<pre class="brush:js notranslate">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.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty +</pre> + +<h3 id="箭头函数">箭头函数</h3> + +<p>在<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>中，<code>this</code>与封闭词法环境的<code>this</code>保持一致。在全局代码中，它将被设置为全局对象：</p> + +<pre class="brush: js notranslate">var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true</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 class="brush: js notranslate">// 接着上面的代码 +// 作为对象的一个方法调用 +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</pre> + +<p>无论如何，<code>foo</code> 的 <code>this</code> 被设置为他被创建时的环境（在上面的例子中，就是全局对象）。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的<code>this</code>被设置为封闭的词法环境的。</p> + +<pre class="brush: js notranslate">// 创建一个含有bar方法的obj对象， +// bar返回一个函数， +// 这个函数返回this， +// 这个返回的函数是以箭头函数创建的， +// 所以它的this被永久绑定到了它外层函数的this。 +// bar的值可以在调用中设置，这反过来又设置了返回函数的值。 +var obj = { + bar: function() { + var x = (() => 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</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 class="brush:js notranslate">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +</pre> + +<p>请注意，这样的行为完全不会受函数定义方式或位置的影响。在前面的例子中，我们在定义对象<code>o</code>的同时，将其中的函数定义为成员 <code>f</code> 。但是，我们也可以先定义函数，然后再将其附属到<code>o.f</code>。这样做的结果是一样的：</p> + +<pre class="brush:js notranslate">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // 37 +</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 class="brush: js notranslate"><code>o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // 42</code></pre> + +<h4 id="原型链中的_this">原型链中的 <code><strong>this</strong></code></h4> + +<p>对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么 <code>this</code> 指向的是调用这个方法的对象，就像该方法就在这个对象上一样。</p> + +<pre class="brush:js notranslate">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 +</pre> + +<p>在这个例子中，对象 <code>p</code> 没有属于它自己的 <code>f</code> 属性，它的 <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 class="brush: js notranslate">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 +</pre> + +<h3 id="作为构造函数">作为构造函数</h3> + +<p>当一个函数用作构造函数时（使用<a href="/zh-CN/docs/Web/JavaScript/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 class="brush: js notranslate">/* + * 构造函数这样工作: + * + * 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 +</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 class="brush:js notranslate">// 被调用时，将关联的元素变成蓝色 +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<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> + +<h3 id="作为一个内联事件处理函数">作为一个内联事件处理函数</h3> + +<p>当代码被内联 <a href="/zh-CN/docs/Web/Guide/Events/Event_handlers">on-event 处理函数</a> 调用时，它的<code>this</code>指向监听器所在的DOM元素：</p> + +<pre class="brush: html notranslate"><button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +</pre> + +<p>上面的 alert 会显示 <code>button</code>。注意只有外层代码中的 <code>this</code> 是这样设置的：</p> + +<pre class="brush: html notranslate"><button onclick="alert((function(){return this})());"> + Show inner this +</button> +</pre> + +<p>在这种情况下，没有设置内部函数的 <code>this</code>，所以它指向 global/window 对象（即非严格模式下调用的函数未设置 <code>this</code> 时指向的默认对象）。</p> + +<h3 id="类中的this">类中的this</h3> + +<p>和其他普通函数一样，方法中的 <code>this</code> 值取决于它们如何被调用。有时，改写这个行为，让类中的 <code>this</code> 值总是指向这个类实例会很有用。为了做到这一点，可在构造函数中绑定类方法：</p> + +<pre class="notranslate">class Car { + constructor() { + // Bind sayBye but not sayHi to show the difference + this.sayBye = this.sayBye.bind(this); + } + sayHi() { + console.log(`Hello from ${this.name}`); + } + sayBye() { + console.log(`Bye from ${this.name}`); + } + get name() { + return 'Ferrari'; + } +} + +class Bird { + get name() { + return 'Tweety'; + } +} + +const car = new Car(); +const bird = new Bird(); + +// The value of 'this' in methods depends on their caller +car.sayHi(); // Hello from Ferrari +bird.sayHi = car.sayHi; +bird.sayHi(); // Hello from Tweety + +// For bound methods, 'this' doesn't depend on the caller +bird.sayBye = car.sayBye; +bird.sayBye(); // Bye from Ferrari</pre> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>类内部总是严格模式。调用一个 <code>this</code> 值为 undefined 的方法会抛出错误。</p> +</div> + +<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>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-this-keyword', 'The this keyword')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.1.1', 'The this keyword')}}</td> + <td>{{Spec2('ES1')}}</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 href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.operators.this")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/JavaScript/Reference/Strict_mode">严格模式</a></li> + <li><a href="http://rainsoft.io/gentle-explanation-of-this-in-javascript/">Gentle explanation of 'this' keyword in JavaScript</a></li> + <li>Getting the global context: {{jsxref("globalThis")}}</li> +</ul> |