ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。