ES6標準では、新しい機能である矢印機能が追加されています。
1つは、通常の関数の定義方法です。
var fn1 = function(a, b) {
return a + b
}
function fn2(a, b) {
return a + b
}
第二に、矢印関数の定義方法
ES6矢印関数構文を使用して関数を定義し、元の関数の「function」キーワードと関数名を削除し、「=>」を使用してパラメーターリストと関数本体を接続します。
var fn1 = (a, b) => {
return a + b
}
(a, b) => {
return a + b
}
関数パラメーターが1つしかない場合は括弧を省略できますが、パラメーターがない場合は括弧を省略できません。
// 无参
var fn1 = function() {
}
var fn1 = () => {
}
// 单个参数
var fn2 = function(a) {
}
var fn2 = a => {
}
// 多个参数
var fn3 = function(a, b) {
}
var fn3 = (a, b) => {
}
// 可变参数
var fn4 = function(a, b, ...args) {
}
var fn4 = (a, b, ...args) => {
}
矢印関数は無名関数と同等であり、関数の定義を簡素化します。矢印関数には2つの形式があります。
- 1つのタイプには1つの式のみが含まれ、{…}を省略して戻ります。
() => return 'hello' (a, b) => a + b - 複数のステートメントを含めることができる別のタイプがあります。現時点では{…}であり、returnは省略できません。
(a) => { a = a + 1 return a }
オブジェクトを返す場合は特に注意が必要です。カスタムオブジェクトを返すのが単一の式の場合、括弧を記述しないとエラーが報告されます。これは、の{…}と構文が競合するためです。関数本体。中括弧を囲むために括弧を使用することは、関数の本体ではなく、オブジェクトの定義であることに注意してください。
x => {
key: x} // 报错
x => ({
key: x}) // 正确
三、この点
1.非矢印関数
非矢印関数では、関数の定義時にこの方向を判別できません。関数が実行されたときにのみ、これが誰を指しているかを判別できます。実際、これの最後のポイントは、それを呼び出すオブジェクトです。
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = function(){
console.log('this02 = ')
console.log(this)
return this.firstName + this.lastName
}
return fn()
}
}
Person.getFullName()
結果の印刷：
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = Window {
0: global, window: Window, self: Window, document: document, name: "", location: Location, …}
NaN
2.矢印機能
矢印関数は無名関数の省略形のようですが、実際には、矢印関数と無名関数には明らかな違いがあります。この内側の矢印関数は字句スコープであり、コンテキストによって決定されます。（字句スコープは、字句ステージで定義されたスコープです。言い換えると、字句スコープは、コードを記述したときに変数とブロックスコープを記述した場所によって決定されるため、字句アナライザーがコードを処理するときに、スコープは変更されません。）
これで、矢印関数はこれのポインティングを完全に修正します。これは常に、外部の呼び出し元である字句スコープを指します。
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = () => {
console.log('this02 = ')
console.log(this)
return this.firstName + this.lastName
}
return fn()
}
}
Person.getFullName()
結果の印刷：
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
"TomLee"
第四に、矢印関数の欠点
JavaScriptのすべてのFunctionオブジェクトには、apply（）メソッドとcall（）メソッドがあります
- applyはオブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。例：B.apply（A、arguments）;つまり、オブジェクトAはオブジェクトBのメソッドを呼び出します。func.apply（thisArg、[argsArray]）
- callはオブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。次に例を示します。B.call（A、args1、args2）;つまり、オブジェクトAはオブジェクトBのメソッドを呼び出します。func.call（thisArg、arg1、arg2、…）
これはarrow関数の字句スコープに従ってバインドされているため、arrow関数がcall（）またはapply（）で呼び出されると、バインドできません。つまり、渡された最初のパラメーターは無視されます。
1.非矢印関数
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(firstName){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = function(f){
console.log('this02 = ')
console.log(this)
return f + this.lastName
}
return fn.call({
firstName:'hh'},firstName)
}
}
Person.getFullName('hi')
結果の印刷：
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = {
firstName: "hh"}
"hiundefined"
2.矢印機能
var Person = {
firstName:'Tom',
lastName:'Lee',
getFullName:function(firstName){
console.log('this01 = ')
console.log(this)
var first = this.firstName
var fn = (f) => {
console.log('this02 = ')
console.log(this)
return f + this.lastName
}
return fn.call({
firstName:'hh'},firstName)
}
}
Person.getFullName('hi')
結果の印刷：
this01 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
this02 = {
firstName: "Tom", lastName: "Lee", getFullName: ƒ}
"hiLee"
矢印関数を使用した後、以前のハックは不要になりました。varthat= this。ただし、ES6の矢印関数を盲目的に使用することはできません。
五数要約
- 場合によっては使用される無名関数と同様に、コードの量を減らすことができます
- コードは簡潔です、これは事前に定義されています
- コードが簡潔すぎるため、読みにくくなっています
- これは事前に定義されているため、JSを使用してES5では非常に正常に見える操作を実行できません（矢印関数を使用すると、クリックイベントをリッスンするコールバック関数で現在クリックされている要素を取得できません。詳細、「矢印を正しく使用する」関数を参照してください-ES6矢印関数を使用すべきでない場合
- 一般的に、矢印関数は関数の省略形であり、長所と短所があります。使用できるかどうかは、気分によって異なります。もちろん、正しく使用する必要があります。