JavaScript進(jìn)階之模擬new Object過(guò)程

chengtao1633 發(fā)布于2019-08-23 15:55 / 779人閱讀

摘要：后續(xù)我將推出進(jìn)階系列，一方面是一個(gè)監(jiān)督自己學(xué)習(xí)的一個(gè)過(guò)程，另一方面也會(huì)給看到的童鞋一些啟發(fā)。第二步鏈接到原型中現(xiàn)在把構(gòu)造函數(shù)和參數(shù)都打印出來(lái)了。

原文：https://zhehuaxuan.github.io/...  
作者：zhehuaxuan

寫(xiě)在前面的話

前端的入門(mén)相對(duì)簡(jiǎn)單，相對(duì)于其他方向天花板可能會(huì)相對(duì)較低。但是在市場(chǎng)上一個(gè)優(yōu)秀的前端依舊是很搶手的。能夠站在金字塔上的人往往寥寥無(wú)幾。

目前前端也已經(jīng)一年半了，在公司的知識(shí)棧相對(duì)落后，就業(yè)形勢(shì)不容樂(lè)觀，所以有必要自己琢磨，往中高級(jí)前端進(jìn)階。后續(xù)我將推出《JavaScript進(jìn)階系列》，一方面是一個(gè)監(jiān)督自己學(xué)習(xí)的一個(gè)過(guò)程，另一方面也會(huì)給看到的童鞋一些啟發(fā)。

JavaScript新建對(duì)象的過(guò)程

在ES5中定義一個(gè)函數(shù)來(lái)創(chuàng)建對(duì)象，如下：

function Person(name){
    this.name = name;
}
Person.prototype.getName = function(){
    return name;
}
var person = new Person("xuan");
console.log(person.name);//輸出：xuan
console.log(person.getName());//輸出：xuan

我們看到當(dāng)我們新建一個(gè)對(duì)象，我們就可以訪問(wèn)構(gòu)造器中的指向this的屬性，還可以訪問(wèn)原型中的屬性。我們不妨把JavaScript調(diào)用new的過(guò)程主要由下面四步組成：

新生成一個(gè)空對(duì)象
將空對(duì)象鏈接到原型中
綁定this
返回新對(duì)象

下面跟著我按照這個(gè)思路來(lái)創(chuàng)建對(duì)象：

function create(){
    //Todo
}
person = create(Person,"xuan");//create(ObjectName,...arguments)

我們使用如上所示的函數(shù)來(lái)模擬new關(guān)鍵字。

首先第一步新建一個(gè)對(duì)象：

function create(){
    var obj = new Object();
    return obj;
}
person = create(Person,"xuan");

現(xiàn)在已經(jīng)創(chuàng)建并返回一個(gè)對(duì)象，當(dāng)然現(xiàn)在打印出來(lái)肯定是一個(gè)普通的對(duì)象，畢竟流程還沒(méi)有走完，我們接著往下看。

第二步鏈接到原型中：

function create(){
    var obj = new Object();
    var constructor = [].shift.call(arguments);
    console.log(constructor);
    console.log(arguments);
    obj.__proto__ = constructor.prototype;
    return obj;
}

person = create(Person,"xuan");

現(xiàn)在把構(gòu)造函數(shù)和參數(shù)都打印出來(lái)了。沒(méi)問(wèn)題！

第三步綁定this，如下：

function create() {
  let obj = new Object();
  let constructor = [].shift.call(arguments)
  obj.__proto__ = constructor.prototype
  constructor.apply(obj, arguments);
  console.log(obj);  
  return obj;
}
person = create(Person,"xuan");

打印結(jié)果實(shí)現(xiàn)new對(duì)象的效果。

現(xiàn)在改一下構(gòu)造函數(shù)代碼：

function Person(name){
    this.name = name;
    return {
        name:"abc"
    }
}
var person = new Person("xuan");
console.log(person);
console.log(Object.prototype.toString.call(person));

效果如下:

我們執(zhí)行一下我們構(gòu)建的函數(shù)效果如下：

發(fā)現(xiàn)不一致，所以我們要處理第三步綁定this中apply函數(shù)的返回值：

function create() {
  let obj = new Object();
  let constructor = [].shift.call(arguments)
  obj.__proto__ = constructor.prototype
  //constructor.apply(obj, arguments);
  let res = constructor.apply(obj, arguments);
  if(res){
     return res;
  }else{
     return obj;
  }
}
person = create(Person,"xuan");

效果如下：

完美！

現(xiàn)在我們思考一下這里的res返回值有三種情況：undefined，基本類(lèi)型，對(duì)象。

如果res是undefined時(shí)，返回obj；如果res是基本類(lèi)型我們也返回obj；
如果res是對(duì)象我們返回res對(duì)象；

綜合一下：

如果返回的res對(duì)象是Object類(lèi)型那么返回res，否則返回obj。當(dāng)然其他的判斷條件也是可以的。最后代碼優(yōu)化如下：

function create() {
  let obj = new Object();
  let constructor = [].shift.call(arguments)
  obj.__proto__ = constructor.prototype
  //constructor.apply(obj, arguments);
  let res = constructor.apply(obj, arguments);
  return res instanceof Object?res:obj;
}
person = create(Person,"xuan");

幾個(gè)問(wèn)題

現(xiàn)在的代碼已經(jīng)完美了么？我們先來(lái)提幾個(gè)問(wèn)題。

new Object()創(chuàng)建的對(duì)象純凈么？
為啥使用[].shift.call()來(lái)進(jìn)行參數(shù)分割？arguments是一個(gè)數(shù)組么？

new Object()創(chuàng)建的對(duì)象純凈么？

首先什么是純凈？我們定義一個(gè)對(duì)象的__proto__屬性為空的對(duì)象是一個(gè)純凈的對(duì)象。

在第二步的時(shí)候中已經(jīng)改變的obj的原型鏈，所以無(wú)論它前面的原型鏈?zhǔn)钦拥亩紵o(wú)所謂，但是為了保證對(duì)象的純凈性，我們有必要引出Object.create()，該方法創(chuàng)建一個(gè)新對(duì)象，使用現(xiàn)有的對(duì)象來(lái)提供新創(chuàng)建的對(duì)象的__proto__。我們來(lái)看一下：

var person1 = Object.create({});

打印如下:

我們看到person1的__proto__指向了{}對(duì)象，所以我們?cè)谏鲜龃a中直接修改如下：

function create() {
  let constructor = [].shift.call(arguments);
  let obj = Object.create(constructor.prototype);
  let res = constructor.apply(obj, arguments);
  return res instanceof Object?res:obj;
}
person = create(Person,"xuan");

為啥使用[].shift.call()來(lái)進(jìn)行參數(shù)分割？arguments是一個(gè)數(shù)組么？

首先我們知道arguments是函數(shù)傳入的參數(shù)，那么這個(gè)參數(shù)是數(shù)組么？我們打印一下便知：

console.log(arguments);
console.log(Object.prototype.toString.call(arguments));
console.log(arguments instanceof Array);

結(jié)果如下

不是數(shù)組。我們展開(kāi)發(fā)現(xiàn)他跟數(shù)組很像，查一下資料發(fā)現(xiàn)這個(gè)對(duì)象是類(lèi)數(shù)組。里面沒(méi)有shift函數(shù)，直接調(diào)用shift會(huì)報(bào)錯(cuò)。我們使用使用Array.from(arguments)將arguments轉(zhuǎn)成數(shù)組，然后在調(diào)用shift函數(shù)也是一種思路。但是在這里我們使用apply最適合。所以下述代碼是模擬new Object()的最優(yōu)代碼:

function create() {
  let constructor = [].shift.call(arguments);
  let obj = Object.create(constructor.prototype);
  let res = constructor.apply(obj, arguments);
  return res instanceof Object?res:obj;
}
person = create(Person,"xuan");

還有更優(yōu)的實(shí)現(xiàn)方法，請(qǐng)大佬們不吝拍磚！

GPU云服務(wù)器云服務(wù)器 javascript進(jìn)階 javascript object JavaScript對(duì)象進(jìn)階 new

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102538.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

chengtao1633

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

stm32通過(guò)I2C接口實(shí)現(xiàn)溫濕度（AHT20）的采集

閱讀 3595·2021-11-23 09:51
[C語(yǔ)言—調(diào)試技巧]

閱讀 1172·2021-09-26 09:55
ftp主機(jī)地址填什么-ftp主機(jī)地址是什么？

閱讀 4140·2021-09-22 14:58
IMX6ULL裸機(jī)學(xué)習(xí)----LED正點(diǎn)原子在韋東山開(kāi)發(fā)板上實(shí)現(xiàn)

閱讀 1932·2021-09-08 09:35
webdock，新增兩款丹麥高配VPS，€15/月：15核/7.5G內(nèi)存/75G SSD，€30/月

閱讀 1180·2021-08-26 14:16
設(shè)計(jì)模式 -- 觀察者模式

閱讀 968·2019-08-23 18:17
解決微信返回上一頁(yè)之后，頁(yè)面不刷新

閱讀 2221·2019-08-23 16:45
JavaScript進(jìn)階之模擬new Object過(guò)程

閱讀 780·2019-08-23 15:55

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript進(jìn)階之模擬new Object過(guò)程

相關(guān)文章

**【進(jìn)階3-5期】深度解析 new 原理及模擬實(shí)現(xiàn)**

**【進(jìn)階3-3期】深度解析 call 和 apply 原理、使用場(chǎng)景及實(shí)現(xiàn)**

**【進(jìn)階3-4期】深度解析bind原理、使用場(chǎng)景及模擬實(shí)現(xiàn)**

**【進(jìn)階4-3期】面試題之如何實(shí)現(xiàn)一個(gè)深拷貝**

**【進(jìn)階 6-2 期】深入高階函數(shù)應(yīng)用之柯里化**

發(fā)表評(píng)論

0條評(píng)論

chengtao1633

男|高級(jí)講師

TA的文章

stm32通過(guò)I2C接口實(shí)現(xiàn)溫濕度（AHT20）的采集

[C語(yǔ)言—調(diào)試技巧]

ftp主機(jī)地址填什么-ftp主機(jī)地址是什么？

IMX6ULL裸機(jī)學(xué)習(xí)----LED正點(diǎn)原子在韋東山開(kāi)發(fā)板上實(shí)現(xiàn)

webdock，新增兩款丹麥高配VPS，€15/月：15核/7.5G內(nèi)存/75G SSD，€30/月

設(shè)計(jì)模式 -- 觀察者模式

解決微信返回上一頁(yè)之后，頁(yè)面不刷新