快捷導(dǎo)航

javascript如何實(shí)現(xiàn)create方法

更新時(shí)間：2019年11月04日 16:54:52 作者：wjefi

這篇文章主要介紹了javascript如何實(shí)現(xiàn)create方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1. 背景

項(xiàng)目使用 easyui + jquery作為前端框架，之前基本上是些后端代碼設(shè)計(jì)，前端涉略?xún)H限于應(yīng)用。

項(xiàng)目js是之前部門(mén)領(lǐng)導(dǎo)寫(xiě)的一個(gè)框架，使用面向過(guò)程方法進(jìn)行編碼，前端代碼耦合較深，修改起來(lái)捉襟見(jiàn)肘。

希望以統(tǒng)一方式對(duì)jquery代碼進(jìn)行設(shè)計(jì)管理，有必要對(duì)jquery源碼有一定程度了解。

理解代碼最好的方式，本人感覺(jué)應(yīng)該是造簡(jiǎn)化版輪子。大致理解原型鏈之后，本文參考引用博文時(shí)限一個(gè)create函數(shù)。

2. 實(shí)現(xiàn)

構(gòu)造函數(shù)的constructor屬性在聲明以后自動(dòng)賦值為自身，同時(shí)People的__proto__屬性賦值為Function.prototype。

使用new方式和Function.call方式創(chuàng)建的對(duì)象在原型上存在區(qū)分。

new方式對(duì)象__proto__屬性指向其構(gòu)造函數(shù)prototype對(duì)象，F(xiàn)unction.call方式對(duì)象__proto__屬性指向Object的prototype對(duì)象。

因此Function.call()方式創(chuàng)建對(duì)象只要修改__proto__屬性指向，私認(rèn)為等價(jià)于new方式創(chuàng)建對(duì)象，代碼如下。

function create(){
  // 1. 創(chuàng)建一個(gè)空對(duì)象
  let obj = {};
  
  // 2. 獲取構(gòu)造函數(shù)
  let constructor = [].shift.call(arguments);

  // 3. 鏈接到原型
  obj.__proto__ = constructor.prototype;

  // 4. 綁定this值
  let result = constructor.apply(obj, arguments);

  // 5. 返回新對(duì)象
  return typeof result==='object' ? result : obj;
}

調(diào)用方式為

var people = create(People,'Bob',22);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript iframe編程相關(guān)代碼
javascript iframe編程相關(guān)代碼，對(duì)于熟練操作iframe的朋友有很大的幫助。
2009-12-12
分享一些不常見(jiàn)卻很實(shí)用的JS技巧
有些代碼,需要的時(shí)候能寫(xiě)的出來(lái),但是也需要時(shí)間,如果有的東西長(zhǎng)時(shí)間不接觸,再次看的時(shí)候也會(huì)感覺(jué)很陌生,這篇文章主要給大家介紹了一些不常見(jiàn)卻很實(shí)用的JS技巧,既可以作為一個(gè)知識(shí)的積累,又可以作為閑暇時(shí)打發(fā)時(shí)間寫(xiě)寫(xiě)代碼的記錄,需要的朋友可以參考下
2021-11-11
原生js+cookie實(shí)現(xiàn)購(gòu)物車(chē)功能的方法分析
這篇文章主要介紹了原生js+cookie實(shí)現(xiàn)購(gòu)物車(chē)功能的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合cookie存儲(chǔ)實(shí)現(xiàn)購(gòu)物車(chē)功能的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
JS實(shí)現(xiàn)在線ps功能詳解
這篇文章主要介紹了JS實(shí)現(xiàn)在線ps功能詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
javascript 通用簡(jiǎn)單的table選項(xiàng)卡實(shí)現(xiàn)
鑒于UI妹妹每次交付過(guò)來(lái)的選項(xiàng)卡都夾帶了多多少少的js，而且每遇到選項(xiàng)卡就加一點(diǎn)js，造成垃圾低劣代碼逐漸堆積過(guò)多了，一直想做一個(gè)通用簡(jiǎn)潔的選項(xiàng)卡庫(kù)。
2010-05-05
24行JavaScript代碼實(shí)現(xiàn)Redux的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于如何利用24行JavaScript代碼實(shí)現(xiàn)Redux的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
llqrcode js識(shí)別二維碼解析二維碼信息實(shí)例
這篇文章主要為大家介紹了llqrcode js識(shí)別二維碼解析二維碼信息實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
JS 字符串連接[性能比較]
js字符串連接實(shí)現(xiàn)代碼。
2009-05-05
詳解ES6實(shí)現(xiàn)類(lèi)的私有變量的幾種寫(xiě)法
這篇文章主要介紹了詳解ES6實(shí)現(xiàn)類(lèi)的私有變量的幾種寫(xiě)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇JS中動(dòng)態(tài)創(chuàng)建元素的三種方法總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10