成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

new運(yùn)算符、bind、Object.create實(shí)現(xiàn)原理探討

waruqi / 2268人閱讀

摘要：如何手寫運(yùn)算符方法一運(yùn)算符首先我們自己寫運(yùn)算符，無法寫成這種方法，因?yàn)椴蛔R(shí)別呀，所以只能將第一個(gè)參數(shù)看做構(gòu)造函數(shù)，剩余是其它傳參，例如等同于中的然后就開始吧獲取參數(shù)構(gòu)造函數(shù)傳入的參數(shù)繼承的屬性繼承構(gòu)造函數(shù)中的屬性測試一下，并和原生的對比一下

如何手寫new運(yùn)算符、bind方法、Object.create
一、new 運(yùn)算符

首先我們自己寫new運(yùn)算符，無法寫成 NEW F()這種方法，因?yàn)閖s不識(shí)別呀，所以只能將第一個(gè)參數(shù)看做構(gòu)造函數(shù)，剩余是其它傳參，例如

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

然后就開始吧！

function NEW(){
    // 獲取參數(shù)
    let func = arguments[0]; // 構(gòu)造函數(shù)
    let paras = [].slice.call(arguments,1); // 傳入的參數(shù)
    // 繼承func.prototype的屬性
    let o = Object.create(func.prototype);
    // 繼承構(gòu)造函數(shù)中的屬性
    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);

在控制臺(tái)中依次輸入m, mm, m.sayYear, mm.sayYear調(diào)用，結(jié)果如下

一某一樣有沒有，那就進(jìn)入下一個(gè)環(huán)節(jié)吧！

二、bind方法手寫

bind方法其實(shí)和call非常一樣，唯一的區(qū)別就是，call會(huì)將函數(shù)綁到對象中，并且調(diào)用；而bind只是將函數(shù)綁到對象中，并不調(diào)用，也就是：

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

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

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

然后就測試一下吧, 這里M還是上一節(jié)中的M構(gòu)造函數(shù)

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

結(jié)果如下

好像也沒啥問題，但是c和cc是一個(gè)字面量對象, 那如果c和cc是構(gòu)造函數(shù)生成的實(shí)例對象，那會(huì)如何呢？繼續(xù)上代碼：

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也是對的, 那我就放心，進(jìn)入下一環(huán)節(jié)吧

三、Object.create怎么寫？ 
// 這個(gè)要簡單一些，就直接寫了
Object.CREATE= function (obj, properties) {
    function F () {}
    F.prototype = obj;
    let o = new F();
    // 注意Object.create可以傳入第二個(gè)參數(shù)，是一個(gè)對象，但格式必須是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}});

上圖看執(zhí)行結(jié)果

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

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

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

相關(guān)文章

  • JavaScript 進(jìn)階之深入理解數(shù)據(jù)雙向綁定

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

    sarva 評論0 收藏0

  • 前端面試之Js篇

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

    anyway 評論0 收藏0

  • 日積跬步，apply/call/bind 自我實(shí)現(xiàn)

    摘要：日常編碼中被開發(fā)者用來實(shí)現(xiàn)對象冒充，也即顯示綁定。面試題源碼實(shí)現(xiàn)，事實(shí)上是對基礎(chǔ)知識(shí)的一個(gè)綜合考核。原型鏈終端指向，不會(huì)有構(gòu)造函數(shù)，也不會(huì)有等屬性，這些屬性來自。 call/apply/bind 日常編碼中被開發(fā)者用來實(shí)現(xiàn) 對象冒充，也即 顯示綁定 this。 面試題：call/apply/bind源碼實(shí)現(xiàn)，事實(shí)上是對 JavaScript 基礎(chǔ)知識(shí)的一個(gè)綜合考核。 相關(guān)知識(shí)點(diǎn)： 作...

    denson 評論0 收藏0

  • 一些搞死人的基礎(chǔ)題 --- (不定時(shí)更新)

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

    idisfkj 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<