Javascript context
Javascript
199
White

studybot viết ngày 23/05/2015

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ạ:

alt text

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 callapply.

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!

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

studybot

15 bài viết.
9 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
14 12
Một vài thủ thuật vim mới biết, ghi lại cho khỏi quên Căn lề các cột dữ liệu Để căn lề ấn phím esc (để sang command mode) :%column t Chọn th...
studybot viết gần 3 năm trước
14 12
White
8 1
Một vài ghi chép về Java Hotspot GC Garbage collector thực hiện việc quản lý bộ nhớ thông qua 3 công việc: Gán đối tượng vào pool các đối tượng m...
studybot viết gần 3 năm trước
8 1
White
7 3
Javascript là ngôn ngữ có nhiều điểm rất thú vị. Dưới đây là một vài ví dụ cho thấy sự thú vị của Javascript. Ví dụ 1 javascript a = "zero","on...
studybot viết gần 3 năm trước
7 3
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết hơn 2 năm trước
39 7
White
21 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết hơn 2 năm trước
21 8
White
3 0
Có bao giờ bạn thắc mắc, chuyện gì thực sự diễn ra khi chúng ta gõ một địa chỉ trang web (ví dụ: (Link)) lên trình duyệt và nhấn Enter? Đầu tiên, t...
Lam Pham viết 1 tháng trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
15 bài viết.
9 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!