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

mindwind 發布于2019-08-23 15:27 / 892人閱讀

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

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

手寫call方法

手寫apply方法

手寫new方法

我們知道 call可以改變this指向，同時也可以傳遞參數。即 call的第一個參數為改變后的this，剩余參數則是正常的函數參數。并且，調用call和apply后相當于改變this并立馬執行函數。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就是原函數 */
    context.fn = this;
    /** 3 取參數 注意從第二個開始取
     * 因為第一個參數是上下文context 也就是this
    */
    let args = [];
    for(let i = 1; i < arguments.length; i++){
        /** 4 這里傳遞的上字符串 因為待會要配合eval()使用 */
        args.push("arguments["+ i +"]");
    }
    /** 5 把參數傳遞進去 eval()方法可以讓字符串執行 */
    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云服務器云服務器 js中的call和apply JS中bind、call和apply的作 apply與call的區別 javascript call

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102087.html

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

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

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

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

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

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

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

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

gecko23 2019-05-23 13:55 評論0 收藏0
學習JavaScript之this,call,apply

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

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