マインドマップ＋コード例でスコープからスコープチェーンまでの知識ポイントが一目瞭然！

スコープ

J の私なりの要約として、スコープはそれほど長くはなりません。この記事は主に過去と次のリンクです。
後で、実行コンテキスト、クロージャ、およびその他の関連トピックについて説明しますが、内容が多くなりすぎないように、スコープ部分は個別にまとめます。

#目次

まえがき
• 1. スコープの定義
• 2. スコープについて
• 3. スコープチェーン
• 4. 感想とまとめ
• 5. 最後に書く

(無料学習の推奨事項: JavaScript ビデオ チュートリアル)

序文

JavaScript 内部スキル シリーズ:

これは詳細な説明を指しており、メンタル マップとコードの組み合わせにより、これを 1 つの記事で理解し、呼び出し、適用することができます。シリーズ (1)
1. プロトタイプからプロトタイプ チェーンまで、JavaScript 内部スキルの育成に関するこの記事は必見です。シリーズ (2)
2. この記事

1. 範囲の定義

このセクションの内容をまとめたマップ

注: スコープに加えて、最新のエンタープライズ レベルの Vue3.0/Js/ES6/TS/React/Node なども含まれます。 2020 チュートリアルの実践的なビデオ、ここをクリックして無料で入手します。初心者の方は入力しないでください。

#1.1 で使用される一般的な説明

#プログラム コードの一部 #名前
1. は常に有効であるとは限らず、その可用性を制限するスコープは名前のスコープです; スコープは
変数の検索方法
2. を指定します、つまり、現在の実行コードの変数へのアクセス許可を決定します; 平たく言えば、スコープとは、
特定の変数をどこでどのように見つけるかを決定するために使用される
3. ルールのセットです。変数のルール

   function func(){
   	var a = 100;
   	console.log(a); // 100}console.log(a) // a is not defined a变量并不是任何地方都可以被找到的

1.2 JavaScriptのスコープ作業モデル

JavaScriptは、静的スコープである字句スコープ(字句スコープ)を採用しています。

##関数のスコープは、関数が定義されるときに決定されます。

これに対応する動的スコープもあります:

関数のスコープは関数が呼び出されたときに決定されます。

#1.3 グローバル変数とローカル変数
• ##は次のように分割できます。 ##ローカル変数: 関数内でのみアクセス可能、関数外ではアクセス不可;

関数内で定義された変数

function fn(){
	var name = '余光';
	console.log(name);}console.log(name); // ？fn(); // ？

Global: どこからでもアクセス可能 到達したオブジェクトのスコープはグローバルです。

関数の外で定義された変数

• すべての未定義変数および直接割り当てられた変数は、グローバル スコープを持つように自動的に宣言されます

var a = 100;console.log('a1-',a);function fn(){
	a = 1000;
	console.log('a2-',a);}console.log('a3-',a);fn();console.log('a4-',a);

注: ES6 以降 ブロックレベル範囲が提案されていますが、それらの違いについては後で説明します。

• #2. 範囲を理解する

#最初のセクションの説明に従って、1 つずつ確認してみましょう

2.1 字句スコープの理解

var value = 1;function foo() {
    console.log(value);}function bar() {
    var value = 2;
    foo();}bar();

定義に基づいて分析しましょう:

は

bar

関数を実行し、ローカルスコープは関数内で形成されます ;

値変数を宣言し、値を代入します 2

foo

関数を実行します。

value
• 変数はありません関数 foo のスコープ内にあり、エクスポートされます。 検索 字句スコープの規則に従って、関数が定義されると、
foo
• の外部スコープがグローバル スコープになります
• 印刷結果 は 1
動的スコープの場合: 結果
• は 2 わかりましたか?外？
• 2.2 グローバル変数

  var str = '全局变量';function func(){
  	console.log(str+1);
  	function childFn(){
  		console.log(str+2);
  		function fn(){
  			console.log(str+3);
  		};
  		fn();
  	};
  	childFn();}func();// 全局变量1// 全局变量2// 全局变量3

次のコードを分析してみましょう:

var a = 100;function fn(){
	a = 1000;
	console.log('a1-',a);}console.log('a2-',a);fn();console.log('a3-',a);// a2- 100 // 在当前作用域下查找变量a => 100// a1- 1000 // 函数执行时，全局变量a已经被重新赋值// a3- 1000 // 全局变量a => 1000

2.3 ローカル スコープ

ローカル スコープは通常、固定コード フラグメント内でのみアクセスできます。最も一般的なのは関数ユニットです:

function fn(){
    var name="余光";
    function childFn(){
        console.log(name);
    }
    childFn(); // 余光}console.log(name); // name is not defined

3. スコープ チェーン

3.1 何が起こるか変数を探すときは?

は、最初に現在の

コンテキストの変数オブジェクト から検索します。

見つからない場合は、親 (先頭の親) から検索します。字句レベル) レベル)

実行コンテキストの変数オブジェクトを検索します ;

グローバル コンテキストの変数オブジェクト (グローバル オブジェクト) を常に検索します;

• スコープ チェーンの最上位はグローバル オブジェクトです。
このように
• 複数の実行コンテキスト変数オブジェクトで構成されるリンク リストはスコープ チェーン と呼ばれ、プロトタイプと非常によく似ています。ある意味プロトタイプチェーンです。
• 3.2 スコープ チェーンとプロトタイプ継承検索の違い:
• • 查找一个普通对象的属性，但是在当前对象和其原型中都找不到时，会返回undefined
  • 查找的属性在作用域链中不存在的话就会抛出ReferenceError。

  3.3 作用域嵌套

  既然每一个函数就可以形成一个作用域（词法作用域 || 块级作用域），那么当然也会存在多个作用域嵌套的情况，他们遵循这样的查询规则：

  • 内部作用域有权访问外部作用域;
  • 外部作用域无法访问内部作用域;（真是是这样吗？）
  • 兄弟作用域不可互相访问;

  在《你不知道的Js》中，希望读者可以将作用域的嵌套和作用域链想象成这样：

  

  四、思考与总结

  4.1 总结

  

  4.2 思考

  最后，让我们看一个《JavaScript权威指南》中的两段代码：

  var scope = "global scope";function checkscope1(){
      var scope = "local scope";
      function f(){
          return scope;
      }
      return f(); // 注意}checkscope1();var scope = "global scope";function checkscope2(){
      var scope = "local scope";
      function f(){
          return scope;
      }
      return f;}checkscope2()();

  两段代码的结果都是"local scope"，书中的回答是：JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里，其中的变量 scope 一定是局部变量，不管何时何地执行函数 f()，这种绑定在执行 f() 时依然有效。

  但是它们内部经历的事情是一样的吗？

  相关免费学习推荐：javascript视频教程

以上がマインドマップ＋コード例でスコープからスコープチェーンまでの知識ポイントが一目瞭然！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。