詳解Javascript中new()到底做了些什么?
前言
和其他高級(jí)語(yǔ)言一樣 javascript 中也有 new 運(yùn)算符,我們知道 new 運(yùn)算符是用來(lái)實(shí)例化一個(gè)類,從而在內(nèi)存中分配一個(gè)實(shí)例對(duì)象。 但在 javascript 中,萬(wàn)物皆對(duì)象,為什么還要通過 new 來(lái)產(chǎn)生對(duì)象? 本文將帶你一起來(lái)探索 javascript 中 new 的奧秘...
要?jiǎng)?chuàng)建 Person 的新實(shí)例,必須使用 new 操作符。
以這種方式調(diào)用構(gòu)造函數(shù)實(shí)際上會(huì)經(jīng)歷以下 4個(gè)步驟:
(1) 創(chuàng)建一個(gè)新對(duì)象;
(2) 將構(gòu)造函數(shù)的作用域賦給新對(duì)象(因此 this 就指向了這個(gè)新對(duì)象) ;
(3) 執(zhí)行構(gòu)造函數(shù)中的代碼(為這個(gè)新對(duì)象添加屬性) ;
(4) 返回新對(duì)象。
new 操作符
在有上面的基礎(chǔ)概念的介紹之后,在加上new操作符,我們就能完成傳統(tǒng)面向?qū)ο蟮腸lass + new的方式創(chuàng)建對(duì)象,在JavaScript中,我們將這類方式成為Pseudoclassical。
基于上面的例子,我們執(zhí)行如下代碼
var obj = new Base();
這樣代碼的結(jié)果是什么,我們?cè)贘avascript引擎中看到的對(duì)象模型是:

new操作符具體干了什么呢?其實(shí)很簡(jiǎn)單,就干了三件事情。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
第一行,我們創(chuàng)建了一個(gè)空對(duì)象obj
第二行,我們將這個(gè)空對(duì)象的__proto__成員指向了Base函數(shù)對(duì)象prototype成員對(duì)象
第三行,我們將Base函數(shù)對(duì)象的this指針替換成obj,然后再調(diào)用Base函數(shù),于是我們就給obj對(duì)象賦值了一個(gè)id成員變量,這個(gè)成員變量的值是”base”,關(guān)于call函數(shù)的用法。
如果我們給Base.prototype的對(duì)象添加一些函數(shù)會(huì)有什么效果呢?
例如代碼如下:
Base.prototype.toString = function() {
return this.id;
}
那么當(dāng)我們使用new創(chuàng)建一個(gè)新對(duì)象的時(shí)候,根據(jù)__proto__的特性,toString這個(gè)方法也可以做新對(duì)象的方法被訪問到。于是我們看到了:
構(gòu)造子中,我們來(lái)設(shè)置‘類'的成員變量(例如:例子中的id),構(gòu)造子對(duì)象prototype中我們來(lái)設(shè)置‘類'的公共方法。于是通過函數(shù)對(duì)象和Javascript特有的__proto__與prototype成員及new操作符,模擬出類和類實(shí)例化的效果。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- JavaScript定義數(shù)組的三種方法(new Array(),new Array(''x'',''y'')
- javascript中new關(guān)鍵字詳解
- Javascript new關(guān)鍵字的玄機(jī) 以及其它
- javascript new一個(gè)對(duì)象的實(shí)質(zhì)
- js中new一個(gè)對(duì)象的過程
- JavaScript中的new的使用方法與注意事項(xiàng)
- 詳解javascript new的運(yùn)行機(jī)制
- javascript new 需不需要繼續(xù)使用
- JavaScript中實(shí)現(xiàn)new的兩種方式引發(fā)的探究
相關(guān)文章
有一段有意思的代碼-javascript現(xiàn)實(shí)多行信息
有一段有意思的代碼-javascript現(xiàn)實(shí)多行信息...2007-08-08
談?wù)刯s中的prototype及prototype屬性解釋和常用方法
prototype是javascript中筆記難理解的一部分內(nèi)容,下面通過幾個(gè)關(guān)鍵知識(shí)點(diǎn)給大家講解js中的prototype,對(duì)js中的prototype相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
使用typescript類型來(lái)實(shí)現(xiàn)快排詳情
這篇文章主要介紹了使用typescript類型來(lái)實(shí)現(xiàn)快排詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁(yè)面中金額數(shù)的方法
這篇文章主要介紹了JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁(yè)面中金額數(shù)的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript基于觀察者模式實(shí)時(shí)改變頁(yè)面金額數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
JavaScript 學(xué)習(xí)筆記(七)字符串的連接
javascript 字符串的連接效率問題,需要的朋友可以參考下。2009-12-12
深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞
這篇文章主要介紹了深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞的相關(guān)資料,需要的朋友可以參考下2016-04-04

