看完這篇文章還不會call/apply/bind的來找我。

Java3y 發(fā)布于2019-08-20 11:14 / 2095人閱讀

摘要：關(guān)于的指向的問題請參照我的學(xué)習(xí)筆記。那么在這里事實上都改變了函數(shù)方法被調(diào)用時的指向。那么回調(diào)函數(shù)在執(zhí)行的時候指向還是。大家看完之后應(yīng)該已經(jīng)懂了把還是不懂的話在評論區(qū)留言，我給大家解答。

先從一個小題目開始吧：

要實現(xiàn)一個加法函數(shù)，這個時候向函數(shù)當中傳遞個數(shù)大于0的若干個整形數(shù)據(jù)，求所有這些數(shù)據(jù)的和。

Function.prototype.call

Function.prototype.apply

Function.prototype.bind

其中call方法:

    var personA = {
        name: "XL",
        sayName: function (hobby){
            console.log(this.name + " likes " + hobby);
        } 
    };
    
    personA.sayName("basketball");   // "XL likes basketball"
    
    var personB = {
        name: "xl"
    }
    
    personA.sayName.call(personB, "basketball");  // "xl likes basketball"
    personA.sayName.apply(personB, ["basketball"]); // "xl likes basketball"

call和apply的區(qū)別就在于傳遞方式的不同，call在接收指定參數(shù)的形式是someMethod.call(obj, arg1, arg2);而apply在接收指定參數(shù)時的形式是someMethod.apply(obj, [arg1, arg2]).或者someMethod.apply(obj, arg1),但是這個arg1必須是一個類數(shù)組對象

其實想要真正掌握call/apply包括bind方法，首先必須搞清楚當一個函數(shù)/方法被調(diào)用的時候this的指向問題。關(guān)于this的指向的問題請參照我的學(xué)習(xí)筆記。

那么在這里call,apply,bind事實上都改變了函數(shù)/方法被調(diào)用時this的指向。

還是拿上面的例子來說：

    personA.sayName(‘basketball’); //調(diào)用sayName()這個方法的對象是personA,因此sayName()內(nèi)部的this指向就是personA對象

換一種寫法

    var sayName = personA.sayName("basketball");
    //這里將sayName方法掛載到了window對象上，即window.sayName = person.sayName();  這個時候調(diào)用sayName().此時this指向就是window對象

使用call/apply

    personA.sayName.call(personB, "basketball");
    //本來sayName方法的this指向是personA對象，但是調(diào)用call后，this對象指向了personB對象。

如果大家這種寫法看不習(xí)慣，那就換種方式來看:

    personA.sayName.call(personB, "basketball") ===> personB.sayName("basketball");
    //從前面的一個形式變?yōu)楹竺嬉环N形式，此時,sayName方法的this指向是personB對象了。

換一種方式書寫后大家應(yīng)該看的很清晰明了了吧？以后碰到call/apply調(diào)用的時候，換一種形式去理解，這樣就很清晰了。

再比如大家經(jīng)常看到的一種對于函數(shù)的arguments類數(shù)組對象的處理方式：

    function fn() {
        var args = Array.prototype.slice.apply(arguments); //這里將arguments這個類數(shù)組對象轉(zhuǎn)化為一個數(shù)組 
    }
    
    //咱們再來轉(zhuǎn)化下:
Array.prototype.slice.apply(arguments); ===>>> arguments.slice(); 
//因為arguments是類數(shù)組對象的原因，因此它可以直接調(diào)用slice方法;如果要截取數(shù)組的從第幾位到第幾位的數(shù)

Array.prototype.slice.apply(arguments, [0, 2]); ===>>> arguments.slice(0, 2);

握草，感覺編不下去了- -

其實將call/apply,換一種形式去看，是不是就和普通的方法調(diào)用一樣一樣的。

bind方法呢，起的作用和call,apply一樣，都是改變函數(shù)/方法執(zhí)行時,this的指向，確保這個函數(shù)/方法運行時this指向保持一致。
比如大家經(jīng)常用到的setTimeout異步函數(shù)：

    var person = {
        name: "XL",
        sayName: function() {
            setTimeout(function() {
                console.log(this.name);
            }, 0);
        }
    }
    
    person.sayName();   //最后輸出： undefined

這是因為setTimeout()這個異步函數(shù)調(diào)用的時候，內(nèi)部的回調(diào)函數(shù)this的指向是window.但是在window對象上并未掛載name屬性，因此最后輸出undefined.

添加一行代碼

    var name = "XLLLL";
    var person = {
        name: "XL",
        sayName: function() {
            setTimeout(function() {
                console.log(this.name);
            }, 0);
        }
    }
    
    person.sayName();   //輸出  ‘XLLLL’

為了避免在回調(diào)函數(shù)當中,this指向發(fā)生變化，所以大家都會這樣處理：

    var person = {
        name: "XL",
        sayName: function() {
            setTimeout(function() {
                console.log(this.name);
            }.bind(this), 0);   //通過bind方法將this對象綁定為person。那么回調(diào)函數(shù)在執(zhí)行的時候,this指向還是person。
        }
    }

可以用下面這段代碼來簡單模擬下bind方法內(nèi)部的操作:

    Function.prototype.bind = function(obj) {
        var method = this;
        return function() {
            method.apply(obj, arguments);
        }
    }

還記得剛才給大家講的將apply進行變換的形式嗎？

    Function.prototype.bind = function(obj) {
        var method = this;
        return function() {
            obj.method(arguments);
        }
    }

大家應(yīng)該看到了bind和apply/call的區(qū)別了吧？ bind方法是返回一個新的函數(shù)，但是這個函數(shù)比較特殊，這個函數(shù)的this對象已經(jīng)被bind方法傳入的第一個參數(shù)給綁定了.

比如我們可以使用bind方法來簡寫一個方法:

    function fn() {
        var hasOwnKey = Function.call.bind(Object.hasOwnProperty);
        
        for(var key in obj) {
            if(hasOwnKey(obj, key)) {
                //xxxx
            }
        }
    }

唉，真的編不下去了。大家看完之后應(yīng)該已經(jīng)懂了把？ - -

還是不懂的話在評論區(qū)留言，我給大家解答。

哦，一開始那個題目的一種寫法

    //要實現(xiàn)一個加法函數(shù)，這個時候向函數(shù)當中傳遞個數(shù)大于0的若干個整形數(shù)據(jù)，求所有這些數(shù)據(jù)的和。
    function add() {
        return Array.prototype.reduce.call(arguments, function(n1, n2) {
            return n1 + n2;
        });   
    }

云服務(wù)器 GPU云服務(wù)器來找我篇文章不會寫不會用

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

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

發(fā)表評論

登陸后可評論

0條評論

Java3y

男|高級講師

我要關(guān)注我要私信

TA的文章

前端面試每日3+1（周匯總2019.08.25）

閱讀 3466·2019-08-30 15:44
微信公眾號開發(fā)通用任務(wù)清單

閱讀 808·2019-08-30 13:46
2019年3月所遇知識點整理

閱讀 2097·2019-08-30 11:05
簡單上手CSS-Shadow

閱讀 3344·2019-08-29 18:32
基礎(chǔ)練習(xí)-登陸界面

閱讀 2165·2019-08-29 13:56
gulp+browser-sync實現(xiàn)前端自動化刷新

閱讀 1304·2019-08-29 12:57
20 個 CSS 高級技巧匯總

閱讀 770·2019-08-28 18:21
[ 一起學(xué)React系列 -- 0 ] React技術(shù)棧學(xué)習(xí)路線

閱讀 1755·2019-08-26 12:16

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

看完這篇文章還不會call/apply/bind的來找我。

相關(guān)文章

十分鐘快速了解《你不知道的 JavaScript》（上卷）

【好好面試】學(xué)完Aop,連動態(tài)代理的原理都不懂？

javascript 基礎(chǔ)之 call, apply, bind

WebPack2配置我的Vue開發(fā)環(huán)境

你不知道的js中關(guān)于this綁定機制的解析[看完還不懂算我輸]

發(fā)表評論

0條評論

Java3y

男|高級講師

TA的文章

前端面試每日3+1（周匯總2019.08.25）

微信公眾號開發(fā)通用任務(wù)清單

2019年3月所遇知識點整理

簡單上手CSS-Shadow

基礎(chǔ)練習(xí)-登陸界面

gulp+browser-sync實現(xiàn)前端自動化刷新

20 個 CSS 高級技巧匯總

[ 一起學(xué)React系列 -- 0 ] React技術(shù)棧學(xué)習(xí)路線

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

看完這篇文章還不會call/apply/bind的來找我。

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

看完這篇文章還不會call/apply/bind的來找我。