JS加算（1） - 可変環境 - コードワールド

1.データ

1.1データ型

基本的なデータUndefinedタイプ：Null、Boolean、Number、String、、Symbol
参照データの種類：Object

1.2データストレージ

基本データ型は、スタックメモリに格納され、実際のデータである変数値の値は、変数の割り当ては、コピーの値です。

const num1 = 5 // 在栈内存中生成一个值为5的数据赋值给num1
const num2 = num1 // 在栈内存中再次生成一个值为5的数据赋值给num2
// num1 和 num2 实际是两片不同的栈内存数据，只是值相同，互相独立

参照データ型は、ヒープメモリに格納され、変数のアドレス値は、コピー変数のアドレスをコピーするための実際のデータです。

const obj1 = {} // 在堆内存中生成一个空对象，将对象的引用地址赋值给obj1
const obj2 = obj1 // 不对堆内存做任何操作，将对象obj1的引用地址复制给obj2
// obj1 和 obj2 实际是同一片堆内存数据，除变量名不同外，两者完全相同，修改对象会互相影响

1.3検出との比較データ

typeof検出変数のデータ型。注：typeof null = 'object'
に等しい('==')ときのデータ型変換が自動で比較します。注：参照データ型は、呼び出すvalueOf方法

const obj1 = {}
const obj2 = {
    valueOf () { return 1 }
}
console.log(obj1 == 1, obj2 == 1) // false true

合同('===')：データ型の比較値は、比較的アドレスは、参照データ型であります

2.変数

2.1変数を定義

JS変数は、データの任意のタイプ、デフォルト値を格納するために使用することができ、緩やかなタイプですundefined
var：定義する前に、デフォルト値を使用して範囲の最上部に、事前に宣言された変数、文は、値を変更し、同じ変数を反復することができる
const：なし、事前に宣言されていません使用前に定義することができない、定義を繰り返すことができない、変更することができない値
let：予めない宣言は、定義の前に使用することができない、定義を繰り返すことができない、値を修正することができません

2.2事前の声明

事前に宣言された変数：変数のVAR定義の使用は、変数は、ファイル名を指定して実行行のトップレベルの機能割り当てで宣言しました

console.log(a, b) // undefined undefined
if (false) {
    var a = 10
} else {
    var b = 10
    (function f() {
        console.log(c) // undefined
        var c = 10
        console.log(c) // 10
    }())
}
console.log(a, b) // undefined 10
console.log(c) // 报错

事前に関数宣言：関数を宣言するとき、関数がスコープおよび定義の上まで移動されます。注：関数式は、事前に宣言していません。

f1() // 1
function f1() {
    console.log(1)
}
f2() // 报错
if (1) {
    // f2只会被提前到这
    function f2() {
        console.log(2)
    }
}
f2() // 2

優先機能：変数の宣言よりも、事前の優先大きい内の関数宣言。（その他の可能性が高いためであると個人的に関数宣言は、割り当てが来るが、唯一の変数宣言を強化するために）

// function f1 和 var f1都被提升到这
// 如 function f1在前，那么var f1后运行时f1这个变量已存在，var f1失效
// 如 var f1在前，那么function f1后运行，f1这个变量已存在，不再定义新变量，将function赋值给f1
// 无聊哪种情况f1的值最终都会是function f1的值，因此个人觉得不存在优先级问题
f1() // 1
var f1
f1() // 1
var f1 = function () {
    console.log(2)
}
f1() // 2
function f1() {
    console.log(1)
}

2.3適用範囲

使用const、let現在のブロックにのみ使用することができます定義された変数

{
    // console.log(a) // 报错
    const a = 1
    console.log(a) // 1
    // const a = 2 // 报错
}
console.log(a) // 报错，a is not defined

グローバルスコープと関数のドメインと2.4

グローバルスコープ：スコープ最外
関数スコープ：ブロックスコープと同様の実行環境を生成します

3.環境

3.1スコープチェーン

すべての変数や関数への秩序のアクセスを確保するための実行環境にアクセスする必要があり
、アクセスルールを：

同じ層の範囲は、同じアクセス権を持っています
外側のスコープは、内部スコープにアクセスすることはできません
内部スコープは、外部のスコープにアクセスすることができます
異なる内部層を持つスコープは、相互にアクセスすることはできません
変数へのアクセスは、近接の原則に従ってください（最近距離の可変範囲の現在の値を取得するために）

3.2環境のコンテキスト

一般スコープチェーン、即ち、現在位置変数アクセスと理解
：オブジェクトとして缶アバター、以下を含むオブジェクト

現在の変数にアクセス：変数の値
現在アクセス機能：関数の値
この：この値

スコープチェーンとの間の差です。

スコープとスコープチェーンは、アクセス可能な変数の定義に同定されています
環境のコンテキストだけでなく、アクセス変数でなく、変数の値。値が特定の値を決定するために、現在のコンテキストで実行するために、実行時に変更されるため

3.3本

ターゲットの現在の機能と呼ばれる
結合規則：

グローバルオブジェクトへの変更なしで直接呼び出し、この点：デフォルトのバインディング

function f () { return this }
console.log(f()) // window, 没有全局对象则是undefined

暗黙的結合：ターゲット・チェーンによって呼び出され、このポイントを呼び出すオブジェクトに

function f () { return this }
const obj = {
    f: f
}
console.log(obj.f() === obj) // true

ハードバインディング：は.call、.apply、.bind

function f () { return this }
const obj = {}
console.log(f.call(obj) === obj) // true

新しいバインディング：新しいコンストラクタ

function f (a) { this.a = a }
const obj = new f('a')
console.log(obj.a) // 'a'

アロー機能：

const that = this
const obj1 = {
    a: 'a',
    f: () => {
        console.log(this === that)
    }
}
const obj2 = { a: 'b' }
obj1.f.call(obj2) // true

4.閉鎖

4.1クロージャとは何ですか

閉鎖：指数関数は、アクションの別の可変ドメインへのアクセス権を持っています

var result
function heal(HP, healer) {
    return function(currentHP, target) {
        console.log(
        `${target} get ${HP} point heal from ${healer}, total HP is ${currentHP + HP}`
        )
    }
}
heal(100, 'Soraka')(500, 'Teemo') // Teemo get 10 point heal from Soraka, total HP is 600

図示4.2ファンクションジェネレータ

得られた製品の機能：

実行環境とスコープチェーンの生成
アクティブな目的関数を生成します

示さファンクションジェネレータを癒します：

ここに画像を挿入説明
閉鎖機能は、例示を生成します。

4.3ガベージコレクション

4.3.1クリアラベル

個々のアルゴリズムを呼び出すことを好む、次のようにロジックは次のとおりです。

今ノードダウン、変数およびアクセス変数が参照されているすべての変数を移動するから、
トラバーサルは再び、マークされていないすべての変数をクリア

4.3.2参照カウント

これより少ないと、欠陥、

各値は可変レコードで参照される回数です。変数、プラス参照番号に割り当てられ、変数（参照変数または他の剥離値）、参照回数がデクリメントされる間接参照
ゼロへの変数の数へのすべての参照をリリース

欠陥：
循環参照を解除することができない、そのようなオブジェクトAへの参照オブジェクトBとして、オブジェクトBも参照はAオブジェクトが、A及びBは、変数にアクセスすることができません

クロージャは4.4を生成しました

いいえ閉鎖ケースません：

機能とスコープチェーンの実行環境を生成する関数
リリースの実装とスコープチェーンの実行環境の後
変数の参照を持つオブジェクトは、もはや変数の関数であるため、ガベージコレクションの仕事は、オブジェクト変数の機能を破壊するために取得することはできません

クロージャはどこ生産しています：

生成は、関数の実行環境とスコープチェーンを癒します。スコープチェーンのポイント：変数オブジェクト、グローバル変数のオブジェクトを癒します
匿名関数の実行環境とスコープチェーンを生成します。スコープチェーンのポイント：変数のオブジェクト匿名関数は、ターゲット変数を癒す、グローバル変数オブジェクト
癒しの関数は、関数は、関数のスコープチェーンの実行環境を破壊し、癒すために、匿名アドレスへの参照を返し完了
変数オブジェクトの関数としてのガベージコレクションの仕事は、癒し訪問無名関数のスコープチェーンで、破壊されることはありません
クロージャを生成し、無名関数を実行します

クロージャーの役割4.5

変数内部アクセス関数について
ストップ機能がクリアされたデータを呼び出し、
汚染を避けるために、パッケージを助長します

4.6利用シナリオ

コールバックパラメータの受け渡し

async function check (callback) {
    const isCheck = await api.check() // 后台获取状态
    return callback(isCheck)
}

check((isCheck) => {
    if (isCheck) {
        console.log('checked')
    } else {
        console.log('Not check')
    }
})

コンストラクタ

function Hero(name, age) {
    this.name = name
    this.age = age
    this.introduction = function () {
        console.log(`my name is ${name}, my age is ${age}`)
    }
}
const Soraka = new Hero('soraka', 18)
Soraka.introduction()

setTimeoutのパラメータの受け渡し

function check (res) {
    return function () {
        console.log(res)
    }
}
setTimeout(check(1), 1000) // 原生无法传参，传入会报错

ループ結合事象

const divList = document.getElementsByClassName('div')
Array.from(divList).forEach((item) => {
    item.addEventListener('click', () => {
        console.log(item.innerHTML)
    })
})

モジュールのメカニズム

確かにJSモジュールを実現することができない人は、完全な閉鎖が、同様の効果です。

モジュール実装機構は、外側の呼び出しでモジュールファイル内の関数を実行するコードであり、オブジェクトを返します

function module() { // JS运行时添加
	// 模块中的代码
    const num= 1	// 模块中的变量
    return {	// 类似 export default {}
        getNumber () {
            console.log(num)
        }
    }
}
const numObj = module() // 类似 import numObj from 'module'
numObj.getNumber() // 调用模块中的函数并范围变量

A Hunzi

リリース6元記事・ウォンの賞賛0 ・ビュー83

プライベートの手紙の懸念