JavaScriptスコープ、変数プロモーション

你越是认真生活，你的生活就会越美好-フランクロイドライト
「生命の果実」の古典的な引用

JavaScriptスコープ

作用域はい可访问变量、コレクションです。

JavaScriptでは、对象和函数これも変数です。

で作用域为可访问变量，对象，函数的集合JavaScriptを、。

JavaScript 函数作用域：スコープは関数内で変更されます。

JavaScriptローカルスコープ

変数はに函数内声明あり、変数はローカルスコープです。

ローカル只能在函数内部访问変数：。

// 此处不能调用 carName 变量
function myFunction() {
    
    
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

それがあるため局部变量にのみ機能します函数内、それは不同的函数使用することができます相同名称的变量。

局部变量関数の実行開始時に作成され、函数执行完后ローカル変数はになります自动销毁。

JavaScriptグローバル変数

変数が函数外定義されてい全局变量ます。つまり、です。

グローバル変数は全局作用域：で所有脚本あり、Webページの関数を使用できます。

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    
    
    // 函数内可调用 carName 变量
}

変数函数内没有声明（var该变量为全局变量）の場合、キーワード。

次の例では、carNameは関数内にありますが、グローバル変数です。

function myFunction() {
    
    
    carName = "Volvo";
    // 此处可调用 carName 变量
}
myFunction()
// 此处可调用 carName 变量  前提是myFunction函数执行过
console.log(carName) // Volvo

JavaScriptの可変ライフサイクル

JavaScript 变量生命周期その中で声明时初始化。

局部变量で函数执行完毕后销毁。

全局变量で页面关闭后销毁。

関数パラメーター

函数参数函数内はい、動作するだけ局部变量です。

HTMLのグローバル変数

HTMLでは、グローバル変数はウィンドウオブジェクトです。すべてのデータ変数はウィンドウオブジェクトに属します。

function myFunction() {
    
    
    carName = "Volvo";
}
myFunction()

//此处可使用 window.carName
console.log(window.carName)

PS：
グローバル変数または関数は、ウィンドウオブジェクトの変数または関数を上書きできます。
ウィンドウオブジェクトを含むローカル変数は、グローバル変数と関数をカバーできます。

ES6の変数とスコープ

letとconstでブロックスコープを決定する

letそしてconst、作成された変数は只在块作用域中有効です。それらは、それらを含むブロックにのみ存在します。以下に示すコードは、letを使用してifステートメントブロックでtmp変数を宣言します。この変数は、ifステートメントでのみ有効です。

function func() {
    
     
	if (true) {
    
     
		let tmp = 123; 
		console.log(tmp); // => 123 
	} 
}
func() // 123
console.log(tmp); // => ReferenceError: tmp is not defined

対照的に、var声明的变量スコープのスコープは函数范围内次のとおりです。

function func() {
    
    
	console.log(tmp) // undefined 变量声明提升 还没赋值
	if (true) {
    
    
		var tmp = 123
		console.log(tmp) // 123
	}
	console.log(tmp) // 123
}
func()
console.log(tmp) // Uncaught ReferenceError: tmp is not defined

ブロックスコープは、関数内で変数のシャドウを持つことができることを意味します。

function func() {
    
    
    let foo = 5;
    console.log(foo) // 5
    if(true) {
    
    
        let foo = 10;
        console.log(foo) // 10
    }
    console.log(foo) // 5
}
func()

constは不変の変数を作成します

let作成した変数は、変数です。

let foo = 'abc'
foo = 'def'
console.log(foo) // def

const変数の作成常量、変数は不可变次のとおりです。

const foo = 'abc'
foo = 'def' // Uncaught TypeError: Assignment to constant variable.

定数が1を参照している場合对象、const并不影响常量本身的值それは常にそのオブジェクトを指しているので、それは、変更可能ですが、オブジェクト自体はまだ変更することができます。

const obj = {
    
    }
obj.prop = 123
console.log(obj.prop) // 123
console.log(obj) // {prop: 123}
obj = {
    
    } // Uncaught TypeError: Assignment to constant variable.

あなたがobj本当に一つになりたいの常量なら、あなたはしなければなりません冻结它的值：

const obj = Object.freeze({
    
    }); 
obj.prop = 123;
console.log(obj) // {}

言い換えればconst定义、定数がオブジェクトを指している場合。このとき、実際には現在のオブジェクトのアドレスを指しています。このアドレスはスタックにあり、実際のオブジェクトはスタックにあります。したがって、constを使用してこのオブジェクトを定義した後、オブジェクトのコンテンツを変更できます。しかし这个地址是不可以改变的..。これは、このオブジェクトを再割り当てできないことを意味します。たとえばconst obj= {}, obj = {}、たとえそうであっても、objは何も変更していないように見えますが、それでも間違っています。
ただし、この普通模式場合、エラーは発生しませんが、obj.name = 'abc'の場合は完全に可能です。これは、JavaScriptが参照されるオブジェクトの値を格納する方法と密接に関連しています。

const obj = Object.freeze({
    
    })
const newObj = {
    
    }
obj.name = 'w3cplus'
newObj.name = 'damo'; 

console.log(obj) // {}
console.log(newObj) // {name: "damo"}

Babelを使用して、上記のES6コードをES5コードにコンパイルします。

'use strict';
var obj = Ob

JavaScript変数プロモーション

• JavaScriptでは、函数及变量的声明すべてがになります提升到函数的最顶部。

• JavaScript变量可以在使用后声明では、それは变量可以先使用再声明です。

• 类変動プロモーションなし

次の2つの例では、同じ結果が得られます。
例1

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

例2

var x; // 声明 x
x = 5; // 变量 x 设置为 5

console.log(x)  // 5

上記の例を理解するには、「hoisting(变量提升)」を理解する必要があります。

变量提升：函数声明そして变量声明通訳はいつも静かになり被"提升"到方法体的最顶部ます。

类変動プロモーションなし

new Foo() // Uncaught ReferenceError: Foo is not defined
class Foo {
    
    }

JavaScriptの初期化は改善されません

JavaScriptでは、宣言された変数のみがプロモートされ、初期化された変数はプロモートされません。
例1

var x = 5; // 初始化 x
var y = 7; // 初始化 y

console.log(x) // 5
console.log(y) // 7

例2

var x = 5; // 初始化 x

console.log(x) // 5
console.log(y) // undefined

var y = 7; // 初始化 y

例2のyは未定義を出力します。これは、変数宣言（var y）がプロモートされますが、初期化（y = 7）がプロモートされないため、y変数は未定義変数です。

例2は、次のコードに似ています。

var x = 5; // 初始化 x
var y;     // 声明 y

console.log(x) // 5
console.log(y) // undefined

y = 7;    // 设置 y 为 7

変数を先頭で宣言します

ほとんどのプログラマーは知りませんJavaScript 变量提升。

プログラマーが変数の昇格をよく理解していない場合、プログラマーが作成するプログラムにはいくつかの問題が発生しやすくなります。

これらの問題を回避するために、通常、在每个作用域开始前声明これらの変数を使用します。これは、通常のJavaScript解析ステップでもあり、理解しやすいものです。

---

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强

参照
JavaScriptスコープ

jsでこれのポイントを読んで理解することをお勧めします
（いくつかのルールと例+呼び出し、適用、バインドしてこのポイントを変更します）