es6のアロー関数の特徴は何ですか？

es6 アロー関数の特性は次のとおりです: 1. アロー関数には引数オブジェクトがありません; 2. アロー関数の this 値は、関数の外側の非アロー関数の this 値に依存します。アロー関数は this の方向を変更できません; 3. アロー関数は new キーワードを使用して宣言できません; 4. アロー関数にはプロトタイプ属性がありません。

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

ES6 標準には、新しい関数であるアロー関数が追加されています。

なぜアロー関数と呼ばれるのでしょうか?その定義では矢印が使用されているため、次のようになります。

x => x * x

上記のアロー関数は次と同等です。

function (x) {    
return x * x;
}

アロー関数は無名関数と同等であり、関数定義が簡素化されます。アロー関数には 2 つの形式があり、1 つは上記のように式を 1 つだけ含み、{...} と return も省略したものです。複数のステートメントを含めることができるメソッドもあります。この場合、{ ... } と return は省略できません:

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

パラメータが 1 つもない場合は、括弧 () で囲む必要があります。

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

オブジェクトを返したい場合は、それが単一の式である場合、次のように記述するとエラーが報告されることに注意してください。

// SyntaxError:
x => { foo: x }

構文の競合があるためです。関数本体に { ... } が含まれているため、次のように変更する必要があります:

// ok:
x => ({ foo: x })

#es6 アロー関数の特徴

1. アロー関数には引数がありません

let test1 = () => {
    console.log(arguments)
}
test1(123) // arguments is not defined

アロー関数の検索引数オブジェクトは外側の非アロー関数関数のみを検索します。外側の層が非アロー関数関数であり、引数オブジェクトを持たないため、中断して戻り、外側の層を検索しません。

function test2(a, b, c){
    return () => {
    console.log(arguments) // [1]
    }
}
test2(1)()

2. アロー関数のこの値

#アロー関数の this 値は、関数の外側にある非アロー関数の this 値に依存します。上位層がまだアロー関数である場合は、検索を続けます。それが見つからない場合、これはウィンドウ オブジェクトです。

let person = {
    test: () => {
        console.log(this)
    },
    fn(){
        return () => {
            console.log(this)
        }
    }
}
person.test()  // window
person.fn()()  // person对象

アロー関数はこのポイントを変更できません

let person = {}
let test = () => console.log(this)
test.bind(person)()
test.call(person)
test.apply(person)

これはプリコンパイル中にすでに決定されています。

#3. アロー関数は新しいキーワード

let test = () => {}
new test() // Uncaught TypeError: test is not a constructor

#4 を使用して宣言することはできません。アロー関数にはプロトタイプのプロトタイプ属性がありません

JavaScript の関数はすべてプロトタイプ属性を持っていますか? これは間違いです。

let test = () => {}
test.prototype // undefined
test.__proto__ === Function.prototype // true

アロー関数はパラメータの名前を変更できません

// 箭头函数不能重复命名参数
let bbb = (b, b, b) => {
} 
// Uncaught SyntaxError: Duplicate parameter name not allowed in this context
let bb = function(b, b, b){
}
// es5 不会报错

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、

Web フロントエンド

]

以上がes6のアロー関数の特徴は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。