ES6 のアロー関数とスコープを理解する-jsチュートリアル-php.cn

ES6 のアロー関数とスコープを理解する

ES6 の多くの優れた新機能の中で、アロー関数 (またはビッグアロー関数) は注目に値するものの 1 つです! これは素晴らしくてクールなだけではなく、優れています。スコープを活用することで、以前使用していた技術を素早く簡単に使用でき、多くのコードを削減できます...ただし、アロー関数の原理を理解していないと理解するのが少し難しいかもしれません。矢印を見てください。機能です!

実行環境

サンプルプログラムコードをブラウザコンソールにコピーするだけで、自分で学習して試すことができます。次に、Firefox(22) 開発者ツールの使用をお勧めします。Firefox(22) 開発者ツールは矢印機能をサポートするようになりました。Google Chrome も使用できます。Google Chrome を使用する場合は、次の 2 つのことを行う必要があります:

Google Chrome のアドレスバーに「about:flags」と入力し、[体験型 JavaScript を使用する] オプションを見つけて有効にします。
関数の先頭に use strict を追加し、Google Chrome でアロー関数をテストします (ヒント: Google Chrome v38 を使用してください。私はブラウザのバージョンで行き詰まっていました) time Pitfall):

(function(){
    "use strict";
    // use arrow functions here
}());

ログイン後にコピー

幸いなことに、ES6 機能をサポートするブラウザは増えています。すべての準備が完了したので、引き続き詳しく見ていきましょう!

新しいトピック

最近、ES6 に関するトピックについて議論しています。次のようなアロー関数についてです。

=>

ログイン後にコピー

新しい構文

議論により、新しい構文が生まれました:

param => expression

ログイン後にコピー

新しい構文は変数に適用されます。複数の変数を式で宣言できます。以下はアロー関数の使用モードです:

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;

// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1

//传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

ログイン後にコピー

アロー関数の実装方法

通常の関数をアロー関数に変換して実装できます。

// 当前函数
var func = function (param) {
    return param.split(" ");
}
// 利用箭头函数实现
var func = param => param.split(" ");

ログイン後にコピー

上記の例から、アロー関数の構文が実際に、関数本体とパラメーターを備えた新しい関数を返すことがわかります。

したがって、作成したばかりの関数を次のように呼び出すことができます。

func("Felipe Moura"); // returns ["Felipe", "Moura"]

ログイン後にコピー

即時実行関数 (IIFE)

これは、次のように実行できます。即時関数アロー関数を使用します。例:

( x => x * 2 )( 3 ); // 6

ログイン後にコピー

このコード行は、一時関数を生成します。この関数には仮パラメータ x があり、関数の戻り値は x*2 です。その後、システムが実行されます。この一時関数はすぐに変更されます。 3 仮パラメータに値を割り当てます。次の関数:

( (x, y) => {
    x = x * 2;
    return x + y;
})( 3, "A" ); // "6A"

ログイン後にコピー

よくある問題をいくつかリストしました:

アロー関数によって作成された一時関数の引数は、設定しないでください:

var func = x => {
    return x++;
};

ログイン後にコピー

typeof

および

instanceof 関数

は、一時関数を通常どおりにチェックすることもできます:

console.log(arguments); // not defined

ログイン後にコピー

アロー関数を括弧で囲むことは無効です:

func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true

ログイン後にコピー

アロー関数は一時関数を生成しますが、この一時関数はコンストラクターではありません:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">// 有效的常规语法 (function (x, y){ x= x * 2; return x + y; } (3, "B") ); // 无效的箭头函数语法 ( (x, y) => { x= x * 2; return x + y; } ( 3, "A" ) ); // 但是可以这样写就是有效的了： ( (x,y) => { x= x * 2;return x + y; } )( 3,"A" );//立即执行函数</pre><div class="contentsignin">ログイン後にコピー</div></div>プロトタイプオブジェクトもありません:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">var instance= new func(); // TypeError: func is not a constructor</pre><div class="contentsignin">ログイン後にコピー</div></div>

スコープ

This arrow この関数のスコープは他の関数とは多少異なります。strict モードではない場合、this キーワードは window を指します。strict モードでは未定義です。This inコンストラクターは現在のオブジェクトインスタンスを指します。これがオブジェクトの関数内にある場合、This はこのオブジェクトを指します。これは DOM 要素を指す場合があります。たとえば、イベントリスニング関数を追加する場合、this のポインティングは実際、この (この変数に限らず) 変数の指定はルールに基づいています。判断するには: スコープフロー。以下に、これがイベントリスニング関数とオブジェクト関数でどのように表示されるかを示します。

イベントリスニング関数内:

func.prototype; // undefined

ログイン後にコピー

コンストラクター内:

document.body.addEventListener(&#39;click&#39;, function(evt){
    console.log(this); // the HTMLBodyElement itself
});

ログイン後にコピー

In Inこの例では、 Person.setName 関数に Person オブジェクト自体を返させると、次のように使用できます。

function Person () {
    let fullName = null;
    this.getName = function () {
        return fullName;
    };
    this.setName = function (name) {
        fullName = name;
        return this;
    };
}
let jon = new Person();
jon.setName("Jon Doe");
console.log(jon.getName()); // "Jon Doe"
//注：this关键字这里就不解释了，大家自己google,baidu吧。

ログイン後にコピー

オブジェクト内:

jon.setName("Jon Doe")
.getName(); // "Jon Doe"

ログイン後にコピー

ただし、実行フロー ( setTimeout を使用) とスコープが変更されると、これも変更されます。

let obj = {
    foo: "bar",
    getIt: function () {
        return this.foo;
    }
};
console.log( obj.getIt() ); // "bar"

ログイン後にコピー

setTimeout 関数が実行フローを変更すると、this のポイントはグローバルオブジェクトになるか、厳密モードでは undefine になるため、setTimeout 関数では他の変数を使用してこのオブジェクトをポイントします。 self、もちろん、どの変数を使用するかに関係なく、setTimeout にアクセスする前にまず self に値を割り当てるか、bind メソッドを使用する必要があります。そうしないと、これらの変数は未定義になります。

ここでアロー関数が登場しますが、スコープは維持でき、ポイントは変わりません。

上記の最初の例を見てみましょう。ここではアロー関数を使用します:

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( function () {
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// window

ログイン後にコピー

分析:sayHi 関数ではアロー関数を使用し、現在のスコープは次のとおりです。 Studentオブジェクトのメソッドにおいて、アロー関数で生成される一時関数のスコープは、StudentオブジェクトのsayHi関数のスコープでもあります。したがって、アロー関数によって生成された一時関数を setTimeout で呼び出した場合でも、この一時関数の this も正しくポイントされます。

有趣和有用的使用

创建一个函数很容易，我们可以利用它可以保持作用域的特征：

例如我们可以这么使用：Array.forEach()

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

ログイン後にコピー

分析：在forEach里箭头函数会创建并返回一个临时函数 tempFun,这个tempFun你可以想象成这样的：function(vowel){ console.log(vowel);}但是Array.forEach函数会怎么去处理传入的tempFunc呢？在forEach函数里会这样调用它：tempFunc.call(this,value);所有我们看到函数的正确执行效果。

//在Array.map里使用箭头函数，这里我就不分析函数执行过程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

ログイン後にコピー

费布拉奇数列

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}
factorial(6); // 720

ログイン後にコピー

我们也可以用在Array.sort方法里：

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );

ログイン後にコピー

也可以在事件监听函数里使用：

// EventObject, BodyElement
document.body.addEventListener('click', event=>console.log(event, this));

ログイン後にコピー

总结

尽管大家可能会认为使用箭头函数会降低你代码的可读性，但是由于它对作用域的特殊处理，它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用，将会让我们JavaScript代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.