国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

搞懂JavaScript的Function.prototype.bind[譯]

Pandaaa / 3088人閱讀

摘要:搞懂的譯可能是初學的人最不關心的函數,當你意識到需要保持在其他函數中的上下文,實際上你需要的是。這就是問題所在。整合事件綁定和一個重大提高就是,和等等。然而,并沒有原生添加事件到多個節點的方式。能力有限,如有疑問,紕漏,速指出,感謝你

搞懂JavaScript的Function.prototype.bind[譯]

Ben Howdle

binding可能是初學Javascript的人最不關心的函數,當你意識到需要『保持this在其他函數中的上下文』,實際上你需要的是Function.prototype.bind()。

你第一次碰到問題的時候,你可能傾向于把this賦值給一個變量,你就可以在上下文改變的時候,也可以使用。許多人選擇self,_this或者context來命名。這些都不會被用到,這樣做也沒什么問題,但是這里有更好的辦法,專門解決這個問題。

我愿意為作用域做任何事,但我不會that = this

— Jake Archibald (@jaffathecake) February 20, 2013

我們真正在尋求解決的問題是什么?

看看這段代碼,把上下文賦值給一個變量:

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

如果上面直接用this.specialFunction(),結果是一個錯誤信息:

Uncaught TypeError: Object [object global] has no method "specialFunction"

當回調的時候,我們需要保持myObj的上下文引用。使用that.specialFunction(),讓我們用that的上下文且正確執行函數。然而,用Function.prototype.bind()可以簡化一些。

重寫例子:

render: function () {

    this.getAsyncData(function () {

        this.specialFunction();

        this.anotherSpecialFunction();

    }.bind(this));

}
我們剛做了什么?

.bind()就是創建了一個新函數,當我們呼叫時,把他的this賦值。所以我們可以傳遞我們的上下文,this(指向myObj),傳遞進.bind()函數。當回調執行的時候,this指向myObj。

如果我們對Function.prototype.bind()的內部實現有興致,請看下面的例子:

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

一個簡單的例子:

var foo = {
    x: 3
}

var bar = function(){
    console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3
瀏覽器兼容性
Browser Version support
Chrome 7
Firefox (Gecko) 4.0 (2)
IE 9
Opera 11.60
Safari 5.1.4

如你所見,不幸的是,不支持ie8以下(啥也不說了)。
幸運的是,MDN為那些原生不支持.bind()的瀏覽器提供了解決:

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

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

    return fBound;
  };
}
使用方式

學習東西時候,我發現有效的方式不是認真的去學習概念,而是去看怎么使用到現在的工作中。如果順利的話,下面某些例子可以被用到你的代碼中解決你面對的問題。

點擊事件處理

其中一個用處是追蹤點擊(點擊后執行一個動作),需要我們在一個對象中儲存信息:

var logger = {
    x: 0,
    updateCount: function(){
        this.x++;
        console.log(this.x);
    }
}

我們寫click事件處理,然后呼叫logger中的updateCount():

document.querySelector("button").addEventListener("click",logger.updateCount);

但我們造了一個不必要的匿名函數,保持this的正確指向。
簡化一下:

document.querySelector("button").addEventListener("click", logger.updateCount.bind(logger));

剛才我們用了.bind()創造一個新函數然后把作用域綁定到logger對象上。

時間間隔函數

如果你以前用過模板引擎(handlebars)或者MV*框架,那你應該意識到一個問題的發生,當你呼叫渲染模板,立刻想進入新的DOM節點。
假設我們嘗試實例一個jQuery插件:

var myView = {

    template: "/* a template string containing our