es6にはクロージャはありますか?

es6 にはクロージャがあります。 es6 では、関数内に別の関数を作成する場合、その埋め込み関数はクロージャと呼ばれ、外部関数のローカル変数にアクセスできます。簡単に言えば、クロージャとはスコープ内の変数にアクセスする権限を持つ関数を指します。別の関数の関数。クロージャの主な機能は、変数のスコープを拡張することです。クロージャを使用すると、関数内の変数がメモリに格納され、大量のメモリが消費されるため、クロージャを悪用することはできません。悪用すると、Web ページでパフォーマンスの問題が発生し、IE でメモリ リークが発生する可能性があります。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

1. 変数の有効範囲

変数は、その有効範囲に応じて、グローバル変数とローカル変数の 2 種類に分類されます。

• グローバル変数は関数内で使用できます。

• ローカル変数は関数の外では使用できません。

• 関数の実行が完了すると、このスコープ内のローカル変数は破棄されます。

# 2. クロージャとは何ですか?

es6 では、クロージャは、別の関数のスコープ内の変数にアクセスできる関数を指します。簡単に理解すると、スコープは別の関数内のローカル変数にアクセスできます。

クロージャ: 関数内に別の関数を作成します。埋め込まれた関数はクロージャと呼ばれます。外部関数のローカル変数にアクセスできます。

	// fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
    function fn(){
        let num = 10
        function fun(){
            console.log(num)
        }
        fun()
    }
    fn() //10

クロージャの主要なポイント 関数:変数のスコープを拡張します。

	// fn 外面的作用域可以访问fn 内部的局部变量
    function fn(){
        let num = 10
        // 方法一: 先定义再返回函数
        function fun(){
            console.log(num)
        }
        return fun //返回 fun函数
    }
    let f = fn()
    f() //10

	// fn 外面的作用域可以访问fn 内部的局部变量
    function fn(){
        let num = 10
        // 方法二: 直接返回函数
        return function(){
            console.log(num)
        }
    }
    let f = fn()
    f() //10

3. クロージャの使用シナリオ

(1) 値を返すために使用されます

//以闭包的形式将 name 返回
function fun(){
    let name = 'woniu'

    //定义闭包
    return function f1(){
        return name
    }
}

let ft = fun() //因为fun函数的返回值是f1函数，ft实质是一个函数

let na = ft()  //调用ft函数，实际调用的就是f1函数
console.log(na); //woniu

(2) 関数の代入: 関数内に関数式を定義#

var f2
function fn(){
    let name = '曹操'
    f2 = function(){ //闭包，将外部函数的name变量作为闭包的返回值
        return name
    }
}
fn() //必须先调用fn函数，否则f2不是一个函数
console.log(f2());  //曹操

##(3) 関数のパラメータとしてクロージャを使用

##

function fn(){
    let name = '蜗牛学苑'

    //定义闭包
    return function callback(){
        return name
    }
}

let f1 = fn() //将fn函数的返回值callback赋给f1
function f2(temp){
    console.log(temp()) //输出temp函数的返回值,实际调用了闭包callback
}
//调用f2函数：将f1作为实参传递给temp
f2(f1)

(4 ) 即時実行関数でクロージャを使用する

//立即执行函数
(function(){
    let name = '蜗牛学苑'
    let f1 = function(){
        return name
    }

    fn2(f1) //调用fn2函数，将闭包f1作为实参传递给fn2函数
})()

function fn2(temp){  //temp是一个形参，接收f1
    console.log(temp()); //对temp的调用，实际调用的是闭包f1
}

(5) ループ代入

(function(){
    for (let i = 1; i <= 10; i++) {
        (
            function(j){
                setTimeout(function(){
                    console.log(j);
                },j*1000)
            }
        )(i)
    }
})()

(6) オブジェクト内でクロージャをカプセル化します

function fun(){
    let name = '蜗牛学苑'
    setName = function(na){ //setName是闭包，用来设置外部函数的变量值
        name = na
    }
    getName = function(){ //getName是闭包，用来返回外部函数的变量值
        return name 
    }

    //外部fun函数的返回值，将闭包封装到对象中返回
    return {
        setUserName:setName,
        getUserName:getName
    }
}
let obj =fun() //将fun函数返回值（对象）赋给obj
console.log('用户名：',obj.getUserName()) //蜗牛学苑
obj.setUserName('石油学苑')
console.log('用户名：',obj.getUserName()) //石油学苑

(7) は、クロージャ

let arr = ['aa','bb','cc']
function fn(temp){ //外部函数的返回值是闭包
    let i = 0
    //定义闭包：迭代获取数组元素并返回
    return function(){
        return temp[i++] || '数组已经遍历结束'
    }
}

let f1 = fn(arr)
console.log(f1()) //aa
console.log(f1()) //bb
console.log(f1()) //cc
console.log(f1()) //数组已经遍历结束

(8) による反復を実現します。最初の区別 (同じパラメータを使用すると、関数は繰り返しません)

var fn = (function(){
    var arr = [] //用来缓存的数组
    return function(val){
        if(arr.indexOf(val) == -1){ //缓存中没有则表示需要执行
            arr.push(val) //将参数push到缓存数组中
            console.log('函数被执行了',arr);  //这里写想要执行的函数
        } else {
            console.log('此次函数不需要执行');
        }
        console.log('函数调用完打印一下，方便查看缓存的数组：',arr);
    }
})()

fn(10)
fn(10)
fn(1000)
fn(20)
fn(1000)

Note

(1) クロージャ関数が誰であるかを調べる(2) クロージャを明確に識別する 戻り値、戻り値外部関数の概要

4. クロージャの概要

クロージャとは: クロージャは関数です (1 つのスコープで別の関数のローカル変数にアクセスします)。

• クロージャの機能とは: 変数のスコープを拡張することです。

• #ローカル変数がないためクロージャは生成されず、グローバル変数がアクセスされます

  ウィンドウ

let name = 'The Window'
    let object = {
        name: 'My Object',
        getNameFunc(){
            return function(){
                return this.name
            }
        }
    }
    let f = object.getNameFunc()
    console.log(f()) //The Window

クロージャが生成されます。これは、オブジェクト object を指す関数内のクロージャに代入されているためです。

	let name = 'The Window'
    let object = {
        name: 'My Object',
        getNameFunc(){
            let that = this
            return function(){
               return that.name
            }
        }
    }
    let f = object.getNameFunc()
    console.log(f()) //My Object

クロージャ使用上の注意

1) クロージャは関数内のすべての変数をメモリに格納するため、メモリの消費量が非常に多くなります。悪用することはできません。悪用すると、Web ページでパフォーマンスの問題が発生したり、IE でメモリ リークが発生したりする可能性があります。解決策は、関数を終了する前に、未使用のローカル変数をすべて削除することです。

2) クロージャは、親関数内の変数の値を親関数の外で変更します。したがって、親関数をオブジェクトとして使用し、クロージャをそのパブリック メソッドとして使用し、内部変数をプライベート値として使用する場合は、親関数内の変数の値を自由に変更しないように注意する必要があります。

[推奨学習:

JavaScript ビデオ チュートリアル

]

以上がes6にはクロージャはありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。