Điều gì làm cơ sở cho thành ngữ JavaScript này: var self = this?

Tôi đã thấy những điều sau đây trong nguồn cho WebKit HTML 5 SQL Storage Notes Demo :

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

Tác giả sử dụng self ở một số nơi (thân hàm) và cái này ở những nơi khác (thân của các hàm được định nghĩa trong danh sách đối số của các phương thức). Chuyện gì đang xảy ra vậy? Bây giờ tôi đã nhận thấy nó một lần, tôi sẽ bắt đầu nhìn thấy nó ở khắp mọi nơi chứ?

Xem bài viết này trên alistapart.com . (Ed: Bài viết đã được cập nhật kể từ khi được liên kết ban đầu)

selfđang được sử dụng để duy trì một tham chiếu đến bản gốc thisngay cả khi bối cảnh đang thay đổi. Đây là một kỹ thuật thường được sử dụng trong các trình xử lý sự kiện (đặc biệt là trong các bao đóng).

Chỉnh sửa: Lưu ý rằng việc sử dụng selfhiện không được khuyến khích khi window.selftồn tại và có khả năng gây ra lỗi nếu bạn không cẩn thận.

Những gì bạn gọi là biến không đặc biệt quan trọng. var that = this;là tốt, nhưng không có gì kỳ diệu về cái tên.

Các hàm được khai báo bên trong một ngữ cảnh (ví dụ: gọi lại, đóng) sẽ có quyền truy cập vào các biến / hàm được khai báo trong cùng phạm vi hoặc ở trên.

Ví dụ: một cuộc gọi lại sự kiện đơn giản:

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

Tôi nghĩ rằng tên biến 'tự' không nên được sử dụng theo cách này nữa, vì các trình duyệt hiện đại cung cấp một biến toàn cụcself trỏ đến đối tượng toàn cầu của một cửa sổ bình thường hoặc WebWorker.

Để tránh nhầm lẫn và xung đột tiềm ẩn, bạn có thể viết var thiz = thishoặc var that = thisthay vào đó.

Vâng, bạn sẽ thấy nó ở khắp mọi nơi. Nó thường xuyên that = this;.

Xem làm thế nào selfđược sử dụng bên trong các chức năng được gọi bởi các sự kiện? Những người sẽ có bối cảnh riêng của họ, vì vậy selfđược sử dụng để giữ những thisgì đã đi vào Note().

Lý do selfvẫn có sẵn cho các hàm, mặc dù chúng chỉ có thể thực thi sau khi Note()hàm đã thực thi xong, là các hàm bên trong có được ngữ cảnh của hàm ngoài do đóng .

Cũng cần lưu ý rằng có một mẫu Proxy thay thế để duy trì tham chiếu đến bản gốc thistrong cuộc gọi lại nếu bạn không thích var self = thisthành ngữ này.

Vì một hàm có thể được gọi với một bối cảnh cụ thể bằng cách sử dụng function.applyhoặc function.call, bạn có thể viết một trình bao bọc trả về một hàm gọi hàm của bạn với applyhoặc callsử dụng bối cảnh đã cho. Xem proxychức năng của jQuery để thực hiện mẫu này. Đây là một ví dụ về việc sử dụng nó:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFuncsau đó có thể được gọi và sẽ có phiên bản của bạn thislàm bối cảnh.

Như những người khác đã giải thích, var self = this;cho phép mã trong một bao đóng để quay lại phạm vi cha.

Tuy nhiên, giờ là 2018 và ES6 được hỗ trợ rộng rãi bởi tất cả các trình duyệt web chính. Thành var self = this;ngữ không hoàn toàn cần thiết như trước đây.

Bây giờ có thể tránh var self = this;thông qua việc sử dụng các chức năng mũi tên .

Trong trường hợp chúng ta sẽ sử dụng var self = this:

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

Bây giờ chúng ta có thể sử dụng chức năng mũi tên mà không cần var self = this:

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

Các hàm mũi tên không có riêng thisvà chỉ đơn giản là giả sử phạm vi kèm theo.

Biến được bắt bởi các hàm nội tuyến được định nghĩa trong phương thức. thistrong hàm sẽ tham chiếu đến một đối tượng khác. Bằng cách này, bạn có thể làm cho hàm giữ tham chiếu đến thisphạm vi bên ngoài.

Đó là một cách giải quyết JavaScript. Khi một hàm là một thuộc tính của một đối tượng, được gọi là phương thức một cách thông minh hơn, điều này đề cập đến đối tượng. Trong ví dụ về một trình xử lý sự kiện, đối tượng chứa là phần tử kích hoạt sự kiện. Khi một chức năng tiêu chuẩn được gọi, điều này sẽ đề cập đến đối tượng toàn cầu. Khi bạn có các hàm lồng nhau như trong ví dụ của bạn, điều này không liên quan đến bối cảnh của hàm ngoài. Các hàm bên trong chia sẻ phạm vi với hàm chứa, vì vậy các nhà phát triển sẽ sử dụng các biến thể của var that = thisđể bảo toàn cái này họ cần trong hàm bên trong.

Thực tế bản thân là một tham chiếu đến window ( window.self) do đó khi bạn nói var self = 'something'bạn ghi đè một tham chiếu cửa sổ vào chính nó - bởi vì bản thân tồn tại trong đối tượng cửa sổ.

Đây là lý do tại sao hầu hết các nhà phát triển thích var that = thishơnvar self = this;

Dù sao; var that = this;không phù hợp với thông lệ tốt ... giả sử rằng mã của bạn sẽ được sửa đổi / sửa đổi sau bởi các nhà phát triển khác, bạn nên sử dụng các tiêu chuẩn lập trình phổ biến nhất đối với cộng đồng nhà phát triển

Do đó, bạn nên sử dụng một cái gì đó như var oldThis/ var oThis/ etc - để rõ ràng trong phạm vi của bạn // .. không nhiều lắm nhưng sẽ tiết kiệm được vài giây và vài chu kỳ não

Như đã đề cập nhiều lần ở trên, 'cái tôi' chỉ đơn giản là được sử dụng để giữ một tham chiếu đến 'cái này' trước khi bước vào chức năng. Khi ở trong chức năng 'này' đề cập đến một cái gì đó khác.

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call (thatt);