Function thường là những function được khai báo ở 2 dạng sau
// function expression
function hello() {
return "hello";
}
// function declaration
const hello = function() {
return "hello";
};Còn arrow function là dạng chắc ai cũng biết
const hello = () => {
return "hello";
};1. giá trị của this
Với function thường giá trị của this khá khó lường, tùy thuộc thời điểm chúng ta gọi nó. Như tình huống sau, nếu không có strict mode, thì giá trị nó là global object (window), còn có strict mode nó sẽ là undefined
function myFunction() {
console.log(this);
}
myFunction();
// => global object (window)Giá trị nó sẽ tùy thuộc vào ngữ cảnh, như trong trường hợp này, nó chính là object chính chủ của phương thức
const myObject = {
method() {
console.log(this);
},
};
myObject.method();
// => "myObject"Với arrow function, this sẽ luôn bằng với giá trị của function ở ngoài, arrow function không khai báo thêm vùng tự trị riêng (execution context), mà dùng chung với thằng cha
const myObject = {
myMethod(items) {
console.log(this); // "myObject"
const callback = () => {
console.log(this); // "myObject"
};
items.forEach(callback);
},
};
myObject.myMethod([1, 2, 3]);Đây là một đặc tính giúp chúng ta không còn dùng đến self = this hay callback.bind(this)
2. Constructor
Để khởi tạo một object với function bình thường
function Car(color) {
this.color = color;
}
const redCar = new Car("red");
redCar instanceof Car; // => trueCũng không có vùng tự trị riêng, nên arrow function không thể dùng như một constructor
const Car = (color) => {
this.color = color;
};
const redCar = new Car("red");
// => TypeError: Car is not a constructor3. Object arguments
Bên trong một function thông thường sẽ được nhét thêm một object đặc biệt arguments, chứa toàn bộ tham số truyền vào cho function đó
function myFunction() {
console.log(arguments);
}
myFunction("a", "b");
// => { 0: 'a', 1: 'b'}Arrow function sẽ không có object này, và nếu bạn đặt nó vào trong một function bình thường, thì lúc đó giá trị arguments này sẽ của thằng bọc ngoài
function myRegularFunction() {
const myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction("c", "d");
}
myRegularFunction("a", "b");
// => { 0: 'a', 1: 'b' }4. Ngầm định có return
Với function thông thường, chúng ta phải rất rõ ràng là return về cái gì
function myFunction() {
return 42;
}
myFunction();
// => 42
function myEmptyFunction() {
42;
}
function myEmptyFunction2() {
42;
return;
}
myEmptyFunction();
// => undefined
myEmptyFunction2();
// => undefinedVới arrow function nó có hơi đặc biệt, nếu chỉ có một expression, bỏ qua dấu ngoặc đơn luôn, thì giá trị của expression sẽ được return
const increment = (num) => num + 1;
increment(41);
// => 425. Phương thức
Các function thông thường sẽ là lựa chọn hàng đầu khi viết phương thức cho class
class Hero {
constructor(heroName) {
this.heroName = heroName;
}
logName() {
console.log(this.heroName);
}
}
const batman = new Hero("Batman");Nhưng khi bạn không muốn thay đổi giá trị của this, arrow function sẽ là lựa chọn hợp lý hơn
class Hero {
constructor(heroName) {
this.heroName = heroName;
}
logName = () => {
console.log(this.heroName);
};
}
const batman = new Hero("Batman");https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/
Initializing...