ES6 from getting started to mastering 06: arrow function this direction and precautions

explain

ES6 From entry to Mastery Series （ whole 23 speak ） Learning notes .

Arrow function this Point to

es5 Medium this Point to ： Depends on the context object that calls the function

The arrow function doesn't this Point to . Inside the arrow function this The value can only be determined by looking up the scope chain .

Example ：

let DocHandle = {
    
	id: "kaimo313",
	init: function() {
    
		document.addEventListener("click", function(event) {
    
			this.doSomeThings(event.type);
		}, false);
	},
	doSomeThings: function(type) {
    
		console.log(` Event type ：${
      type},  Current id:${
      this.id}`);
	}
}
DocHandle.init();

Click the document to report an error ：this.doSomeThings is not a function

explain this There's something wrong with it , We can print , We found this this Yes document 了 ：

es5 Processing mode ： Use bind change this Point to .

let DocHandle = {
    
	id: "kaimo313",
	init: function() {
    
		document.addEventListener("click", function(event) {
    
			console.log(this);
			this.doSomeThings(event.type);
		}.bind(this), false);
	},
	doSomeThings: function(type) {
    
		console.log(` Event type ：${
      type},  Current id:${
      this.id}`);
	}
}
DocHandle.init();

es6 Treatment mode ：

We can't pack here init I'll change it to an arrow function , Otherwise this Will point to window： Because inside the arrow function this The value can only be determined by looking up the scope chain .

matters needing attention

1、 After using the arrow function , There is no inside function arguments.

let getVal = (a, b) => {
    
	console.log(arguments);
	return a + b;
}
getVal()

Because of the this Yes window.

2、 Arrow functions cannot be used new Keyword to instantiate an object .

function A function is also an object , But the arrow function is not an object , It is actually a grammatical sugar .

let Kaimo313 = function() {
    };
let k313 = new Kaimo313();
console.log(k313);

let Kaimo = () => {
    };
let k = new Kaimo();
console.log(k);

expand ：

Built in function objects that are not identified as constructors do not implement [[Construct]] Internal methods ,[[Construct]] We use new or super Something to use when creating new objects , Only functions of type Normal To construct and implement [[Construct]].

therefore , Only Normal Function of type （ Also is to use function Keyword constructed function ） It can be used as a constructor , Other types of functions （ Arrow function 、 Method shorthand ,generator） Can't use constructors , in other words , Out-of-service new Operator call .

The definition created by each function boils down to FunctionCreate EcmaScript Definition in the specification .

For details, please refer to 【 Beat the drum 】TypeError: “x” is not a constructor