Bài 5: Function javascript – call()/apply()/bind()

call()-apply()-bind()
call()-apply()-bind()

Function Javascript – Phần 1 khái niệm function

Function javascript – Phần 2 Tìm hiểu scopes, closure, callback

1.Call()/apply() trong java script

Tuyển lập trình viên game lương up to $2500

Với call/apply, bạn có thể viết một function mà có thể được sử dụng trên các đối tượng khác nhau.

call: lấy các đối số riêng biệt

apply: lấy đối số như một mảng.

Trong Java/C#/Python, function thuộc về một đối tượng, và chỉ được gọi từ class hay đối tượng của nó. Nhưng trong javascript, function là một đối tượng, và có thể tương tác với nhiều đối tượng khác.

Ví dụ

var Person = {

  showMe: function(citycountry) {

    return this.firstName + ” ” + 

     this.lastName + “,” + 

     city + “,” + country;

  }

};

var p1 = { firstName: “John”, lastName: “Doe” };

document.write(Person.showMe.apply(p1, [“Oslo”, “Norway”]));

document.write(Person.showMe.call(p1, “Oslo”, “Norway”));

// Output of both: John Doe,Oslo,Norway

Ở ví dụ trên ta thấy function showMe được gọi ở bên ngoài object chứa nó(p1).

2. Fuction.prototype.bind():

Phương thức bind() tạo ra một function mới, khi được gọi, từ khóa this của nó được gắn giá trị được cung cấp, với một chuỗi đối số tuần tự trước bất kỳ đối số cung cấp khi function mới được gọi.

=>Bởi vì từ khóa this là determined/scoped trong mỗi function, bind() cần để thêm this cho function mới được tạo.

bind() được sử dụng trong ReactJS rất nhiều.

Function.prototype.bind() khác với $.bind (jQuery function, sử dụng để thêm xử lý sự kiện)

Ví dụ

const module1 = {

  x: 42,

  getX: function() { return this.x; }

};

const module2 = { x: 100 };

const unboundGetX = module1.getX;

console.log(unboundGetX()); // this === global scope === window, window.x === undefined

// expected output: undefined

// a method called on different objects

const boundGetX1 = unboundGetX.bind(module1);

const boundGetX2 = unboundGetX.bind(module2);

console.log(boundGetX1()); // 42

console.log(boundGetX2()); // 100

console.log(boundGetX1 === module1.getX); // false

console.log(boundGetX1 === boundGetX2); // false

 Ví dụ trên getX được gọi bên ngoài đối tượng chứa nó, và với nhiều đối tượng khác nhau.

Với boundGetX1 thì tham số được truyền vào là module1, x có giá trị là 42, nên kết quả là 42

Với boundGetX2 thì tham số được truyền vào là module2, x có giá trị là 100, nên kết quả là 100.

Sử dụng bind() với từ khóa this thì this.x thay đổi theo tham số truyền vào.

Be the first to comment

Leave a Reply

Your email address will not be published.


*