ES 6の矢印関数詳細(thisの指向とポイント)

まず、矢印関数と一般関数を比較します.
1、書き方
一般関数

function(a) {
	console.log(a)
	return a
}

矢印関数

は多くの

を簡潔にしました.

(a) => {
	console.log(a)
	return a
}

パラメータが一つしかない場合、括弧は

を省略することができます.

a => {
	console.log(a)
	return a
}

行のコードがある場合は、大かっこを省略し、デフォルトでは、行コードの前にreturnを追加します.ですから、returnを追加すると、エラーが発生します.

function b() {
	return 1
}
//           
() => b() √ //     1
() => return b() ×//     

2、関数の属性

はいずれもFunctionに受け継がれ、プロトタイプはFunction.prototype

を指す.

は、nameとlength(パラメータ個数)の2つの属性

を有する.
3、関数内のthisの指向
一般関数

の一般関数のthisは、宣言時にwindowを指し、呼び出し時にそのオブジェクトを指す.直接呼出するならば、window

も指す.

function b() {
	function a(){ console.log(this) }
	let c = function() {a()}
	let obj2 = {a,c}
	obj2.a()//   obj2,         obj2
	obj2.c()//   window,           window
}
let obj = {b}
obj.b()//   b    this obj

矢印関数

矢印関数のthisは、声明の中でwindowに向けられ、呼び出し時に声明の中にあるコンテキストthis

に向けられている.

function b() {
	let a = () => console.log(this)
	let c = function() {a()}
	let obj2 = {a,c}
	obj2.a()//   obj,          ,         
	obj2.c()//   obj,          ，          
}
let obj = {b}
obj.b()//   b    this obj

4、callについて、appy、bind
一般関数

の3つの方法は全部

に適用されます.

let obj = {}
let a = function() { console.log(this) }
a.call(obj)//obj
a.apply(obj)//obj
a = a.bind(obj)
a()//obj

矢印関数

矢印関数の特殊性のための3つの方法は全部

を適用しない.

let obj = {}
let a = () => { console.log(this) }
a.call(obj)//window
a.apply(obj)//window
a.bind(obj)
a()//window

矢印関数の注意事項

は、構造関数

としては使用できません.

アーグメンnts

は使用できません.

は、コールされたオブジェクト

ではなく、コンテキストを指しているので、オブジェクトとして呼び出すことができません.

this操作が必要であれば、addEventListenerで送信されるパラメータ

としては使用できません.