diff options
author | Irvin <irvinfly@gmail.com> | 2022-02-16 02:02:49 +0800 |
---|---|---|
committer | Irvin <irvinfly@gmail.com> | 2022-02-16 02:35:54 +0800 |
commit | 01b0e12ba27b5069248fd09235e9a7143915ee30 (patch) | |
tree | 0e9edf538dc3fa3331e1dbb79239b58186765f86 /files/zh-cn/web/javascript/reference/operators/this | |
parent | 6ca84f1794af830ada9736d7289ce29aabb04ca3 (diff) | |
download | translated-content-01b0e12ba27b5069248fd09235e9a7143915ee30.tar.gz translated-content-01b0e12ba27b5069248fd09235e9a7143915ee30.tar.bz2 translated-content-01b0e12ba27b5069248fd09235e9a7143915ee30.zip |
remove `notranslate` class in zh-CN
Diffstat (limited to 'files/zh-cn/web/javascript/reference/operators/this')
-rw-r--r-- | files/zh-cn/web/javascript/reference/operators/this/index.html | 46 |
1 files changed, 23 insertions, 23 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 index aea931541f..86616407d0 100644 --- a/files/zh-cn/web/javascript/reference/operators/this/index.html +++ b/files/zh-cn/web/javascript/reference/operators/this/index.html @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Operators/this <h2 id="语法">语法</h2> -<pre class="syntaxbox notranslate">this</pre> +<pre class="syntaxbox">this</pre> <h3 id="值">值</h3> @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Operators/this <p>无论是否在严格模式下,在全局执行环境中(在任何函数体外部)<code>this</code> 都指向全局对象。</p> -<pre class="brush:js notranslate">// 在浏览器中, window 对象同时也是全局对象: +<pre class="brush:js">// 在浏览器中, window 对象同时也是全局对象: console.log(this === window); // true a = 37; @@ -52,7 +52,7 @@ console.log(b) // "MDN"</pre> <p>因为下面的代码不在严格模式下,且 <code>this</code> 的值不是由该调用设置的,所以 <code>this</code> 的值默认指向全局对象,浏览器中就是 {{domxref("Window", "window")}}。</p> -<pre class="brush:js notranslate">function f1(){ +<pre class="brush:js">function f1(){ return this; } //在浏览器中: @@ -64,7 +64,7 @@ f1() === globalThis; <p>然而,在严格模式下,如果进入执行环境时没有设置 <code>this</code> 的值,<code>this</code> 会保持为 <code>undefined</code>,如下:</p> -<pre class="brush:js notranslate">function f2(){ +<pre class="brush:js">function f2(){ "use strict"; // 这里是严格模式 return this; } @@ -82,7 +82,7 @@ f2() === undefined; // true <p>在类的构造函数中,<code>this</code> 是一个常规对象。类中所有非静态的方法都会被添加到 <code>this</code> 的原型中:</p> -<pre class="notranslate">class Example { +<pre>class Example { constructor() { const proto = Object.getPrototypeOf(this); console.log(Object.getOwnPropertyNames(proto)); @@ -102,7 +102,7 @@ new Example(); // ['constructor', 'first', 'second']</pre> <p>不像基类的构造函数,派生类的构造函数没有初始的 <code>this</code> 绑定。在构造函数中调用 {{jsxref("Operators/super", "super()")}} 会生成一个 <code>this</code> 绑定,并相当于执行如下代码,Base为基类:</p> -<pre class="notranslate">this = new Base();</pre> +<pre>this = new Base();</pre> <div class="blockIndicator warning"> <p><strong>警告:</strong>在调用 <code>super()</code> 之前引用 <code>this</code> 会抛出错误。</p> @@ -110,7 +110,7 @@ new Example(); // ['constructor', 'first', 'second']</pre> <p>派生类不能在调用 <code>super()</code> 之前返回,除非其构造函数返回的是一个对象,或者根本没有构造函数。</p> -<pre class="notranslate">class Base {} +<pre>class Base {} class Good extends Base {} class AlsoGood extends Base { constructor() { @@ -147,7 +147,7 @@ whatsThis.apply(obj); // 'Custom' 因为函数中的 this 被设置为obj <h3 id="this_和对象转换">this 和对象转换</h3> -<pre class="notranslate">function add(c, d) { +<pre>function add(c, d) { return this.a + this.b + c + d; } @@ -164,7 +164,7 @@ add.apply(o, [10, 20]); // 34 <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() { +<pre>function bar() { console.log(Object.prototype.toString.call(this)); } @@ -176,7 +176,7 @@ bar.call(undefined); // [object global]</pre> <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(){ +<pre class="brush:js">function f(){ return this.a; } @@ -194,7 +194,7 @@ console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty <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; +<pre class="brush: js">var globalObject = this; var foo = (() => this); console.log(foo() === globalObject); // true</pre> @@ -202,7 +202,7 @@ console.log(foo() === globalObject); // true</pre> <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">// 接着上面的代码 +<pre class="brush: js">// 接着上面的代码 // 作为对象的一个方法调用 var obj = {foo: foo}; console.log(obj.foo() === globalObject); // true @@ -216,7 +216,7 @@ console.log(foo() === globalObject); // true</pre> <p>无论如何,<code>foo</code> 的 <code>this</code> 被设置为他被创建时的环境(在上面的例子中,就是全局对象)。这同样适用于在其他函数内创建的箭头函数:这些箭头函数的<code>this</code>被设置为封闭的词法环境的。</p> -<pre class="brush: js notranslate">// 创建一个含有bar方法的obj对象, +<pre class="brush: js">// 创建一个含有bar方法的obj对象, // bar返回一个函数, // 这个函数返回this, // 这个返回的函数是以箭头函数创建的, @@ -252,7 +252,7 @@ console.log(fn2()() == window); // true</pre> <p>下面的例子中,当 <code>o.f()</code> 被调用时,函数内的 <code>this</code> 将绑定到 <code>o</code> 对象。</p> -<pre class="brush:js notranslate">var o = { +<pre class="brush:js">var o = { prop: 37, f: function() { return this.prop; @@ -264,7 +264,7 @@ console.log(o.f()); // 37 <p>请注意,这样的行为完全不会受函数定义方式或位置的影响。在前面的例子中,我们在定义对象<code>o</code>的同时,将其中的函数定义为成员 <code>f</code> 。但是,我们也可以先定义函数,然后再将其附属到<code>o.f</code>。这样做的结果是一样的:</p> -<pre class="brush:js notranslate">var o = {prop: 37}; +<pre class="brush:js">var o = {prop: 37}; function independent() { return this.prop; @@ -279,14 +279,14 @@ console.log(o.f()); // 37 <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}; +<pre class="brush: js"><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 = { +<pre class="brush:js">var o = { f: function() { return this.a + this.b; } @@ -304,7 +304,7 @@ console.log(p.f()); // 5 <p>再次,相同的概念也适用于当函数在一个 <code>getter</code> 或者 <code>setter</code> 中被调用。用作 <code>getter</code> 或 <code>setter</code> 的函数都会把 <code>this</code> 绑定到设置或获取属性的对象。</p> -<pre class="brush: js notranslate">function sum() { +<pre class="brush: js">function sum() { return this.a + this.b + this.c; } @@ -331,7 +331,7 @@ console.log(o.average, o.sum); // logs 2, 6 <p>虽然构造函数返回的默认值是 <code>this</code> 所指的那个对象,但它仍可以手动返回其他的对象(如果返回值不是一个对象,则返回 <code>this</code> 对象)。</p> </div> -<pre class="brush: js notranslate">/* +<pre class="brush: js">/* * 构造函数这样工作: * * function MyConstructor(){ @@ -370,7 +370,7 @@ console.log(o.a); // logs 38 <p>当函数被用作事件处理函数时,它的 <code>this</code> 指向触发事件的元素(一些浏览器在使用非 <code>addEventListener</code> 的函数动态地添加监听函数时不遵守这个约定)。</p> -<pre class="brush:js notranslate">// 被调用时,将关联的元素变成蓝色 +<pre class="brush:js">// 被调用时,将关联的元素变成蓝色 function bluify(e){ console.log(this === e.currentTarget); // 总是 true @@ -391,14 +391,14 @@ for(var i=0 ; i<elements.length ; i++){ <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());"> +<pre class="brush: html"><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})());"> +<pre class="brush: html"><button onclick="alert((function(){return this})());"> Show inner this </button> </pre> @@ -409,7 +409,7 @@ for(var i=0 ; i<elements.length ; i++){ <p>和其他普通函数一样,方法中的 <code>this</code> 值取决于它们如何被调用。有时,改写这个行为,让类中的 <code>this</code> 值总是指向这个类实例会很有用。为了做到这一点,可在构造函数中绑定类方法:</p> -<pre class="notranslate">class Car { +<pre>class Car { constructor() { // Bind sayBye but not sayHi to show the difference this.sayBye = this.sayBye.bind(this); |