JavaScript "me" = "this", tại sao?

Question

Tôi thấy ở nhiều mã nguồn:

var me = this; 

đặc biệt trong Ext JS-4 (JS framework). Tại sao làm điều đó? Có lý do nào khác hay bạn chỉ muốn một biến được gọi là "tôi" thay vì "cái này"?

Cảm ơn bạn.

Answer 1

Thông thường để bạn có thể giữ tham chiếu đến this bên trong phạm vi trong đó this đề cập đến một mục khác (ví dụ như hàm gọi lại).

Hãy xem xét ví dụ này, trong đó hàm xử lý sự kiện nhấp chuột có một bối cảnh khác nhau với những gì bạn có thể mong đợi (this không đề cập đến một thể hiện của MyClass):

var MyClass = function (elem) { 
    this.elem = elem; 
    this.name = "James"; 
    elem.addEventListener("click", function() { 
     alert(this.name); //oops 
    }, false); 
}; 

Bây giờ xem xét ví dụ này, trong mà chúng tôi lưu trữ một tham chiếu đến giá trị của this bên trong hàm constructor, và sử dụng bên trong hàm callback:

var MyClass = function (elem) { 
    var me = this; 
    this.elem = elem; 
    this.name = "James"; 
    elem.addEventListener("click", function() { 
     alert(me.name); //works! 
    }, false); 
}; 

chức năng gọi lại có thể tham khảo một biến đó là được khai báo trong hàm bên ngoài, ngay cả sau khi hàm đó đã trả về (hàm tạo MyClass trả về ngay khi nó được thực thi addEventListener). Đây là minh chứng về việc đóng cửa .

Answer 2

Về cơ bản, việc này sử dụng đóng trong javascript. Read this about closure.

Nó được sử dụng để thực hiện trường hợp cụ thể của this để thực hiện các cuộc gọi trong đó this có ý nghĩa khác.

Answer 3

Mặc dù khóa học đóng cửa là lý do rõ ràng hơn để thực hiện việc này, tôi chỉ muốn thêm rằng một lý do khác có thể là giảm kích thước của phiên bản rút gọn của tệp javascript.

this làm từ khóa không thể được đổi tên trong quá trình rút gọn tệp, trong khi biến cục bộ có thể. Nói cách khác, bất cứ khi nào bạn sử dụng điều này (4 ký tự), thay vào đó một biến cục bộ 1 ký tự có thể được sử dụng.

Hãy xem xét những điều sau example function của ExtJS của Ext.data.Store:

filterBy: function(fn, scope) { 
    var me = this; 

    me.snapshot = me.snapshot || me.data.clone(); 
    me.data = me.queryBy(fn, scope || me); 
    me.fireEvent('datachanged', me); 
    me.fireEvent('refresh', me); 
} 

(lưu ý không có đóng liên quan ở đây)

và phiên bản rút gọn của nó:

filterBy:function(b,a){var c=this;c.snapshot=c.snapshot||c.data.clone();c.data=c.queryBy(b,a||c);c.fireEvent("datachanged",c);c.fireEvent("refresh",c)} 

(151 ký tự/byte)

Bây giờ, hãy so sánh nó lên phiên bản minified nếu chúng ta không gán this cho một biến địa phương:

filterBy:function(b,a){this.snapshot=this.snapshot||this.data.clone();this.data=this.queryBy(b,a||this);this.fireEvent("datachanged",this);this.fireEvent("refresh",this)} 

(170 ký tự/byte)

Như bạn có thể thấy phiên bản với một biến cục bộ chỉ mất 88% so với kích thước của chức năng sử dụng this mỗi lần thay thế.

Đặc biệt trong các thư viện lớn, điều này có thể làm giảm kích thước tệp một chút.

Answer 4

Đặt me=this cho phép bạn sử dụng biến số this từ phạm vi bên ngoài trong phạm vi bên trong.

var Outer= function() { 
     var me = this; 
     me.x = "outerx"; 
     me.inner = { 
      x: "innerx", 
      displayValues: function() { 
       console.log(me.x); //outerx 
       console.log(this.x); //innerx 
      } 
     }; 
    }; 

    new Outer().inner.displayValues();