Vượt qua chính xác bối cảnh này trong bối cảnh này để gọi lại setTimeout?

Làm thế nào để tôi vượt qua bối cảnh setTimeout? Tôi muốn gọi this.tip.destroy()nếu this.options.destroyOnHidesau 1000 ms. Làm thế nào tôi có thể làm điều đó?

if (this.options.destroyOnHide) {
     setTimeout(function() { this.tip.destroy() }, 1000);
} 

Khi tôi thử ở trên, thisđề cập đến cửa sổ.

EDIT: Tóm lại, trở lại năm 2010 khi câu hỏi này được hỏi, cách phổ biến nhất để giải quyết vấn đề này là lưu tham chiếu đến bối cảnh nơi thực hiện lệnh setTimeoutgọi hàm, bởi vì setTimeoutthực thi hàm với việc thistrỏ đến đối tượng toàn cục:

var that = this;
if (this.options.destroyOnHide) {
     setTimeout(function(){ that.tip.destroy() }, 1000);
} 

Trong thông số ES5, vừa được phát hành một năm trước thời điểm đó, nó đã giới thiệu bindphương pháp này, điều này không được đề xuất trong câu trả lời ban đầu vì nó chưa được hỗ trợ rộng rãi và bạn cần sử dụng polyfill để sử dụng nhưng bây giờ nó ở khắp mọi nơi:

if (this.options.destroyOnHide) {
     setTimeout(function(){ this.tip.destroy() }.bind(this), 1000);
}

Các bindchức năng tạo ra một chức năng mới với các thisgiá trị điền sẵn.

Bây giờ trong JS hiện đại, đây chính xác là các hàm mũi tên vấn đề giải quyết trong ES6 :

if (this.options.destroyOnHide) {
     setTimeout(() => { this.tip.destroy() }, 1000);
}

Các hàm mũi tên không có thisgiá trị riêng, khi bạn truy cập vào nó, bạn đang truy cập thisgiá trị của phạm vi từ vựng kèm theo.

HTML5 cũng đã chuẩn hóa bộ định thời vào năm 2011 và bạn có thể chuyển các đối số ngay bây giờ cho hàm gọi lại:

if (this.options.destroyOnHide) {
     setTimeout(function(that){ that.tip.destroy() }, 1000, this);
}

Xem thêm:

• setTimeout - Vấn đề 'cái này'

Có các phím tắt được tạo sẵn (đường cú pháp) để trình bao bọc hàm @CMS trả lời. (Dưới đây giả sử rằng bối cảnh bạn muốn là this.tip.)

ECMAScript 5 ( trình duyệt hiện tại , Node.js) và Prototype.js

Nếu bạn nhắm mục tiêu trình duyệt tương thích với ECMA-262, phiên bản thứ 5 (ECMAScript 5) hoặc Node.js , bạn có thể sử dụng Function.prototype.bind. Bạn có thể tùy ý chuyển bất kỳ đối số chức năng để tạo các chức năng một phần .

fun.bind(thisArg[, arg1[, arg2[, ...]]])

Một lần nữa, trong trường hợp của bạn, hãy thử điều này:

if (this.options.destroyOnHide) {
    setTimeout(this.tip.destroy.bind(this.tip), 1000);
}

Chức năng tương tự cũng đã được triển khai trong Prototype (bất kỳ thư viện nào khác?).

Function.prototype.bindcó thể được thực hiện như thế này nếu bạn muốn tương thích ngược tùy chỉnh (nhưng vui lòng quan sát các ghi chú).

ECMAScript 2015 ( một số trình duyệt , Node.js 5.0.0+)

Để phát triển tiên tiến (2015), bạn có thể sử dụng các hàm mũi tên béo , là một phần của đặc tả ECMAScript 2015 (Harmony / ES6 / ES2015) ( ví dụ ).

Một biểu thức hàm mũi tên (còn được gọi là hàm mũi tên béo ) có cú pháp ngắn hơn so với biểu thức hàm và liên kết từ vựng với thisgiá trị [...].

(param1, param2, ...rest) => { statements }

Trong trường hợp của bạn, hãy thử điều này:

if (this.options.destroyOnHide) {
    setTimeout(() => { this.tip.destroy(); }, 1000);
}

jQuery

Nếu bạn đã sử dụng jQuery 1.4+, có một hàm được tạo sẵn để đặt rõ ràng thisbối cảnh của một hàm.

jQuery.proxy () : Thực hiện một hàm và trả về một hàm mới sẽ luôn có một bối cảnh cụ thể.

$.proxy(function, context[, additionalArguments])

Trong trường hợp của bạn, hãy thử điều này:

if (this.options.destroyOnHide) {
    setTimeout($.proxy(this.tip.destroy, this.tip), 1000);
}

Underscore.js , lodash

Nó có sẵn trong Underscore.js, cũng như lodash, như _.bind(...)^{1 , 2}

liên kết Bind một hàm với một đối tượng, nghĩa là bất cứ khi nào hàm được gọi, giá trị củathissẽ là đối tượng. Tùy chọn, liên kết các đối số với hàm để điền trước chúng, còn được gọi là ứng dụng một phần.

_.bind(function, object, [*arguments])

Trong trường hợp của bạn, hãy thử điều này:

if (this.options.destroyOnHide) {
    setTimeout(_.bind(this.tip.destroy, this.tip), 1000);
}

trói buộc jquery gạch dưới bản thảo-5 nguyên mẫu node.js

Trong các trình duyệt khác ngoài Internet Explorer, bạn có thể truyền các tham số cho hàm sau khi trì hoãn:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

Vì vậy, bạn có thể làm điều này:

var timeoutID = window.setTimeout(function (self) {
  console.log(self); 
}, 500, this);

Điều này tốt hơn về mặt hiệu suất so với tra cứu phạm vi (lưu thisvào bộ đệm bên ngoài biểu thức hết thời gian / khoảng thời gian), sau đó tạo một bao đóng (bằng cách sử dụng $.proxyhoặc Function.prototype.bind).

Mã để làm cho nó hoạt động trong IE từ Webreflection :

/*@cc_on
(function (modifierFn) {
  // you have to invoke it as `window`'s property so, `window.setTimeout`
  window.setTimeout = modifierFn(window.setTimeout);
  window.setInterval = modifierFn(window.setInterval);
})(function (originalTimerFn) {
    return function (callback, timeout){
      var args = [].slice.call(arguments, 2);
      return originalTimerFn(function () { 
        callback.apply(this, args) 
      }, timeout);
    }
});
@*/

LƯU Ý: Điều này sẽ không hoạt động trong IE

var ob = {
    p: "ob.p"
}

var p = "window.p";

setTimeout(function(){
    console.log(this.p); // will print "window.p"
},1000); 

setTimeout(function(){
    console.log(this.p); // will print "ob.p"
}.bind(ob),1000);

Nếu bạn đang sử dụng underscore, bạn có thể sử dụng bind.

Ví dụ

if (this.options.destroyOnHide) {
     setTimeout(_.bind(this.tip.destroy, this), 1000);
}