一杯のお茶の努力、スコープとスコープチェーンを把握する

適切なヨーグルトを飲むと、半分の労力で2倍の結果が得られます！いくつかのあいまいな、ほとんど神話的な用語については、頭を悩ませないでください。コードに直接移動し、レンダリングするプレーン言語を追加して、今日のjavascriptの小さな丘をどのように処理するかを見てみましょう-スコープとスコープチェーン、洗練されただけではありません。

序文

最初に知っておく必要があるのはエンジンです。エンジンの動作は単純で失礼です。つまり、JavaScriptコードを最初から最後まで実行する責任があります。エンジンの良き友はコンパイラであり、主にコードの分析とコンパイルを担当します。エンジンのもう1つの良き友は、今日の主人公スコープです。では、スコープは何に使用されますか？スコープチェーンはスコープと何の関係がありますか？

まず、スコープ（スコープ）

スコープの定義：スコープは、実行時にコードの特定の部分にある変数、関数、およびオブジェクトのアクセシビリティです。

1.スコープの分類

1. グローバルスコープ

var name="global";
function foo(){
    console.log(name);
}
foo();//global

name変数は関数foo（）内で宣言されていませんが、nameの値は引き続き出力され、関数がグローバルスコープにアクセスしてname変数を読み取ることができることを示します。もう一つの例：

hobby='music';
function foo(){
    hobby='book';
    console.log(hobby);
}
foo();//book

ここでは、グローバルスコープも関数foo（）も変数hobbyを宣言していないのに、なぜエラーが発生しないのでしょうか。これはhobby='music';、グローバルスコープで記述されているためです。var、let、const宣言がなくても、ウィンドウオブジェクトにハングアップするため、関数foo（）は値を読み取るだけでなく、値を変更することもできます。つまり、とhobby='music';同等window.hobby='music';です。

2. 関数本体スコープ

関数本体のスコープは、内部を非表示にすることによって実現されます。つまり、よく言うように、内側のスコープは外側のスコープにアクセスできますが、外側のスコープは内側のスコープにアクセスできません。スコープチェーンに関しては、その理由は簡単に解決できます。

function foo(){
    var age=19;
    console.log(age);
}
console.log(age);//ReferenceError:age is not defined

明らかに、グローバルスコープには年齢変数はありませんが、関数foo（）は内部にありますが、外部からアクセスすることはできないため、エラーが自然に報告され、関数foo（）は次の場合は実行されません。呼び出されません。

3. ブロックスコープ

連絡したletスコープ、コードブロック{}、forループがlet、if、while、switchを使用する場合のスコープなど、ブロックレベルのスコープは驚くべきことではありません。ただし、ブロックレベルのスコープをより深く理解するための前提は、最初にこれらの用語を認識する必要があるということです。

--标识符：能在作用域生效的变量。函数的参数，变量，函数名。需要格外注意的是：函数体内部的标识符外部访问不到。

--函数声明：function 函数名(){}

--函数表达式： var 函数名=function(){}

--自执行函数： (function 函数名(){})()；自执行函数前面的语句必须有分号，通常用于隐藏作用域。

接下来我们就用一个例子，一口气展示完吧

function foo(sex){
    console.log(sex);
}
var f=function(){
    console.log('hello');
}
var height=180;
(
    function fn(){
        console.log(height);
    }
)();
foo('female');
//依次打印：
//180
//female
//hello

分析一下：标识符:foo,sex,height,fn;函数声明：function foo(sex){};函数表达式：var f=function(){};自执行函数：(function fn(){})();需要注意，自执行函数fn()前面的var height=180;语句，分号不能抛弃。否则，你可以试一下。

二、预编译

说好只是作用域和作用域链的，但是考虑到理解作用域链的必要性，这里还是先聊聊预编译吧。先讨论预编译在不同环境发生的情况下，是如何进行预编译的。

1. 发生在代码执行之前

（1）声明提升

console.log(b);
var b=123;//undefined

这里打印undefined,这不是报错，与Refference:b is not defined不同。这是代码执行之前，预编译的结果，等同于以下代码：

var b;//声明提升
console.log(b);//undefined
b=123;

（2）函数声明整体提升

test();//hello123  调用函数前并没有声明，但是任然打印，是因为函数声明整体提升了
function test(){
    var a=123;
    console.log('hello'+a);
}

2.发生在函数执行之前

理解这个只需要掌握四部曲：

（1）创建一个AO（Activation Object）

（2）找形参和变量声明，然后将形参和变量声明作为AO的属性名，属性值为undefined

（3）将实参和形参统一

（4）在函数体内找函数声明，将函数名作为AO对象的属性名，属性值予函数体 那么接下来就放大招了：

var global='window';
function foo(name,sex){
    console.log(name);
    function name(){};
    console.log(name);
    var nums=123;
    function nums(){};
    console.log(nums);
    var fn=function(){};
    console.log(fn);
}
foo('html');

这里的结果是什么呢？分析如下：

//从上到下
//1、创建一个AO（Activation Object）
AO:{
    //2、找形参和变量声明，然后将形参和变量声明作为AO的属性名，属性值为undefined
    name:undefined,
    sex:undefined,
    nums=undefined,
    fn:undefined,
    //3、将实参和形参统一
    name:html,
    sex:undefined,
    nums=123,
    fn:function(){},
    //4、在函数体内找函数声明，将函数名作为AO对象的属性名，属性值予函数体
    name:function(){},
    sex:undefined,
    fn:function(){},
    nums:123//这里不仅存在nums变量声明，也存在nums函数声明，但是取前者的值
    
    以上步骤得到的值，会按照后面步骤得到的值覆盖前面步骤得到的值
}
//依次打印
//[Function: name]
//[Function: name]
//123
//[Function: fn]

3.发生在全局（内层作用域可以访问外层作用域）

同发生在函数执行前一样，发生在全局的预编译也有自己的三部曲:

（1）GO（グローバルオブジェクト）オブジェクトを作成します（2）グローバル変数宣言を検索し、変数宣言をGOのプロパティ名として使用し、プロパティ値が未定義です（3）関数宣言をグローバルに検索し、関数を使用しますGOオブジェクトのプロパティ名としてのname。属性値は関数本体に割り当てられます。次に例を示します。

var global='window';
function foo(a){
    console.log(a);
    console.log(global);
    var b;
}
var fn=function(){};
console.log(fn);
foo(123);
console.log(b);

この例は比較的単純です。同じ手順やアイデアが分析で繰り返されることはありません。あなたはすでにそれを知っていると思います。印刷結果は次のとおりです。

[Function: fn]
123
window
ReferenceError: b is not defined

さて、軌道に乗って、スコープチェーンに移りましょう。

第三に、スコープチェーン

スコープチェーンは、内層が外層にアクセスできるのに、外層が内層にアクセスできない理由を見つけるのに役立ちます。しかし、繰り返しになりますが、スコープチェーンを理解する前に、もう少しあいまいな抽象的な用語を確認する必要があります。

1. 执行期上下文：関数を実行すると、実行コンテキスト（AOオブジェクト）と呼ばれるオブジェクトが作成されます。実行コンテキストは、関数が実行される環境を定義します。関数が実行されるたびに、対応する実行コンテキストは一意であるため、関数を複数回呼び出すと、複数の実行コンテキストが作成されます。関数が実行されると、生成された実行コンテキストは破棄されます。
2. 查找变量：スコープチェーンの先頭から下に検索します。

3 [[scope]].：スコープ付きプロパティは、暗黙的プロパティとも呼ばれ、エンジン自体によってのみサポートされます。ランタイムコンテキストのバインディングが格納されている、アクセスできない関数スコープ。

まず、関数の組み込みプロパティを見てみましょう。

function test(){//函数被创建的那一刻，就携带name,prototype属性
      console.log(123);
}
console.log(test.name);//test
console.log(test.prototype);//{} 原型
// console.log(test[[scope]]);访问不到,作用域属性，也称为隐式属性

// test() --->AO:{}执行完毕会回收
// test() --->AO:{}执行完毕会回收

スコープチェーンがどのように実装されているか見てみましょう。

var global='window';
function foo(){
    function fn(){
        var fn=222;
    }
    var foo=111;
    console.log(foo);
}
foo();

分析：

GO:{
    foo:function(){}
}
fooAO:{
    foo:111,
    fn:function(){}
}
fnAO:{
    fn:222
}
// foo定义时 foo.[[scope]]---->0:GO{}
// foo执行时 foo.[[scope]]---->0:AO{}  1:GO{}  后访问的在前面
//fn定义时 fn.[[scope]]---->0:fnAO{} 1:fooAO{}  2:GO{}
fnAO:fn的AO对象；fooAO:foo的AO对象

総括する：作用域链就是[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫做作用域链。