亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

ES5 call,apply,bind方法總結(jié)（包括理解this的指向問題）

nanchen2251 / 2108人閱讀

總結(jié)call,apply,bind方法的理解使用和區(qū)別。

call,apply,bind這三個(gè)方法在JavaScript中是用來改變函數(shù)調(diào)用的this指向。那么改變函數(shù)this指向有什么用呢？我們先來看一段代碼

var a= {
    name:"harden",
    fn:function () {
        console.log(this.name);
    }
}
var b = a.fn;
a.fn();//harden
b();//undefined

調(diào)用a.fn方法后得到了harden，但在b方法中我想得到harden，為什么卻是undefined呢？原因是方法在執(zhí)行的時(shí)候才能確定this到底指向誰，實(shí)際上this指向的是最終調(diào)用函數(shù)的對(duì)象。這里當(dāng)b執(zhí)行時(shí)，實(shí)際是window調(diào)用了fn函數(shù)，那么fn中的this就指向window。
在開始講call,apply,bind方法前，一起來總結(jié)一下this的指向問題。

理解JavaScript中的this指向問題。

總體來說this指向可以概括為一句話：this指向在函數(shù)的定義時(shí)是不確定的，只有函數(shù)執(zhí)行時(shí)才能確定this到底指向誰，實(shí)際上this的最終指向的是那個(gè)調(diào)用它的對(duì)象。但是這個(gè)說法在函數(shù)被很多對(duì)象包裹的時(shí)候并不成立，請(qǐng)看下面例子。
簡(jiǎn)單來說就是：誰（哪個(gè)對(duì)象）調(diào)用的這個(gè)函數(shù)，那么這個(gè)函數(shù)中的this就指向這個(gè)對(duì)象。

例一

 function a(){
        var name= "harden";
        console.log(this.name); //undefined
        console.log(this); //Window
    }
    a();

因?yàn)閠his最終指向調(diào)用他的對(duì)象，在上述代碼中其實(shí)是widow觸發(fā)的這個(gè)方法，那么this就指向window，window中并沒有定義a，那么就打印出undefined。
例二：

var a = {
    name:"harden",
    fn:function() {
        console.log(this.name);//harden
        console.log(this);//指向a(可以自己跑一下)
    }
}
a.fn()

這里的this指向a，因?yàn)檫@里的fn函數(shù)是通過a.fn()執(zhí)行的，那么this自然指向a。
說到這我就有疑問了，如果我用 window.a.fn()執(zhí)行函數(shù)，this不就指向window了嗎？然后并不是這樣的，請(qǐng)看下一個(gè)例子。補(bǔ)充一點(diǎn)：window是js的全局對(duì)象。
例三：

var a = {
    name:"harden",
    b:{
        name:"james",
        fn:function() {
            console.log(this.name);//james
            console.log(this);//指向b
        }
    }
}
a.b.fn()

我們看到最終是a調(diào)用的方法，那為什么this會(huì)指向b呢？現(xiàn)在總結(jié)三句話，來完全理解this的指向問題：

情況一：如果一個(gè)函數(shù)中有this，但是它沒有被上一級(jí)的對(duì)象所調(diào)用，那么this指向的就是window（除去嚴(yán)格模式外）。
情況二：如果一個(gè)函數(shù)中有this，這個(gè)函數(shù)有被上一級(jí)的對(duì)象所調(diào)用，那么this指向的就是上一級(jí)的對(duì)象。
情況三：如果一個(gè)函數(shù)中有this，這個(gè)函數(shù)中包含多個(gè)對(duì)象，盡管這個(gè)函數(shù)是被最外層的對(duì)象所調(diào)用，this指向的也只是它上一級(jí)的對(duì)象，例子3可以證明。

構(gòu)造函數(shù)中的this：

 function Fn(){
       this.name = "harden";
   }
   var a = new Fn();
   console.log(a.name); //harden

這里的a可以點(diǎn)出name，因?yàn)閚ew關(guān)鍵字會(huì)改變this的指向。為什么new關(guān)鍵字會(huì)改變this呢，我自己有兩種看法：
1.在new的過程中會(huì)創(chuàng)建一個(gè)實(shí)例對(duì)象，通過apply等方法 通過 Fn.apply({}) 使this指向這個(gè)空對(duì)象，最后把fn方法中的材料加工完后返回給a。

當(dāng)this遇到return的時(shí)候：

function fn()  
   {  
       this.user = "harden";  
       return {};  
   }
   var a = new fn;  
   console.log(a.user); //undefined
   
   function fn()  
   {  
       this.user = "harden";  
       return function(){};
   }
   var a = new fn;  
   console.log(a.user); //undefined
   
   function fn()  
   {  
       this.user = "harden";  
       return 1;
   }
   var a = new fn;  
   console.log(a.user); //harden
   
   function fn()  
   {  
       this.user = "harden";  
       return undefined;
   }
   var a = new fn;  
   console.log(a.user); //harden

總結(jié)一下：如果返回值是一個(gè)對(duì)象，那么this指向的就是那個(gè)返回的對(duì)象，如果返回值不是一個(gè)對(duì)象那么this還是指向函數(shù)的實(shí)例。還有一點(diǎn)就是返回null，null也是對(duì)象，但是因?yàn)樗奶厥庑?，返回后this還是指向函數(shù)本身的實(shí)例。理解JavaScript中的指向問題
理解完JavaScript中的指向問題，那么回到正題：

call,apply,bind方法總結(jié)

1.call

a = { name: "harden" }
function b () {
    console.log(this.name);
}
b.call(a);//harden
b()//undefined

b.call(a)用字面意思來講就是：把函數(shù)b添加到對(duì)象a的環(huán)境中，使函數(shù)中的this指向?qū)ο骯。
call與apply不同的地方就是傳參不同。
2.apply

a = { name: "harden" }
function b (data1,data2) {
    console.log(data1,data2);
}
b.call(a,"a1","a2");//a1 a2
b.apply(a,["a1","a2"]);//a1 a2

3.bind

a = { name: "harden" }
    function b () {
        console.log(this.name);
    }
    b.bind(a);//不會(huì)執(zhí)行函數(shù)
    var aaa = b.bind(a);
    aaa()//harden

bind不會(huì)立即調(diào)用函數(shù)，是把函數(shù)返回，bind通常用它來指定回調(diào)函數(shù)的this。
關(guān)于call, apply, bind方法的區(qū)別與內(nèi)部實(shí)現(xiàn)

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

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

相關(guān)文章

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時(shí)，將第一個(gè)參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆?；A(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時(shí)候經(jīng)常喜歡用它來考察面試者的基礎(chǔ)是否扎實(shí)，以及邏輯、思維能力和臨場(chǎng)表現(xiàn)，題目是：模擬實(shí)現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會(huì)有思路來解答。社區(qū)上關(guān)于原生bind的研...

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

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時(shí)，將第一個(gè)參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆?；A(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時(shí)候經(jīng)常喜歡用它來考察面試者的基礎(chǔ)是否扎實(shí)，以及邏輯、思維能力和臨場(chǎng)表現(xiàn)，題目是：模擬實(shí)現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會(huì)有思路來解答。社區(qū)上關(guān)于原生bind的研...

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

  • 從一道面試題，到“我可能看了假源碼”

    摘要：返回的綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。同時(shí)，將第一個(gè)參數(shù)以外的其他參數(shù)，作為提供給原函數(shù)的預(yù)設(shè)參數(shù)，這也是基本的顆粒化基礎(chǔ)。 今天想談?wù)勔坏狼岸嗣嬖囶}，我做面試官的時(shí)候經(jīng)常喜歡用它來考察面試者的基礎(chǔ)是否扎實(shí)，以及邏輯、思維能力和臨場(chǎng)表現(xiàn)，題目是：模擬實(shí)現(xiàn)ES5中原生bind函數(shù)。也許這道題目已經(jīng)不再新鮮，部分讀者也會(huì)有思路來解答。社區(qū)上關(guān)于原生bind的研...

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

  • bind()、call()、apply()理解及用法

    摘要：首先，我們判斷是否存在方法，然后，若不存在，向?qū)ο蟮脑椭刑砑幼远x的方法。指向調(diào)用它的對(duì)象?？傊齻€(gè)的使用區(qū)別都是用來改變函數(shù)的對(duì)象的指向的第一個(gè)參數(shù)都是要指向的對(duì)象都可以利用后續(xù)參數(shù)傳參是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用，是立即調(diào)用 apply和call都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的上下文而存在的（就是為了改變函數(shù)內(nèi)部this的指向），F(xiàn)unction對(duì)象的方法，每個(gè)函數(shù)都能調(diào)用； 使用a...

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

  • 可能遇到假的面試題：不用call和apply方法模擬實(shí)現(xiàn)ES5的bind方法

    摘要：來自朋友去某信用卡管家的做的一道面試題，用原生模擬的方法，不準(zhǔn)用和方法。他們的用途相同，都是在特定的作用域中調(diào)用函數(shù)。不同之處在于，方法傳遞給調(diào)用函數(shù)的參數(shù)是逐個(gè)列出的，而則是要寫在數(shù)組中。 本文首發(fā)我的個(gè)人博客：前端小密圈，評(píng)論交流送1024邀請(qǐng)碼，嘿嘿嘿?。 來自朋友去某信用卡管家的做的一道面試題，用原生JavaScript模擬ES5的bind方法，不準(zhǔn)用call和bind方法。 ...

    李世贊 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<