序文
関数がパラメーターを渡すとき、パラメーターにもスコープがあります。これに遭遇したことがありますか？それを聞いて、基本的には日常の開発では似たようなコードに出会うことはなく、面接の質問もあるので、すごいと思いました。テストは機能の全体的な理解についてです。今日は、関数のパラメータースコープについて詳しく説明しましょう。
例
以下のコードを見て、その出力について考えてください
var x = 0
var k = 99
function bar(s = () => { console.log(this); }) {
var j = 'zj'
function foo(x,
y = function () { x = 3; k = 100; j = 'yy'; console.log(x); },
a = () => { console.log(this); }
) {
console.log(x)
var x = 2
var k = 88
console.log(j);
y()
a()
console.log(x)
console.log(k)
}
foo.call({ name: 'ving' }, 1)
console.log(j);
s()
}
bar.call({ name: 'king' })
console.log(x)
console.log(k)
复制代码それを読んだ後、あなたの答えは何ですか？
// 1
// zj
// 3
// {name:ving}
// 2
// 88
// yy
// {name:king}
// 0
// 100
复制代码正解したハンサムな男はコメントに傲慢を入れることができます
とにかく、それは私が見たものです
解析
まず、パラメータスコープとは何かを理解しましょう。
パラメータスコープはどのように形成されますか？すべての関数にパラメータスコープがありますか？
いいえ、関数のパラメーターにデフォルト値がある場合にのみ、関数は新しいスコープを形成します。このスコープは、パラメーターの値を保持するために使用されます。つまり、関数には、パラメータースコープと関数本体スコープの2つのスコープがあります。
では、これら2つのスコープの関係は何でしょうか。
大丈夫、冗談です。正確には、それは少し重要です。これらの2つのスコープは互いに独立しており（封じ込め関係はありません!!!）、それらの間の接続はパラメーターを介してのみ通信できます。つまり、パラメータスコープがパラメータの値を変更すると、関数本体スコープの値の変更に影響します。これは少し抽象的であり、コードを通して分析すると理解できます。もう1つの注意点は、パラメータースコープの上位スコープと関数本体スコープの上位スコープが同じであるということです。
var x = 0
var k = 99
function bar(s = () => { console.log(this); // 八 }) {
var j = 'zj'
function foo(x,
y = function () { x = 3; k = 100; j = 'yy'; console.log(x); // 三 },
a = () => { console.log(this);// 四 }
) {
console.log(x) // 一
var x = 2
var k = 88
console.log(j); // 二
y()
a()
console.log(x) // 五
console.log(k) // 六
}
foo.call({ name: 'ving' }, 1)
console.log(j); // 七
s()
}
bar.call({ name: 'king' })
console.log(x) // 九
console.log(k) // 十
复制代码上記のように、コードの実行順序をマークしました。段階的に分析してみましょう。
1：関数の事前解析変数がプロモートされた後、fooは値1を渡してx = 1を変更し
ます。2：パラメータースコープは関数本体スコープから独立しているため、アクセスは上部スコープバーのj='zj'です
。 ：パラメータスコープにはxがあります。そうでない場合は、foo関数本体のスコープではなくbar->windowを検索します。したがって、x = 3
4：aは矢印関数であり、矢印関数は上位スコープを指します。（パラメータースコープの上位スコープと関数本体スコープの上位スコープは同じです）したがって、this = {name：ving}次のコードと図の分析を参照してください。
function bar(s = () => { console.log(this); // { name: 'king' } }) {
const jj = () => {
console.log(this); // { name: 'king' }
}
jj()
s()
}
bar.call({ name: 'king' })
复制代码描く
5：関数本体スコープの値はx = 2
6：上記と同じk = 88
7：関数本体スコープの値はありますが、プロセス3が実行されると、jが再割り当てされるためj ='yy'
8：と同じ4番目の例、this = {name：king}
9：x = 0 3番目のプロセスの実行時に変更される最初のパラメーターxはグローバルxではないため、グローバルは変更されません
Ten：k =1003番目のプロセスの実行時、パラメータスコープにkがなく、上位スコープがないため、グローバルkが変更され、トップレベルウィンドウにkのみが表示されます。
終わり
終わった、わかった！
簡単な要約の下でのこのタイプのトピックの要点：
1。パラメータースコープと関数本体スコープは互いに独立していますが、上位レベルのスコープは同じです。
2.これは次のことを指します。パラメータスコープの矢印関数のこれは、以前のスコープを指します。これは、それ自体のこれです。
これらの2つのポイントを覚えておいてください。将来、同様の質問が薬の代わりにスープを変えるでしょう。
いいね！やんず