成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScirpt 的 bind 函數(shù)究竟做了哪些事

mzlogin / 902人閱讀

摘要：而且當(dāng)時(shí)，會(huì)把的賦給函數(shù)，而函數(shù)返回的是，所以這時(shí)的也賦給了。實(shí)例化總結(jié)所以函數(shù)總共做了哪幾件事呢沒(méi)有實(shí)例化時(shí)，將傳入對(duì)象的參數(shù)引用到當(dāng)前函數(shù)，執(zhí)行當(dāng)前函數(shù)，返回結(jié)果實(shí)例化時(shí)，使用操作生成新函數(shù)，原函數(shù)的賦給新函數(shù)，執(zhí)行新函數(shù)，并返回新函數(shù)

文章原地址：https://github.com/catchonme/...

ES5 實(shí)現(xiàn) bind 函數(shù)如下

Function.prototype.bind = function(that){
        var self = this,
            args = arguments.length > 1 ? Array.slice(arguments, 1) : null,
            F = function(){};

        var bound = function(){
            var context = that, length = arguments.length;
            if (this instanceof bound){
                F.prototype = self.prototype;
                context = new F;
            }
            var result = (!args && !length)
                ? self.call(context)
                : self.apply(context, args && length ? args.concat(Array.slice(arguments)) : args || arguments);
            return context == that ? result : context;
        };
        return bound;
    }

測(cè)試1

var bar = function() {
        console.log(this.x)
    }
var foo = {
  x: 3
}

var func = bar.bind(foo);
func(); // 3

bar 函數(shù)綁定foo 中的x 值，然后輸出3

bind 函數(shù)中最主要的是bound 函數(shù)，bound 函數(shù)做了哪些事呢？

首先context 存儲(chǔ)傳入的that 到context 中，判斷this instanceof bound ，那什么時(shí)候this instanceof bound == true 呢？在測(cè)試1中的案例中，this instanceof bound 為 false ，打印此時(shí)的this 輸出Window?{postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window,?…} ，發(fā)現(xiàn)是window 對(duì)象，因?yàn)?b>foo 本身就是在window 對(duì)象中。

所以此時(shí)直接執(zhí)行self.call(context) ，返回執(zhí)行的結(jié)果3 ，就是我們測(cè)試1中的結(jié)果。

那什么時(shí)候this instanceof bound == true 呢，而且此時(shí)還需要使用空函數(shù)F 來(lái)獲取主函數(shù)的prototype ，

答案是實(shí)例化，什么時(shí)候?qū)嵗兀?/p>

測(cè)試2

var bar = function() {
    console.log(this.x)
}
bar.prototype.name = function(){
  this.name = "name";
}
var foo = {
  x: 3
}

var func = bar.bind(foo);
var newFunc = new func; // undefined
newFunc.name(); // name

對(duì)bar.bind(foo) 進(jìn)行實(shí)例化，此時(shí)因?yàn)檫M(jìn)行了new 操作，new 操作做了什么呢，參考new操作符里面到底發(fā)生了什么？所以此時(shí)的this 為新生成的bound {} 對(duì)象，constructor 為bound 函數(shù)，所以此時(shí)this instanceof bound == true

那為什么bar.bind(foo) 把foo 對(duì)象傳遞的時(shí)候，沒(méi)有輸出3 而是undefined 呢？也是因?yàn)?b>new 操作，當(dāng)前的上下文已經(jīng)是新生成的newFunc 函數(shù)了。而且當(dāng)this instanceof bound == true 時(shí)，會(huì)把bar 的prototype 賦給F 函數(shù)，而bound 函數(shù)返回的是new F ，所以這時(shí)bar 的prototype 也賦給newFunc 了。

我們看看ES6的操作，結(jié)果和上述例子是一樣的。

var bar = function() {
    console.log(this.x)
}
bar.prototype.name = function(){
    console.log("name")
}
var foo = {
    x: 3
}
var func = bar.bind(foo);
func(); // 3
// 實(shí)例化
var newFunc = new func; // undefined
    newFunc.name(); // name

總結(jié)：

所以bind 函數(shù)總共做了哪幾件事呢？

沒(méi)有實(shí)例化時(shí)，將傳入對(duì)象的參數(shù)引用到當(dāng)前函數(shù)，執(zhí)行當(dāng)前函數(shù)，返回結(jié)果

實(shí)例化時(shí)，使用new 操作生成新函數(shù)，原函數(shù)的prototype 賦給新函數(shù)，執(zhí)行新函數(shù)，并返回新函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94678.html

相關(guān)文章

  • 前端基本功-示例代碼 (二)

    摘要：前端基本功示例代碼一點(diǎn)這里前端基本功示例代碼二點(diǎn)這里一像素偽類實(shí)現(xiàn)對(duì)于老項(xiàng)目，有沒(méi)有什么辦法能兼容的尷尬問(wèn)題了，個(gè)人認(rèn)為偽類是比較完美的方法了。 前端基本功-示例代碼 (一) 點(diǎn)這里前端基本功-示例代碼 (二) 點(diǎn)這里 1.一像素 偽類 + transform 實(shí)現(xiàn)對(duì)于老項(xiàng)目，有沒(méi)有什么辦法能兼容1px的尷尬問(wèn)題了，個(gè)人認(rèn)為偽類+transform是比較完美的方法了。 原理是把原先元素...

    Java3y 評(píng)論0 收藏0

  • 前端基本功-示例代碼 (二)

    摘要：前端基本功示例代碼一點(diǎn)這里前端基本功示例代碼二點(diǎn)這里一像素偽類實(shí)現(xiàn)對(duì)于老項(xiàng)目，有沒(méi)有什么辦法能兼容的尷尬問(wèn)題了，個(gè)人認(rèn)為偽類是比較完美的方法了。 前端基本功-示例代碼 (一) 點(diǎn)這里前端基本功-示例代碼 (二) 點(diǎn)這里 1.一像素 偽類 + transform 實(shí)現(xiàn)對(duì)于老項(xiàng)目，有沒(méi)有什么辦法能兼容1px的尷尬問(wèn)題了，個(gè)人認(rèn)為偽類+transform是比較完美的方法了。 原理是把原先元素...

    wpw 評(píng)論0 收藏0

  • 深入理解JavaScirpt的函數(shù)調(diào)用和"this"

    摘要：簡(jiǎn)單的函數(shù)調(diào)用顯而易見(jiàn)，一直用調(diào)用函數(shù)將會(huì)非常煩人。規(guī)范說(shuō)幾乎總是被傳遞，但不在嚴(yán)格模式下時(shí)被調(diào)用函數(shù)應(yīng)該將其更改為全局對(duì)象。實(shí)際上，規(guī)范有一個(gè)和都使用的原語(yǔ)內(nèi)部稱為。 過(guò)去很多年里，我看到過(guò)太多關(guān)于JavaScript函數(shù)調(diào)用的混淆。尤其是，很多人抱怨函數(shù)調(diào)用中this的語(yǔ)義令人困惑。在我看來(lái)，通過(guò)理解核心函數(shù)調(diào)用原語(yǔ)，然后將其他所有調(diào)用函數(shù)的方法視為在原語(yǔ)之上的語(yǔ)法糖，如此便可澄清...

    bladefury 評(píng)論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性，語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug，和一些定位寫法css js放置位置和原因...

    LiuRhoRamen 評(píng)論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒(méi)有換工作的打算 但為了跟上時(shí)代的腳步 還是忍不住整理了一份最新前端知識(shí)點(diǎn) 知識(shí)點(diǎn)匯總 1.HTML HTML5新特性，語(yǔ)義化瀏覽器的標(biāo)準(zhǔn)模式和怪異模式xhtml和html的區(qū)別使用data-的好處meta標(biāo)簽canvasHTML廢棄的標(biāo)簽IE6 bug，和一些定位寫法css js放置位置和原因...

    stormgens 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

mzlogin

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<