Binding là gì

  -  

Khái niệm “this” trong JavaScript là 1 trong số những tinh tế cạnh tranh đọc tốt nhất của ngôn từ này. Tuy nhiên lại là nhân tố quan trọng đặc biệt để viết code “advance”, cải thiện hơn. Trong JS, this cho phép:

Sử dụng lại function trong các ngữ cảnh không giống nhauXác định tập trung vào object làm sao Lúc Call method.

Bạn đang xem: Binding là gì

Nhắc tới this thì điều đầu tiên yêu cầu làm cho chính là biết gọi funtion làm sao, vị sẽ không biết vật gì làm việc phía bên trong this cho tới khi function được Điện thoại tư vấn. Và các ngôi trường hợp của this có thể chia thành 5 khía cạnh binding khác biệt.


*

Mỗi Execution Context lại đựng một Environment Record. Binding vào JavaScript có nghĩa là ghi lại identifier (variable và tên function) vào một Environment Record ví dụ.

Lưu ý: Binding góp kết hợp identifier (variable với thương hiệu function) cùng với this cho một execution context.

Khúc này còn khá băn khoăn nhưng hồ hết phần sau đã giải thích rõ rộng.

Quy tắc 1: Implicit Binding vận động như vậy nào?

Trong implicit binding thì rất cần được xem đối tượng người sử dụng phía trái của hàm thực hiện vết chnóng (dot operater), từ bỏ đó xác định được this vẫn tham mê chiếu cho tới vật gì.

let user = name: "Tapas", address: "freecodecamp", getName: function() console.log(this.name); ;user.getName();lấy một ví dụ này thì this đang trỏ tới user object, chính vì phía trái hàm vết chnóng là function getName (), ta thấy có user object, vì chưng vậy this.name vào console sẽ hiển thị Tapas.

Một ví dụ khác

function decorateLogName(obj) obj.logName = function() console.log(this.name); ; let tom = name: "Tom", age: 7 ; let jerry = name: "jerry", age: 3 ; decorateLogName(tom); decorateLogName(jerry); tom.logName(); jerry.logName();Trong ví dụ này thì tất cả 2 object, tom cùng jerry. Và chúng được decorate (nâng cao) bằng phương pháp đi cùng method logName().

khi điện thoại tư vấn hàm tom.logName()., object tom nằm bên trái dấu chnóng cuả function logName(). Nên this sẽ trỏ tới object tom và dấn quý giá của tom (this.name tương đương với tom). Tương tự Khi call hàm jerry.logName().

Quy tắc 2: Explicit Binding hoạt động như vậy nào?

JavaScript tạo môi trường xung quanh nhằm triển khai code nhưng họ viết. Trong đó nó đảm nhiệm memory creation (giành riêng cho variables, functions, objects) trong creation phase. Cuối cùng nó chãy code trong execution phase. Lúc này môi trường thiên nhiên bắt đầu được Execution Context.

Có các một số loại environment trong JavaScript application. Mỗi execution context triển khai, chạy lệnh độc lập cùng nhau. Nhưng sẽ có lúc cần áp dụng đồ vật này trong execution context này trong cái context khác. Hiện nay explicit binding đang pht huy tính năng.

Trong explicit binding, bạn có thể gọi function với object lúc funtion kia nằm ko kể execution context của object kia.

Để tiến hành explicit biding thì tất cả 3 method đó là call(), apply() cùng bind().

Hàm call() hoạt động nỗ lực nào

Với cách tiến hành call() thì context cùng với function được gọi sẽ được chuyển cho tới called bên dưới dạng tsay mê số (parameter).

let getName = function() console.log(this.name); let user = name: "Tapas", address: "Freecodecamp" ;getName.call(user);Tại đây, hàm call() sẽ được Hotline trên function getName(). Function getName() dấn giá trị this.name. Nhưng this vào đây là gì? Lúc này sẽ được ra quyết định vị quý giá đã có được đưa mang lại hàm call().

Xem thêm: Lấy Thẻ Nhớ Làm Bộ Nhớ Trong Trên Android, Cách Lấy Thẻ Nhớ Làm Bộ Nhớ Trong Của Điện Thoại

Với trường phù hợp này, this sẽ được bind mang lại user object chính vì đã chuyển user nhỏng một tmê man số cho hàm call(). Vì vậy this.name đã nhấn cực hiếm của trực thuộc tính name của user object, Tapas. 

lấy ví dụ như bên trên mới chỉ chuyển một argument cho tới hàm call(), nhưng mà thực tế rất có thể đưa nhiều argument nhỏng sau:

let getName = function(hobby1, hobby2) console.log(this.name + " likes " + hobby1 + " , " + hobby2); let user = name: "Tapas", address: "Bangalore" ;let hobbies = <"Swimming", "Blogging">; getName.call(user, hobbies<0>, hobbies<1>);Argument đầu tiên đuợc chuyển tới call() là object context cùng với function đã được Call. Những nằm trong tính không giống chỉ rất có thể là quý giá được sử dụng. Ở phía trên mình đã chuyển Swimming và Blogging là 2 thuộc tính tới function getName().

Tuy nhiên sẽ sở hữu được trường đúng theo phải pass từng argument một vào call() thì sao? Lúc bấy giờ sẽ cho tới lượt của apply().

Hàm apply() hoạt động vậy nào

Cách mà lại apply() thực thi lệnh cũng tương đồng cùng với call() nhưng được cho phép pass argument tiện lợi hơn.

let getName = function(hobby1, hobby2) console.log(this.name + " likes " + hobby1 + " , " + hobby2); let user = name: "Tapas", address: "Bangalore" ;let hobbies = <"Swimming", "Blogging">; getName.apply(user, hobbies);Lúc này ta hoàn toàn có thể chuyển một mảng (array) chứa argument luôn luôn, tiện thể rộng các so với Việc chuyển từng cái.

Tips: nếu như khách hàng đề nghị gửi một quý giá argument tuyệt argument mà lại không tồn tại cực hiếm thì hãy sử dụng call(). Còn giả dụ gửi nhiều quý giá argument thì cần sử dụng apply().

Hàm bind() hoạt động vậy nào

Method bind() cũng như như call() cơ mà có một điểm khác biệt nhỏ dại. Thay vì điện thoại tư vấn function trực tiếp thì bind() trả về một hàm new.

let getName = function(hobby1, hobby2) console.log(this.name + " likes " + hobby1 + " , " + hobby2); let user = name: "Tapas", address: "Bangalore" ;let hobbies = <"Swimming", "Blogging">;let newFn = getName.bind(user, hobbies<0>, hobbies<1>); newFn();Tại phía trên getName.bind() ko Hotline function getName() thẳng, nó trả về function mới, newFn với bọn họ vẫn Điện thoại tư vấn hàm bên dưới dạng newFn().

Quy tắc 3: New Binding

Từ khóa new được dùng để tạo nên một object mới trường đoản cú constructor function.

let Cartoon = function(name, animal) this.name = name; this.animal = animal; this.log = function() console.log(this.name + " is a " + this.animal); ;quý khách có thể chế tạo ra những object với trường đoản cú khóa new nhỏng sau:

let tom = new Cartoon("Tom", "Cat"); let jerry = new Cartoon("Jerry", "Mouse");Với phép tắc new biding, khi 1 function được Điện thoại tư vấn với tự khóa new, thì this phía bên trong function đang tsay đắm chiếu cho tới loại object mới được lập.

let tom = new Cartoon("Tom", "Cat");Đây là function Cartoon được gọi với từ bỏ khóa new. Thì this sẽ tmê mệt chiếu cho tới object bắt đầu, tom.

Quy tắc 4: Global Object Binding

Đoạn code dưới đây có tác dụng cố nào? this tđắm say chiếu cho tới loại gì?

let sayName = function(name) console.log(this.name);;window.name = "Tapas";sayName();Nếu this ko giải quyết và xử lý được với 1 trong những phép tắc binding, implicit, explicit hay new, thì this từ bây giờ tđam mê chiếu tới object window(global).

Tuy nhiên quy tắc strict mode của JavaScript sẽ không có thể chấp nhận được mặc định binding nlỗi sau:

"use strict";function myFunction() return this;Trường thích hợp này thì this là undefined.

Quy tắc 5: HTML Event Element Biding

Trong HTML event handlers, this tsi mê chiếu cho tới element HTML như thế nào nhận sự kiện đó.

button onclick="console.log(this)">Click Me!button>Đây là cực hiếm trả về console lúc click vào button:

"Cliông xã Me!"quý khách hoàn toàn có thể thay đổi style của this:

button onclick="this.style.color="teal"">Clichồng Me!button>Nhưng hãy cẩn trọng Lúc Gọi function trên button cliông xã cùng sử dụng this bên phía trong function kia.

button onclick="changeColor()">Click Me!button>với JavaScript:

function changeColor() this.style.color="teal";Đoạn code trên sẽ không còn trả tác dụng suôn sẻ được, bởi theo như rule số 4 thì this vẫn ttê mê chiếu cho tới object global, cùng không tồn tại object style để phối màu.

Xem thêm: Cách Cài Gta 5, Grand Theft Auto V Trên Máy Tính, Laptop, Cách Cài Đặt Gta V Roleplay Trên Máy Tính

Tổng kết

Với implicit binding thì this trỏ cho tới object phía trái của hàm dấu chnóng.Với explicit binding, bạn cũng có thể điện thoại tư vấn function cùng với object Khi function đó nằm bên cạnh execution context của object, hoàn toàn có thể cần sử dụng các hàm như call(), apply(), bind().Khi một function được điện thoại tư vấn cùng với trường đoản cú khóa new thì this bên trong dunction sẽ trỏ cho tới object bắt đầu được lập.Lúc this không được xử lý cùng với implicit, explicit tốt new thì this trỏ cho tới object window(global). Với strict mode của JavaScript, this trsinh hoạt đề nghị undefined.Trong HTML sự kiện handler thì this trỏ cho tới HTML element nào thừa nhận event kia.

Ttê mê khảo nội dung bài viết nơi bắt đầu trên freeCodeCamp