首頁 > web前端 > js教程 > JavaScript中的prototype.bind()方法介紹_基礎知識

JavaScript中的prototype.bind()方法介紹_基礎知識

WBOY
發布: 2016-05-16 16:53:20
原創
1243 人瀏覽過

以前,你可能會直接設定self=this或that=this等等,這樣做當然也能起作用,但是使用Function.prototype.bind()會更好,看上去也更專業。
下面舉個簡單的例子:

複製程式碼 程式碼如下:

var myObj = {


var myObj = {
{
    },
    anotherSpecialFunction: function () {
    },
    getAsyncData: function (cb) {
    getAsyncData: function (cb) {
   🎜>    render: function () {
        var that = this;
        this.getAsyncData(function () {
        that.anotherSpecialFunction();
        });
    }
};
myObj.render();


在這個例子中,為了保持myObj上下文,設定了一個變數that=this,這樣是可行的,但是沒有使用Function.prototype .bind()看著更整潔: 程式碼如下:


render: function () {
    this.getAsyncData(function () {
        this.specialFunction();
    🎜>

在呼叫.bind()時,它會簡單的建立一個新的函數,然後把this傳給這個函數。實作.bind()的程式碼大概是這樣的:


複製程式碼 程式碼如下:Function.prototype .bind = function (scope) {
    var fn = this;
    return function () {
       

下面在看一個簡單的使用Function.prototype.bind()的例子:


複製程式碼

程式碼如下:var foo = {};var bar = function(){    console.log(this.x);
};

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

 

是不是很好用呢!不過遺憾的是IE8以下的IE瀏覽器並不支援Function.prototype.bind()。支援的瀏覽器有Chrome 7 ,Firefox 4.0 ,IE 9 ,Opera 11.60 ,Safari 5.1.4 。雖然IE 8/7/6等瀏覽器不支持,但Mozilla開發組為舊版的IE瀏覽器寫了一個功能類似的函數,程式碼如下:



複製程式碼

程式碼如下:


if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof最接近ECMAScript 5 內部IsCallable 函數
      throw new TypeError("Function.prototype.bind - 嘗試綁定的內容不可呼叫");
  call(arguments, 1),
        fToBind = this,
        fNOP = function () {},                                     : o這個,
                            };

    fNOP.prototype = this.原型;
    fBound.prototype = new fNOP();

    return fBound;
  };
}



相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板