es6 の等号矢印は何を意味しますか?

es6 の等号矢印「=>」は、関数の略語であるアロー関数を指します。構文は (パラメータ)=>{関数本体};" です。アロー関数式 関数式よりも簡潔で、this、super、arguments、new.target のバインディングはなく、new キーワードを介して呼び出すことはできず、this のバインディングは変更できません。

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

=>

はアロー関数です。 ES6 標準で追加された新しい関数です。名前が示すように、アロー関数は矢印 (=>) を使用して関数を定義する新しい構文です。アロー関数式の構文は関数式よりも簡潔ですが、若干異なります。従来の JavaScript 関数とは異なり、主に次の点に重点を置いています。 :

this、super、arguments、new.target のバインディングはなく、その値は最も近い非関数によって決定されます。周辺の -arrow 関数

• 新しいキーワードを介して呼び出すことはできません

• プロトタイプがありません

• このバインディングは変更できません

• # 引数オブジェクトはサポートされていません

• #重複した名前付きパラメータはサポートされていません

• 関数本体内の this のポイントは、常にそれが定義されているオブジェクトを指しますが、それを呼び出すオブジェクトは指しません。es5 で誰が関数を実行するのか、そしてそれが誰を指すのかはわかります。

• 実行環境

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

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

(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 です。この一時関数は、仮パラメータ x に 3 を割り当てます。

次の例は、一時関数本体に複数行のコードがある状況を示しています:

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

関連する考え

次の関数について考えてみましょう:

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

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

アロー関数は次のことを行います。引数が一時関数ではない一時関数も、次のように設定することで通常にチェックできます:

console.log(arguments); // not defined

typeof

および

instanceof function

:

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

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

//  有效的常规语法
(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" );//立即执行函数

アロー関数は一時関数を生成しますが、この一時関数はコンストラクターではありません:

var instance= new func(); // TypeError: func is not a constructor

プロトタイプ オブジェクトもありません:

func.prototype; // undefined

スコープ

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

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

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

コンストラクター内:

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吧。

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

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

オブジェクト内:

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

但是当执行流(比如使用了setTimeout)和作用域变了的时候，this也会变。

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

当setTimeout函数改变了执行流的情况时，this的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象，比如self，that,当然不管你用什么变量，你首先应该在setTimeout访问之前，给self，that赋值，或者使用bind方法不然这些变量就是undefined。

这是后就是箭头函数登场的时候了，它可以保持作用域，this的指向就不会变了。

让我们看下上文起先的例子，在这里我们使用箭头函数：

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( ()=>{
            // the only difference is here
            console.log( this );
        }, 100 );
    }
}

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

分析：在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代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.

更多编程相关知识，请访问：编程入门！！

以上がes6 の等号矢印は何を意味しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。