javascript的call apply和new原理剖析 [手寫]

mindwind 發(fā)布于2019-08-23 15:27 / 923人閱讀

摘要：今天公司沒那么忙閑來無事就手動實(shí)現(xiàn)下的和的原理吧本篇不長廢話不多分為步手寫方法手寫方法手寫方法我們知道可以改變指向，同時也可以傳遞參數(shù)。即的第一個參數(shù)為改變后的，剩余參數(shù)則是正常的函數(shù)參數(shù)。并且，調(diào)用和后相當(dāng)于改變并立馬執(zhí)行函數(shù)。

今天公司沒那么忙閑來無事就手動實(shí)現(xiàn)下js的call,apply和new的原理吧～
本篇不長廢話不多分為3步：

手寫call方法

手寫apply方法

手寫new方法

我們知道 call可以改變this指向，同時也可以傳遞參數(shù)。即 call的第一個參數(shù)為改變后的this，剩余參數(shù)則是正常的函數(shù)參數(shù)。并且，調(diào)用call和apply后相當(dāng)于改變this并立馬執(zhí)行函數(shù)。ok，上代碼～

let str = "str";

let obj = {
    name:"123"
};

function fn(){
    console.log(this);
}

fn.call(str); // 打印 String?{"str"}
fn.call(obj); // 打印 {name: "123"}

手寫call方法

注意觀看順序1,2,3,4,5...

/* Function原型上拓展call方法*/

Function.prototype.myCall = function(context){
    /** 1 如果沒傳上下文conntext 就取window為this 
     * 此處Object() 主要考慮到如果是String類型
    */
    context = context?Object(context):window;
    /** 2 改變this指向
     * this就是原函數(shù) */
    context.fn = this;
    /** 3 取參數(shù) 注意從第二個開始取
     * 因?yàn)榈谝粋€參數(shù)是上下文context 也就是this
    */
    let args = [];
    for(let i = 1; i < arguments.length; i++){
        /** 4 這里傳遞的上字符串 因?yàn)榇龝浜蟚val()使用 */
        args.push("arguments["+ i +"]");
    }
    /** 5 把參數(shù)傳遞進(jìn)去 eval()方法可以讓字符串執(zhí)行 */
    let r = eval("context.fn("+ args +")");
    /** 6 刪除原context.fn */
    delete context.fn;
    /** 7 返回r */
    return r;
}


let str = "str";

let obj = {
    name:"123"
};

function fn(){
    console.log(this);
}

fn.myCall(str); // 打印 String?{"str"}
fn.myCall(obj); // 打印 {name: "123"}

GPU云服務(wù)器云服務(wù)器 js中的call和apply JS中bind、call和apply的作 apply與call的區(qū)別 javascript call

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

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

相關(guān)文章

「中高級前端面試」JavaScript手寫代碼無敵秘籍

摘要：第一種直接調(diào)用避免在不必要的情況下使用，是一個危險的函數(shù)，他執(zhí)行的代碼擁有著執(zhí)行者的權(quán)利。來自于此外，實(shí)現(xiàn)需要考慮實(shí)例化后對原型鏈的影響。函數(shù)柯里化的主要作用和特點(diǎn)就是參數(shù)復(fù)用提前返回和延遲執(zhí)行。手寫路徑導(dǎo)航實(shí)現(xiàn)一個new操作符實(shí)現(xiàn)一個JSON.stringify 實(shí)現(xiàn)一個JSON.parse 實(shí)現(xiàn)一個call或 apply 實(shí)現(xiàn)一個Function.bind 實(shí)現(xiàn)一個繼承實(shí)現(xiàn)一個J...

Zhuxy 2019-05-23 16:26 評論0 收藏0
22道JavaScript高頻手寫面試題

JavaScript筆試部分點(diǎn)擊關(guān)注本公眾號獲取文檔最新更新,并可以領(lǐng)取配套于本指南的《前端面試手冊》以及最標(biāo)準(zhǔn)的簡歷模板. 實(shí)現(xiàn)防抖函數(shù)（debounce）防抖函數(shù)原理：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時。那么與節(jié)流函數(shù)的區(qū)別直接看這個動畫實(shí)現(xiàn)即可。 showImg(https://segmentfault.com/img/remote/146000002...

Alan 2019-08-26 10:44 評論0 收藏0
手寫JavaScript中的bind方法

摘要：如果綁定后的函數(shù)被了，那么此時指向就發(fā)生改變。構(gòu)造函數(shù)上的屬性和方法，每個實(shí)例上都有。接下來聲明一個函數(shù)，在該中獲取了第二次傳的參數(shù)，并且返回了的執(zhí)行。的又等于的實(shí)例。至此，就實(shí)現(xiàn)了自己的方法。之前已經(jīng)實(shí)現(xiàn)過了call，apply和new。今天順便把bind也實(shí)現(xiàn)下。首先： bind方法返回的是一個綁定this后的函數(shù)，并且該函數(shù)并沒有執(zhí)行，需要手動去調(diào)用。(從這一點(diǎn)看bind函數(shù)...

AZmake 2019-08-26 13:35 評論0 收藏0
手寫call、apply、bind函數(shù)

摘要：函數(shù)特點(diǎn)可以改變我們當(dāng)前函數(shù)的指向還會讓當(dāng)前函數(shù)執(zhí)行題目自測思路解析執(zhí)行傳入三個參數(shù)函數(shù)內(nèi)部執(zhí)行傳入三個參數(shù)函數(shù)內(nèi)部執(zhí)行 call函數(shù) 特點(diǎn)： 1)可以改變我們當(dāng)前函數(shù)的this指向 2）還會讓當(dāng)前函數(shù)執(zhí)行 Function.prototype.call = function (context) { if (typeof this !== function) { thro...

gecko23 2019-05-23 13:55 評論0 收藏0
學(xué)習(xí)JavaScript之this,call,apply

摘要：在全局對象中調(diào)用，自然讀取的是全局對象的值構(gòu)造器調(diào)用說明作為構(gòu)造器調(diào)用時，指向返回的這個對象。最直觀的表現(xiàn)就是，去看一些優(yōu)秀框架的源代碼時，不再是被繞的暈乎乎的。學(xué)習(xí)起因：在之前的JavaScript學(xué)習(xí)中，this,call,apply總是讓我感到迷惑，但是他們的運(yùn)用又非常的廣泛。遂專門花了一天，來弄懂JavaScript的this,call,apply。中途參考的書籍也很多，以...

wenhai.he 2019-08-19 17:30 評論0 收藏0