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

如何手寫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的實例啊?哪位知道,歡迎留言啊
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章