JavaScript に対する 6 つの障壁-jsチュートリアル-php.cn

JavaScript に対する 6 つの障壁

黄舟

リリース： 2017-02-21 11:17:37

オリジナル

1403 人が閲覧しました

このコケティッシュな仕組みを考えると、これを理解することは時代を超えたテーマであり、この記事では、この迷惑な妖精を 6 つの部分に分割して釘付けにしようとします。

まず第一に、

これはすべてコンテキストに関するものです。

これは、率直に言うと、現在のコンテキストを所有するボスとコンテキストオブジェクトを見つけることです。

大きなボスは 6 つのレベルに分けられ、レベルが高いほど、最大のボスのみが認識されます。

第一レベル: 世界の終わり

通常の状況では、最も力の弱いボスが、ブラウザーで使用する場合はウィンドウになります。それは未定義です。

function showThis () {
console.log(this)
}
 
function showStrictThis () {
&#39;use strict&#39;
console.log(this)
}
 
showThis() // window
showStrictThis() // undefined

ログイン後にコピー

第 2 レベル: 石を金に変える

第 2 レベルのボスは率直に言います: この関数の前にあるドットを見つけてください。

this を使用する関数が context オブジェクトに属している場合、この context オブジェクトは this にバインドされます。

たとえば、次の例では、boss は returnThis のコンテキストオブジェクトであるか、returnThis は Boss に属します。

var boss = {
name: &#39;boss&#39;,
returnThis () {
return this
}
}
 
boss.returnThis() === boss // true

ログイン後にコピー

次の例に注意してください。答えを思いつくことができますか?

var boss1 = {
name: &#39;boss1&#39;,
returnThis () {
return this
}
}
 
var boss2 = {
name: &#39;boss2&#39;,
returnThis () {
return boss1.returnThis()
}
}
 
var boss3 = {
name: &#39;boss3&#39;,
returnThis () {
var returnThis = boss1.returnThis
return returnThis()
}
}
 
boss1.returnThis() // boss1
boss2.returnThis() // ?
boss3.returnThis() // ?

ログイン後にコピー

答えはboss1とwindow ああ、当てはまりましたか？

これを使用する関数を見てください。

boss2.returnThisでは、これを使用する関数はboss1.returnThisなので、これはboss1にバインドされています。

boss3.returnThisでは、これを使用する関数はreturnThisなので、これはスペアタイヤにバインドされています。

これをboss2にバインドするにはどうすればよいですか?

var boss1 = {
name: &#39;boss1&#39;,
returnThis () {
return this
}
}
 
var boss2 = {
name: &#39;boss2&#39;,
returnThis: boss1.returnThis
}
 
boss2.returnThis() //boss2

ログイン後にコピー

はい、これを使用する関数が Boss2 に属している限り、可能です。

第 3 レベル: 指先で結婚

第 3 レベルのボスは Object.prototype.call と Object.prototype.apply で、パラメーターを通じてこれを指定できます。 (これを直接割り当てることはできないことに注意してください。this = 2 は ReferenceError を報告します。)

function returnThis () {
return this
}
 
var boss1 = { name: &#39;boss1&#39; }
 
returnThis() // window
returnThis.call(boss1) // boss1
returnThis.apply(boss1) // boss1

ログイン後にコピー

第 4 レベル: 相互

第 4 レベルのボスは Object.prototype.bind で、これは新しい関数を通じて永続性を提供するだけではありません。このバインディングは、第 3 レベルのボスのコマンドもカバーします。

function returnThis () {
return this
}
 
var boss1 = { name: &#39;boss1&#39;}
 
var boss1returnThis = returnThis.bind(boss1)
 
boss1returnThis() // boss1
 
var boss2 = { name: &#39;boss2&#39; }
boss1returnThis.call(boss2) // still boss1

ログイン後にコピー

第 5 層: 中にはすべてがあります

これを無視してバインドするのが簡単な場所は新しいです。新しい関数を作成すると、これは自動的に新しいオブジェクトにバインドされ、関数が呼び出されます。これは、bind のバインディングをオーバーライドします。

function showThis () {
console.log(this)
}
 
showThis() // window
new showThis() // showThis
 
var boss1 = { name: &#39;boss1&#39; }
showThis.call(boss1) // boss1
new showThis.call(boss1) // TypeError
 
var boss1showThis = showThis.bind(boss1)
boss1showThis() // boss1
new boss1showThis() // showThis

ログイン後にコピー

レベル 6: 軍令の山

最後の強力なボスは、ES2015 のアロー機能です。アロー関数の this はもはや魅力的なものではなく、Lexical this と呼ばれる現在の語彙スコープに永久に封印されており、コードが実行される前に決定できます。他の偉人はそれをカバーできません。

これの利点は、混乱を引き起こすことを恐れずに、コールバック関数の this が現在のスコープを使用するのに便利であることです。

したがって、アロー関数については、それが作成された場所を見てください。

V8 によって実装された語彙スコープに興味がある場合は、ここを参照してください。

function callback (cb) {
cb()
}
 
callback(() => { console.log(this) }) // window
 
var boss1 = {
name: &#39;boss1&#39;,
callback: callback,
callback2 () {
callback(() => { console.log(this) })
}
}
 
boss1.callback(() => { console.log(this) }) // still window
boss1.callback2(() => { console.log(this) }) // boss1

ログイン後にコピー

次の奇妙な使用法に注意する必要があります:

var returnThis = () => this
 
returnThis() // window
new returnThis() // TypeError
 
var boss1 = {
name: &#39;boss1&#39;,
returnThis () {
var func = () => this
return func()
}
}
 
returnThis.call(boss1) // still window
 
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // still window
 
boss1.returnThis() // boss1
 
var boss2 = {
name: &#39;boss2&#39;,
returnThis: boss1.returnThis
}
 
boss2.returnThis() // boss2

ログイン後にコピー

なぜ最終的に Boss2 なのかわからない場合は、「アロー関数については、それが作成された場所を見てください。」という文を理解してください。

上記は JavaScript の 6 つのハードルの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。