在關閉中訪問類成員

我在這個方法中有一個類方法和一個閉包。我如何從閉包訪問類成員？在關閉中訪問類成員

Person = function(x) { 
    this.x = x; 
} 

Person.prototype = { 
    myMethod: function() { 
     $('#myBtn').click(function() { 
     // how to access to this.x? the this reference points in another context 
     }); 
    } 
}

來源

2013-09-01 MyTitle

的Function.prototype.bind使用將幫助你在這裏

Person = function(x) { 
    this.x = x; 
} 

Person.prototype.myMethod = function() { 
    $('#myBtn').click(function() { 
    this.x; 
    }.bind(this)); 
};

你可以使用一些代碼更好的分離，在這裏也

Person = function(x) { 
    this.x = x; 
}; 

Person.prototype.myMethod = function { 
    $('#myBtn').click(this.clickHandler.bind(this)); 
}; 

Person.prototype.clickHandler = function(event) { 
    console.log(this.x); 
};

注意，如果你想支持舊版瀏覽器，請檢查出es5-shim

編輯

我〜6個月後重溫這一點，我可能會寫不同的上述代碼。我喜歡這裏的私人/公共曝光。此外，不需要任何幻想的結合或類似的東西^。^

function Person(x, $button) { 

    // private api 
    function onClick(event) { 
    console.log(x); 
    } 

    function myMethod() { 
    $button.click(); 
    } 

    // exports 
    this.x  = x; 
    this.myMethod = myMethod; 

    // init 
    $button.click(onClick); 
} 

var b = $("#myBtn"), 
    p = new Person("foo", b); 

p.x;   // "foo" 
p.myMethod(); // "foo" 
btn.click(); // "foo"

來源

2013-09-01 19:01:31 naomik

我想在這裏指出，'bind（）的'這裏指的是ES5的'Function.prototype.bind是很重要的（）'而不是'JQuery.bind（）' –

@WillM，我鏈接的文檔是MDN JavaScript文檔;而不是jQuery API。如果OP實際上在意進一步挖掘，這應該是非常明顯的。不過，我更新了鏈接文字。 – naomik

只是想幫忙，@naomik ... –

只是分配給this其他一些變量，例如_this：

Person = function(x) { 
    this.x = x; 
} 

Person.prototype = { 
    myMethod: function() { 
     var _this = this; 
     $('#myBtn').click(function() { 
      console.log(_this.x); 
     }); 
    } 
}

來源

2013-09-01 18:55:09 skimberk1

代理將是非常有用的在這裏。

現在，您正在爲click事件分配一個匿名函數。默認情況下，上下文將是事件的並與您的對象分開。

通過代理，您可以爲（回調）函數分配特定的上下文。因此，當事件發生時，你正在處理你的人物。

事件處理函數分配在像initialize()一個單獨的功能，並有myMethod()是處理程序。

使用JQuery.proxy()將對象的上下文分配給事件處理程序。

Person.prototype = { 
    initialize: function() { 
     $('#myBtn').click($.proxy(this.myMethod, this)); 
    }, 

    myMethod: function(event) { 
    ... 
    console.log(this); // Person object 
    } 
}

只是爲了引起區別我和@ naomik的解決方案之間：

JQuery.proxy()是一個臨時的或窄分配到上下文。
Function.prototype.bind()是一個強大的上下文分配。該方法將「永遠」與您給它的上下文綁定。

來源

2013-09-01 18:55:46

Person = function(x) { 
    this.x = x; 
} 

Person.prototype = { 
    myMethod: function() { 
     var self = this; 
     $('#myBtn').click(function() { 
     // Access to self.x 
     }); 
    } 
}

來源

2013-09-01 19:00:53 adjogima

在關閉中訪問類成員

回答

相關問題