手動實現一個new操作

sevi_stuo 發布于2019-08-22 18:02 / 3352人閱讀

摘要：寫在前面在所有的前端面試中常常喜歡考面試者如何手寫一個操作符，作為在準備秋招的大三黨，我也要考慮這些。

寫在前面

在所有的前端面試中常常喜歡考面試者如何手寫一個new操作符，作為在準備秋招的大三黨，我也要考慮這些。
那么我們先看看new操作符都干了什么事情，有哪些操作？通過下面的代碼來進行思考：

// 新建一個類（構造函數）
function Otaku(name, age) {
    this.name = name;
    this.age = age;
    // 自身的屬性
    this.habit = "pk";
}
// 給類的原型上添加屬性和方法
Otaku.prototype.strength = 60;
Otaku.prototype.sayYourName = function () {
    console.log("I am " + this.name);
}
// 實例化一個person對象
const person = new Otaku("喬峰",5000);
person.sayYourName();
console.log(person);//打印出構造出來的實例

解析

從控制臺打印出來的結果我們可以看出new操作符大概做了幾件事情：

返回（產生）了一個新的對象

訪問到了類Otaku構造函數里的屬性

訪問到Otaku原型上的屬性和方法并且設置了this的指向（指向新生成的實例對象）

通過上面的分析展示，可以知道new團伙里面一定有Object的參與，不然對象的產生就有點說不清了。先來邊寫寫：

// 需要返回一個對象 借助函數來實現new操作 
// 傳入需要的參數： 類 + 屬性
const person = new Otaku("喬峰",5000);
const person1 = objectFactory(Otaku, "鳩摩智", 5000);

// 開始來實現objectFactory 方法 
function objectFactory(obj, name, age) {}
// 這種方法將自身寫死了 如此他只能構造以obj為原型，并且只有name 和 age 屬性的 obj
// 在js中 函數因為arguments 使得函數參數的寫法異常靈活，在函數內部可以通過arguments來獲得函數的參數
function objectFactory() {
    console.log(arguements); //{ "0": [Function: Otaku], "1": "鳩摩智", "2": 5000 }
     // 通過arguments類數組打印出的結果，我們可以看到其中包含了構造函數以及我們調用objectfactory時傳入的其他參數
    // 接下來就是要想如何得到其中這個構造函數和其他的參數
    // 由于arguments是類數組，沒有直接的方法可以供其使用，我們可以有以下兩種方法:
    // 1. Array.from(arguments).shift(); //轉換成數組 使用數組的方法shift將第一項彈出
    // 2.[].shift().call(arguments); // 通過call() 讓arguments能夠借用shift方法
    const Constructor = [].shift.call(arguments);
    const args = arguments;
    // 新建一個空對象 純潔無邪
    let obj = new Object();
    // 接下來的想法 給obj這個新生對象的原型指向它的構造函數的原型  
    // 給構造函數傳入屬性，注意：構造函數的this屬性
    // 參數傳進Constructor對obj的屬性賦值，this要指向obj對象
    // 在Coustructor內部手動指定函數執行時的this 使用call、apply實現
    Constructor.call(obj,...args);
    return obj;
}

上面的代碼注釋太多，剔除注釋以后的代碼：

    function objectFactory() {
        let Constructor = [].shift.call(arguments);
        const obj = new Object();
        obj.__proto__ = Conctructor.prototype;
        Constructor.call(obj,...arguments);
        return obj;
    }

還有另外一種操作：

function myNew(Obj,...args){
  var obj = Object.create(Obj.prototype);//使用指定的原型對象及其屬性去創建一個新的對象
  Obj.apply(obj,args); // 綁定 this 到obj, 設置 obj 的屬性
  return obj; // 返回實例
}

云服務器 GPU云服務器 new一個這是一個登錄操作手勢操作實現實現一個webrtc

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

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

手動實現一個new操作符理解

手動實現一個new操作符理解網上看了一些手動實現new操作符的方法和效果，現在來總結下第一種方法 function new1(func) { var newObj = Object.create(func.prototype); // 創建一個繼承自func.prototype的新對象 var returnObj = func.apply(newO...

lentoo 2019-08-23 16:49 評論0 收藏0
手動實現bind函數（附MDN提供的Polyfill方案解析）

摘要：被調用時，等參數將置于實參之前傳遞給被綁定的方法。它返回由指定的值和初始化參數改造的原函數拷貝。一個綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。其實這個思路也是庫如何實現繼承的方法。他的函數如下最后一步是將的指回。 update: 2018-06-08 原文鏈接為什么要自己去實現一個bind函數？ bind()函數在 ECMA-262 第五版才被加入；它可能無法在所...

idisfkj 2019-08-26 12:00 評論0 收藏0
使用jQuery監聽掃碼槍輸入并禁止手動輸入的實現方法

摘要：一功能需求使用掃碼槍掃描條碼，在一個頁面監聽獲取掃碼槍的數據，并禁止用戶進行手動的輸入操作。因為掃碼槍的輸入速度非常的快，我測試的掃碼槍輸入的間隔大概在毫秒，然后手動輸入的之間，除非刻意的想突破限制進行快速的輸入。基于jQuery的掃碼槍監聽。如果只是想實現監聽獲取條碼掃碼信息，可以直接拿來使用，如果有更多的條碼判斷處理邏輯需要自己擴展。一、功能需求使用掃碼槍掃描條碼，在一個web...

plokmju88 2019-08-21 11:46 評論0 收藏0
使用jQuery監聽掃碼槍輸入并禁止手動輸入的實現方法

摘要：一功能需求使用掃碼槍掃描條碼，在一個頁面監聽獲取掃碼槍的數據，并禁止用戶進行手動的輸入操作。因為掃碼槍的輸入速度非常的快，我測試的掃碼槍輸入的間隔大概在毫秒，然后手動輸入的之間，除非刻意的想突破限制進行快速的輸入。基于jQuery的掃碼槍監聽。如果只是想實現監聽獲取條碼掃碼信息，可以直接拿來使用，如果有更多的條碼判斷處理邏輯需要自己擴展。一、功能需求使用掃碼槍掃描條碼，在一個web...

BlackHole1 2019-08-29 12:55 評論0 收藏0
使用jQuery監聽掃碼槍輸入并禁止手動輸入的實現方法

摘要：一功能需求使用掃碼槍掃描條碼，在一個頁面監聽獲取掃碼槍的數據，并禁止用戶進行手動的輸入操作。因為掃碼槍的輸入速度非常的快，我測試的掃碼槍輸入的間隔大概在毫秒，然后手動輸入的之間，除非刻意的想突破限制進行快速的輸入。基于jQuery的掃碼槍監聽。如果只是想實現監聽獲取條碼掃碼信息，可以直接拿來使用，如果有更多的條碼判斷處理邏輯需要自己擴展。一、功能需求使用掃碼槍掃描條碼，在一個web...

bingo 2019-08-01 17:06 評論0 收藏0