Javascript context

Javascript context (ngữ cảnh?) là một khái niệm khó hiểu trong Javascript. Tuy vậy để code Javascript thành thạo thì việc nắm vững context là điểu không thể thiếu.

Javascript context là gì?

Có thể hiểu đơn giản là ngữ cảnh. Ngữ cảnh cung cấp thông tin về môi trường thực thi đoạn mã. Ví dụ lệnh gọi hàm trong ngữ cảnh A sẽ có thể sử dụng được các biến định nghĩa trong A.

Javascript dùng biến this để mô tả ngữ cảnh. Javascript this rất tricky bởi biểu hiện của nó khác nhau tuỳ vào cách gọi hàm cũng như mode thực thi (strict mode hay non-strict mode).

Cách tốt nhất dể hiểu sự khác nhau giữa các biểu hiện của từ khóa this (hay context) là xem ví dụ.

Global Context

Khi được dùng ở Global Context, bên ngoài các function, this đại diện cho global context.

$ node
> a = 5
> this.a === a
true
> this.a
5

Trên browser, this chính là đối tượng window.

console.log(this.document === document); // true

// In web browsers, the window object is also the global object:
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

Function call

Bên trong một hàm, this biểu hiện tuỳ thuộc vào cách gọi hàm.

Gọi hàm đơn giản

function f1(){
  return this;
}

f1() === window; // global object ---> true

Khi ta gọi hàm bằng f1(), this chính là global context. Trên Browser, this trỏ đến đối tượng window.

Tuy vậy, trong strict mode, this sẽ có giá trị undefined

function f2(){
  "use strict"; // see strict mode
  return this;
}

f2() === undefined;

Gọi như là phương pháp của đối tượng (object)

var a = 5;
var o = {
    a: 6,
    f: function() {
      return this.a;
    }
};
o.f() === 6; // --> true

Bạn có thể chạy Javascript trên browser bằng cách mở console như hình mình hoạ:

Khi được gọi như là 1 method của o o.f(), this sẽ được trỏ đến đối tượng o và do đó this.a có giá trị là 6 (dù rằng ở global context cũng có biến a).

Điểm thú vị của việc gọi hàm này là bất chấp vị trí hàm f được định nghĩa, giá trị của this chỉ được chỉ định khi f được gọi.

function defTop() {
  return this.a;
}
var o = {
  a: 6
};
o.f = defTop
o.f() === 6; // --> true

Như là constructor

Javascript có thể tạo đối tượng mới bằng từ khoá new. Khi gọi bằng new, this trỏ đến đối tượng vừa được tạo.

a = 6
function Obj() { 
    this.a = 5;
}

o = new Obj;
o.a === 5 // --> true

call và apply

javascript có 2 hàm call và apply dùng để chỉ định ngữ cảnh khi chạy một hàm. Như đã viết ở trên, nếu một hàm được gọi bình thường, this sẽ trỏ đến đối tượng thuộc global context. Thỉnh thoảng ta muốn this trỏ đến 1 context nào đó, đấy là lúc dùng call và apply.

2 hàm này làm công việc giống hệt nhau, chỉ khác cách truyền tham số cho hàm được gọi. call dùng các biến theo thứ tự truyền vào, apply truyền biến bằng mảng (array)

function add(b) {
    return this.a + b;
}

var o = { a: 5 }
add.call(o, 5) === 10 // --> true
add.apply(o, [5]) === 10 // --> true

Kết luận

Bài viết giải thích qua về khái niệm ngữ cảnh, từ khoá this trong javascript cũng như giới thiệu những ngữ nghĩa khác nhau của từ khoá này.

Trong bài viết sau, mình sẽ cố gắng giới thiệu một vài cách dùng các khái niệm này trong một số opensource.

Có gì sai sót mong các bạn bỏ qua!