mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2026-02-27 09:32:01 +08:00
语法高亮，滚动条美化，设置页面调整
This commit is contained in:
fofolee
@@ -8,12 +8,12 @@
|
||||
<p>填充</p>
|
||||
</div>
|
||||
<h2 id="语法">语法</h2>
|
||||
<pre class="syntaxbox">this</pre>
|
||||
<pre><code class="language-javascript">this</code></pre>
|
||||
<h3 id="值">值</h3>
|
||||
<p>当前执行代码的环境对象</p>
|
||||
<h2 id="全局环境">全局环境</h2>
|
||||
<p>无论是否在严格模式下，在全局执行环境中（在任何函数体外部）<code>this</code> 都指向全局对象。</p>
|
||||
<pre class="brush:js">// 在浏览器中, window 对象同时也是全局对象：
|
||||
<pre><code class="language-js">// 在浏览器中, window 对象同时也是全局对象：
|
||||
console.log(this === window); // true
|
||||
|
||||
a = 37;
|
||||
@@ -21,12 +21,12 @@ console.log(window.a); // 37
|
||||
|
||||
this.b = "MDN";
|
||||
console.log(window.b) // "MDN"
|
||||
console.log(b) // "MDN"</pre>
|
||||
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 class="brush:js">function f1(){
|
||||
<pre><code class="language-js">function f1(){
|
||||
return this;
|
||||
}
|
||||
//在浏览器中：
|
||||
@@ -34,19 +34,19 @@ f1() === window; //在浏览器中，全局对象是window
|
||||
|
||||
//在Node中：
|
||||
f1() === global;
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>然而，在严格模式下，<code>this</code>将保持他进入执行环境时的值，所以下面的<code>this</code>将会默认为<code>undefined</code>。</p>
|
||||
<pre class="brush:js">function f2(){
|
||||
<pre><code class="language-js">function f2(){
|
||||
"use strict"; // 这里是严格模式
|
||||
return this;
|
||||
}
|
||||
|
||||
f2() === undefined; // true
|
||||
</pre>
|
||||
</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 class="brush: js">// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
|
||||
<pre><code class="language-javascript">// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
|
||||
var obj = {a: 'Custom'};
|
||||
|
||||
// 这个属性是在global对象定义的。
|
||||
@@ -59,9 +59,9 @@ function whatsThis(arg) {
|
||||
whatsThis(); // 'Global'
|
||||
whatsThis.call(obj); // 'Custom'
|
||||
whatsThis.apply(obj); // 'Custom'
|
||||
</pre>
|
||||
</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 class="brush: js">function add(c, d) {
|
||||
<pre><code class="language-javascript">function add(c, d) {
|
||||
return this.a + this.b + c + d;
|
||||
}
|
||||
|
||||
@@ -73,18 +73,18 @@ add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
|
||||
|
||||
// 第一个参数也是作为‘this’使用的对象
|
||||
// 第二个参数是一个数组，数组里的元素用作函数调用中的参数
|
||||
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34</pre>
|
||||
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 class="brush: js">function bar() {
|
||||
<pre><code class="language-javascript">function bar() {
|
||||
console.log(Object.prototype.toString.call(this));
|
||||
}
|
||||
|
||||
//原始值 7 被隐式转换为对象
|
||||
bar.call(7); // [object Number]
|
||||
</pre>
|
||||
</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 class="brush:js">function f(){
|
||||
<pre><code class="language-js">function f(){
|
||||
return this.a;
|
||||
}
|
||||
|
||||
@@ -96,16 +96,16 @@ 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
|
||||
</pre>
|
||||
</code></pre>
|
||||
<h3 id="箭头函数">箭头函数</h3>
|
||||
<p>在<a href="Reference/Functions/Arrow_functions">箭头函数</a>中，<code>this</code>与封闭词法环境的<code>this</code>保持一致。在全局代码中，它将被设置为全局对象：</p>
|
||||
<pre class="brush: js">var globalObject = this;
|
||||
<pre><code class="language-javascript">var globalObject = this;
|
||||
var foo = (() => this);
|
||||
console.log(foo() === globalObject); // true</pre>
|
||||
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 class="brush: js">// 接着上面的代码
|
||||
<pre><code class="language-javascript">// 接着上面的代码
|
||||
// 作为对象的一个方法调用
|
||||
var obj = {foo: foo};
|
||||
console.log(obj.foo() === globalObject); // true
|
||||
@@ -115,9 +115,9 @@ console.log(foo.call(obj) === globalObject); // true
|
||||
|
||||
// 尝试使用bind来设定this
|
||||
foo = foo.bind(obj);
|
||||
console.log(foo() === globalObject); // true</pre>
|
||||
console.log(foo() === globalObject); // true</code></pre>
|
||||
<p>无论如何，<code>foo</code> 的 <code>this</code> 被设置为他被创建时的环境（在上面的例子中，就是全局对象）。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的<code>this</code>被设置为封闭的词法环境的。</p>
|
||||
<pre class="brush: js">// 创建一个含有bar方法的obj对象，
|
||||
<pre><code class="language-javascript">// 创建一个含有bar方法的obj对象，
|
||||
// bar返回一个函数，
|
||||
// 这个函数返回this，
|
||||
// 这个返回的函数是以箭头函数创建的，
|
||||
@@ -143,12 +143,12 @@ console.log(fn() === obj); // true
|
||||
// 而没有调用它
|
||||
var fn2 = obj.bar;
|
||||
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
|
||||
console.log(fn2()() == window); // true</pre>
|
||||
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 class="brush:js">var o = {
|
||||
<pre><code class="language-js">var o = {
|
||||
prop: 37,
|
||||
f: function() {
|
||||
return this.prop;
|
||||
@@ -156,9 +156,9 @@ console.log(fn2()() == window); // true</pre>
|
||||
};
|
||||
|
||||
console.log(o.f()); // logs 37
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>请注意，这样的行为，根本不受函数定义方式或位置的影响。在前面的例子中，我们在定义对象<code>o</code>的同时，将函数内联定义为成员 <code>f</code> 。但是，我们也可以先定义函数，然后再将其附属到<code>o.f</code>。这样做会导致相同的行为：</p>
|
||||
<pre class="brush:js">var o = {prop: 37};
|
||||
<pre><code class="language-js">var o = {prop: 37};
|
||||
|
||||
function independent() {
|
||||
return this.prop;
|
||||
@@ -167,14 +167,14 @@ function independent() {
|
||||
o.f = independent;
|
||||
|
||||
console.log(o.f()); // logs 37
|
||||
</pre>
|
||||
</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 class="brush: js"><code>o.b = {g: independent, prop: 42};
|
||||
console.log(o.b.g()); // 42</code></pre>
|
||||
<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 class="brush:js">var o = {
|
||||
<pre><code class="language-js">var o = {
|
||||
f: function() {
|
||||
return this.a + this.b;
|
||||
}
|
||||
@@ -184,11 +184,11 @@ p.a = 1;
|
||||
p.b = 4;
|
||||
|
||||
console.log(p.f()); // 5
|
||||
</pre>
|
||||
</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 class="brush: js">function sum() {
|
||||
<pre><code class="language-javascript">function sum() {
|
||||
return this.a + this.b + this.c;
|
||||
}
|
||||
|
||||
@@ -205,13 +205,13 @@ Object.defineProperty(o, 'sum', {
|
||||
get: sum, enumerable: true, configurable: true});
|
||||
|
||||
console.log(o.average, o.sum); // logs 2, 6
|
||||
</pre>
|
||||
</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 class="brush: js">/*
|
||||
<pre><code class="language-javascript">/*
|
||||
* 构造函数这样工作:
|
||||
*
|
||||
* function MyConstructor(){
|
||||
@@ -242,11 +242,11 @@ function C2(){
|
||||
|
||||
o = new C2();
|
||||
console.log(o.a); // logs 38
|
||||
</pre>
|
||||
</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 class="brush:js">// 被调用时，将关联的元素变成蓝色
|
||||
<pre><code class="language-js">// 被调用时，将关联的元素变成蓝色
|
||||
function bluify(e){
|
||||
console.log(this === e.currentTarget); // 总是 true
|
||||
|
||||
@@ -261,18 +261,18 @@ var elements = document.getElementsByTagName('*');
|
||||
// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
|
||||
for(var i=0 ; i<elements.length ; i++){
|
||||
elements[i].addEventListener('click', bluify, false);
|
||||
}</pre>
|
||||
}</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 class="brush: html"><button onclick="alert(this.tagName.toLowerCase());">
|
||||
<pre><code class="language-html"><button onclick="alert(this.tagName.toLowerCase());">
|
||||
Show this
|
||||
</button>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>上面的 alert 会显示<code>button</code>。注意只有外层代码中的<code>this</code>是这样设置的：</p>
|
||||
<pre class="brush: html"><button onclick="alert((function(){return this})());">
|
||||
<pre><code class="language-html"><button onclick="alert((function(){return this})());">
|
||||
Show inner this
|
||||
</button>
|
||||
</pre>
|
||||
</code></pre>
|
||||
<p>在这种情况下，没有设置内部函数的<code>this</code>，所以它指向 global/window 对象（即非严格模式下调用的函数未设置<code>this</code>时指向的默认对象）。</p>
|
||||
<h2 id="规范">规范</h2>
|
||||
<table class="standard-table">
|
||||
|
||||
Reference in New Issue
Block a user