new運算符、bind、Object.create實現原理探討

waruqi 發布于2019-08-26 12:19 / 2263人閱讀

摘要：如何手寫運算符方法一運算符首先我們自己寫運算符，無法寫成這種方法，因為不識別呀，所以只能將第一個參數看做構造函數，剩余是其它傳參，例如等同于中的然后就開始吧獲取參數構造函數傳入的參數繼承的屬性繼承構造函數中的屬性測試一下，并和原生的對比一下

如何手寫new運算符、bind方法、Object.create

一、new 運算符

首先我們自己寫new運算符，無法寫成 NEW F()這種方法，因為js不識別呀，所以只能將第一個參數看做構造函數，剩余是其它傳參，例如

let m = NEW(M,"lihaixing",30);
// 等同于js中的
let m = new M("lihaixing",30);

然后就開始吧！

function NEW(){
    // 獲取參數
    let func = arguments[0]; // 構造函數
    let paras = [].slice.call(arguments,1); // 傳入的參數
    // 繼承func.prototype的屬性
    let o = Object.create(func.prototype);
    // 繼承構造函數中的屬性
    func.call(o,..paras);
    return o;
}

測試一下，并和js原生的new對比一下

function M (name, age) {
    this.name = name;
    this.age = age;
}

M.prototype.sayYear = () => {
    console.log("2018");
}

let m = NEW(M, "haixing", 30); 
let mm = new M("haixing", 30);

在控制臺中依次輸入m, mm, m.sayYear, mm.sayYear調用，結果如下

一某一樣有沒有，那就進入下一個環節吧！

二、bind方法手寫

bind方法其實和call非常一樣，唯一的區別就是，call會將函數綁到對象中，并且調用；而bind只是將函數綁到對象中，并不調用，也就是：

f.call(obj)
// 等同于
f.bind(obj)();

那么該怎么寫呢？我們知道bind方法是在綁在函數上的，而在js中，每個函數都是一個new Function(), 也就是和實例對象差不多了，所以我們要想使每個函數都能調用bind方法，就應該把它放在Function.prototype中，這樣就是把bind方法寫到了每個函數的原型中。那就開始寫吧！

Function.prototype.BIND = function () {
    // this指向的就是我們的函數哦
    let self = this;
    // 獲取參數，由于return中的函數也有arguments, 這里需重新賦值一下
    let paras = arguments;
    return function () {
        self.call(...paras); // 不要忘記解構
    }
}

然后就測試一下吧, 這里M還是上一節中的M構造函數

let c = {};
let cc = {};
M.BIND(c, "haixing", 31)();
M.bind(cc, "haixing", 31)();

結果如下

好像也沒啥問題，但是c和cc是一個字面量對象, 那如果c和cc是構造函數生成的實例對象，那會如何呢？繼續上代碼：

function A (name, age) {
    this.name = name;
    this.age = age;
}

let d = new A("haixi", 22);
let dd = new A("haixi", 22);
M.BIND(d, "haixing", 31)();
M.bind(dd, "haixing", 31)();

還是沒問題哈，constructor也是對的, 那我就放心，進入下一環節吧

三、Object.create怎么寫？

// 這個要簡單一些，就直接寫了
Object.CREATE= function (obj, properties) {
    function F () {}
    F.prototype = obj;
    let o = new F();
    // 注意Object.create可以傳入第二個參數，是一個對象，但格式必須是Object.defineProperties()方法一樣
    if (typeof properties === "object") {
        Object.defineProperties(o, properties);
    }
    return o;
}

let e = Object.create(d, {year: {value: 2019}});
let ee = Object.CREATE(d, {year: {value: 2019}});

上圖看執行結果

唉？奇怪哈，為什么一個顯示A一個顯示F呢，但兩個都是A的實例啊？哪位知道，歡迎留言啊

云服務器 GPU云服務器 new運算符隊列實現原理 cdn實現原理 webrtc實現原理

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

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

JavaScript 進階之深入理解數據雙向綁定

摘要：當我們的視圖和數據任何一方發生變化的時候，我們希望能夠通知對方也更新，這就是所謂的數據雙向綁定。返回值返回傳入函數的對象，即第一個參數該方法重點是描述，對象里目前存在的屬性描述符有兩種主要形式數據描述符和存取描述符。前言談起當前前端最熱門的 js 框架，必少不了 Vue、React、Angular，對于大多數人來說，我們更多的是在使用框架，對于框架解決痛點背后使用的基本原理往往關注...

sarva 2019-08-20 18:28 評論0 收藏0
前端面試之Js篇

摘要：作為構造函數使用，綁定到新創建的對象。內部實現類和類的繼承構造函數構造函數調用父類構造函數參考請盡可能詳盡的解釋的工作原理的原理簡單來說通過對象來向服務器發異步請求，從服務器獲得數據，然后用來操作而更新頁面。 1 . 請解釋事件代理 (event delegation) 當需要對很多元素添加事件的時，可以通過將事件添加到它們的父節點通過委托來觸發處理函數。其中利用到了瀏覽器的事件冒泡機...

anyway 2019-08-20 17:03 評論0 收藏0
日積跬步，apply/call/bind 自我實現

摘要：日常編碼中被開發者用來實現對象冒充，也即顯示綁定。面試題源碼實現，事實上是對基礎知識的一個綜合考核。原型鏈終端指向，不會有構造函數，也不會有等屬性，這些屬性來自。 call/apply/bind 日常編碼中被開發者用來實現對象冒充，也即顯示綁定 this。面試題：call/apply/bind源碼實現，事實上是對 JavaScript 基礎知識的一個綜合考核。相關知識點：作...

denson 2019-08-26 10:42 評論0 收藏0
一些搞死人的基礎題 --- (不定時更新)

摘要：檢查當前上下文中的參數，建立該對象下的屬性與屬性值。檢查當前上下文的函數聲明，也就是使用關鍵字聲明的函數。數據類型跟布爾值比較回顧下前面說的要點然后有幾個應該要知道的隱形轉換和不能轉換成其他任何值。前言 2018/04/27 新增六，講解淺拷貝和深拷貝的區別并簡單實現, 七，原生JS操作DOM？2018/04/30 新增八，解決計算精度問題,例如0.1+0.2？2018/05/0...

idisfkj 2019-08-26 10:34 評論0 收藏0