Tạo bài viết
Đăng ký
11/08/2018, 15:54

Call, Apply và Bind trong JavaScript

Như chúng ta đều biết, trong javascript mỗi đối tượng có thuộc tính và phương thức riêng của nó. Hãy xem qua đoạn code sau: function A(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; //I am using Template literals ...

Như chúng ta đều biết, trong javascript mỗi đối tượng có thuộc tính và phương thức riêng của nó. Hãy xem qua đoạn code sau:

function A(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; //I am using Template literals (Introduce in ES 6) ${this.firstName} to show the details this.getUserDetails = function(city,state){ var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}` return details; } } function B(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; //I am using Template literals (Introduce in ES 6) ${this.firstName} to show the details this.getUserDetails = function(city,state){ var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}` return details; } } //Create objects var a = new A("Vipin","Sharma"); var b = new B("Ashish","Sharma"); console.log(a.getUserDetails("Jhansi","UP")); console.log(b.getUserDetails("Mathura","UP"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
function A(firstName,lastName){  
    this.firstName = firstName;  
    this.lastName = lastName;  
    //I am using Template literals (Introduce in ES 6) ${this.firstName} to show the details  
    this.getUserDetails = function(city,state){  
        var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`  
        return details;  
    }  
}  
  
function B(firstName,lastName){  
    this.firstName = firstName;  
    this.lastName = lastName;  
    //I am using Template literals (Introduce in ES 6) ${this.firstName} to show the details  
    this.getUserDetails = function(city,state){  
        var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`  
        return details;  
    }  
}  
  
//Create objects  
var a = new A("Vipin","Sharma");  
var b = new B("Ashish","Sharma");  
  
console.log(a.getUserDetails("Jhansi","UP"));  
console.log(b.getUserDetails("Mathura","UP"));
 

Output

User’s name is Vipin Sharma and address is Jhansi UP
User’s name is Ashish Sharma and address is Mathura UP

Như chúng ta thấy, có 2 phương thức giống nhau cho 2 đối tượng và chúng ta đều sử dụng cả 2 để lấy thông tin của user. Chúng ta cần tránh việc lặp lại đoạn code này.

Giờ hãy xem qua cách dùng Call, Apply và Bind.

Trong đoạn code dưới đây, tôi tạo ra 2 hàm constructor và 1 phương thức. Tôi cũng tạo đối tượng cho cả 2 hàm constructor.

function A(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; } function B(firstName,lastName){ this.firstName = firstName; this.lastName = lastName; } //create a single function to get user's details var getUserDetails = function(city,state){ var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}` return details; } //Create objects var a = new A("Vipin","Sharma"); var b = new B("Ashish","Sharma");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function A(firstName,lastName){  
    this.firstName = firstName;  
    this.lastName = lastName;  
}  
  
function B(firstName,lastName){  
    this.firstName = firstName;  
    this.lastName = lastName;  
}  
  
//create a single function to get user's details
var getUserDetails = function(city,state){  
    var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`  
    return details;  
}  
  
//Create objects  
var a = new A("Vipin","Sharma");  
var b = new B("Ashish","Sharma");
 

Call()

Cú pháp

Tên hàm.call( tên đối tượng, tham số truyền vào )

//a and b are objects for A and B function constructor. //Jhansi and UP are parameters passed into the function. console.log(getUserDetails.call(a,"Jhansi","UP")) console.log(getUserDetails.call(b,"Mathura","UP"))
1
2
3
4
5
6
 
//a and b are objects for A and B function constructor.  
//Jhansi and UP are parameters passed into the function.  
console.log(getUserDetails.call(a,"Jhansi","UP"))  
console.log(getUserDetails.call(b,"Mathura","UP"))
 

Output

User’s name is Vipin Sharma and address is Jhansi UP
User’s name is Ashish Sharma and address is Mathura UP

Không có dấu ngoặc đơn nào phía sau tên hàm bỏi vì nó được truy cập như một đối tượng. Chúng ta đang sử dụng phương thức single (getUserDetails) cho cả 2 đối tượng.

Apply()

Cú pháp

Tên hàm.apply( tên đối tượng, tham số truyền vào )

Phương thức apply() hoạt động khá giống với call(), nó cũng nhận chỉ 2 tham số.

  1. Đối tượng.
  2. Một mảng các tham số được truyền vào trong hàm.
//array of parameters that will pass to the function. var arr = ["Jhansi","UP"]; var arr1 = ["Mathura","UP"]; //arr array for object a call console.log(getUserDetails.apply(a,arr)) //arr1 array for object b call console.log(getUserDetails.apply(b,arr1))
1
2
3
4
5
6
7
8
9
10
11
 
//array of parameters that will pass to the function.  
var arr = ["Jhansi","UP"];  
var arr1 = ["Mathura","UP"];  
  
//arr array for object a call  
console.log(getUserDetails.apply(a,arr))  
  
//arr1 array for object b call  
console.log(getUserDetails.apply(b,arr1))
 

Output

User’s name is Vipin Sharma and address is Jhansi UP
User’s name is Ashish Sharma and address is Mathura UP

Bind()

Bind() có một chút khác so với call() và aplly().

Xem qua ví dụ sau:

//passing parameters to bind() console.log(getUserDetails.bind(a,"Jhansi","UP"))
1
2
3
4
 
//passing parameters to bind()    
console.log(getUserDetails.bind(a,"Jhansi","UP"))    
 

Nếu ta chạy đoạn code trên, nó sẽ trả về một đối tượng hàm, nhưng nó không phải là kết quả chính xác.

Output

function (city,state){
var details = User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}
return details;
}
Thay vì trả về một kết quả thì nó trả về một đối tượng hàm. Vậy muốn đạt được mục đích, chúng ta làm theo cách sau:
//Storing function object to a variable. var obj = getUserDetails.bind(a); //calling function object with parameters. console.log(obj("Jhansi","UP"));
1
2
3
4
5
6
 
//Storing function object to a variable.  
var obj = getUserDetails.bind(a);  
//calling function object with parameters.  
console.log(obj("Jhansi","UP"));
 

Hoặc, cách khác
//we can directly pass the parameters to function objets console.log(getUserDetails.bind(a)("Jhansi","UP"));
1
2
3
4
 
//we can directly pass the parameters to function objets  
console.log(getUserDetails.bind(a)("Jhansi","UP"));
 

Output

User’s name is Vipin Sharma and address is Jhansi UP

Từ khóa this

Hãy thay đổi đoạn code trên, thay vì truyền tên đối tượng tôi sẽ dùng “this”.

var getUserDetails = function(city,state){ var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}` return details; } //this is referring to global object console.log(getUserDetails.bind(this)("Jhansi","UP"));
1
2
3
4
5
6
7
8
 
var getUserDetails = function(city,state){    
    var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`    
    return details;    
}    
//this is referring to global object
console.log(getUserDetails.bind(this)("Jhansi","UP"));
 

Output

User’s name is undefined and address is Jhansi UP

Trong ouput, firstname và lastname có giá trị undefined. Khi chúng ta xác định nó trong global namespace thì nó thuộc về đối tượng global nhưng chúng ta chưa định nghĩa FirstName và LastName trong global namespace.

//Parameters - City and State var getUserDetails = function(city,state){ var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}` return details; } //now firstname and lastname are belong to global object var firstName = "Vipin"; var lastName = "Sharma"; //this is referring to global object console.log(getUserDetails.bind(this)("Jhansi","UP"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
//Parameters - City and State  
var getUserDetails = function(city,state){    
    var details = `User's name is ${this.firstName} ${this.lastName} and address is ${city} ${state}`    
    return details;    
}    
  
//now firstname and lastname are belong to global object  
var firstName = "Vipin";  
var lastName = "Sharma";  
  
//this is referring to global object  
console.log(getUserDetails.bind(this)("Jhansi","UP"));
 

Output

User’s name is Vipin Sharma and address is Jhansi UP.

Techtalk via c-sharpcorner.com

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024