Lưu ý khi sử dụng arrow function trong JavaScript

Nếu bạn nào đã biết về ES6 thì có lẽ arrow function là một cái gì đó rất quen thuộc. Nó giúp code của ta trở nên ngắn gọn, sáng sủa hơn. Nhưng ngoài sự khác nhau về cú pháp so với function truyền thống thì nó cũng có một số điểm khác biệt bạn cần biết để control code mình được tốt hơn.

Lưu ý khi sử dụng arrow function trong JavaScript

Điều khác biệt bạn cần lưu ý là con trỏ this trong arrow function hoàn toàn khác so với function truyền thống.

	let user = {
	name: 'NHK',
	age: 22,
	showInfo: function() {
	return this.name + " " + this.age
	},
	showInfoArrowFunction: () => {
	return this.name + " " + this.age
	}
	}
	console.log(user.showInfo()) // "NHK" 22
	console.log(user.showInfoArrowFunction()) // undefined undefined
	// Sử dụng bind để thay đổi con trỏ this trong function
	console.log(user.showInfo.call({ name: "Nguyễn Hưng Khánh", age: 22 })) // "Nguyễn Hưng Khánh" 22
	console.log(user.showInfoArrowFunction.call({ name: "Nguyễn Hưng Khánh", age: 22 })) // undefined undefined

view raw arrow_function hosted with ❤ by GitHub

Như các bạn thấy thì 2 kết quả log hoàn toàn khác nhau: 1 cho đúng như ta dự đoán cái còn lại (arrow function) thì lại cho ra sản phầm là 2 cái undefined và cho dù bạn có sử dụng call, apply hay bind thì cũng không thể nào thay đổi được giá trị this trong arrow function.

• Tweet
• Share
• Share
• Share
• Share