淺談 JavaScript new 執(zhí)行過程及function原理

  • 通過new運(yùn)算符執(zhí)行結(jié)果與直接執(zhí)行函數(shù)結(jié)果不一樣损合。new返回了一個(gè)對象
  • new運(yùn)算符會(huì)根據(jù)方法返回值的不同省艳,執(zhí)行方式是不一樣的
  • 然后,new 會(huì)改變this的指向嫁审。若直接作為函數(shù)執(zhí)行this指向window跋炕,使用new運(yùn)算符后的this指向當(dāng)前對象

w3c關(guān)于Function的說明
用Function類直接創(chuàng)建函數(shù)的語法如下:
var function_name = new function(arg1, arg2, ... , argN, function_body)
在上面的形式中,每個(gè)arg都是一個(gè)參數(shù)律适,最后一個(gè)參數(shù)是函數(shù)本體(要執(zhí)行的代碼)辐烂。這些參數(shù)必須是字符串。

function Person() {}具體的執(zhí)行就是調(diào)用Function()構(gòu)造函數(shù)進(jìn)行構(gòu)造的捂贿,最后一個(gè)參數(shù)是函數(shù)體纠修。

當(dāng)執(zhí)行var person = new Function("name", "console.log(name)")
即創(chuàng)建了一個(gè)function實(shí)例對象,自帶了Object+Funciton的屬性方法厂僧。

在JS中扣草,有兩個(gè)基礎(chǔ)原型,分別是Function.prototype和Object.prototype。這兩個(gè)原型組成了JS中的所有實(shí)例他們的關(guān)系是 Function.prototype ----> Object.prototype ----> null

常用的創(chuàng)建類的有兩種方法辰妙,我們從這兩種方法講兩種prototype的關(guān)系鹰祸。

第一種是先有一個(gè)原型,直接令新的對象的__proto__指向已經(jīng)有的原型密浑。這種時(shí)候可以類比繼承關(guān)系蛙婴,但區(qū)別是把那個(gè)原型的狀態(tài)(如屬性的取值等)也一并繼承過來了。
但是記住這個(gè)時(shí)候新的對象從原型繼承的值如果沒有被初始化/賦值尔破,原型中的值改變的話街图,新的對象中的對應(yīng)值也會(huì)改變。

第二種是使用new來繼承呆瞻,new在JS里這樣運(yùn)行:

  1. 創(chuàng)建一個(gè)最基礎(chǔ)的Object對象(內(nèi)容為空 )并且初始化台夺。
  2. 把后面的構(gòu)造函數(shù)放進(jìn)剛創(chuàng)建的obj中,并且設(shè)置__proto__為函數(shù)的對象痴脾。
  3. 使用創(chuàng)建出的對象作為obj颤介,在obj中執(zhí)行那個(gè)函數(shù),赞赖,當(dāng)然那個(gè)函數(shù)要對剛創(chuàng)建的這個(gè)對象進(jìn)行初始化滚朵,然后返回。
  4. 如果返回的是Object對象前域,new就返回這個(gè)對象辕近,否則返回剛創(chuàng)建的obj。

這里解釋一下函數(shù)的原型類型:
比如說有 function A(){ var a = 1 }
那么A是一個(gè)Object匿垄,他的constructor就是A(),平時(shí)調(diào)用A()就相當(dāng)于調(diào)用A這個(gè)Object的構(gòu)造函數(shù)移宅。


引申探討prototype和__proto__

prototype屬性是一個(gè)指針,指向一個(gè)對象椿疗,而這個(gè)對象的用途是包含可以有特定類型的所有實(shí)例共享的屬性和方法漏峰。prototype是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對象實(shí)例的原型對象。hasOwnProperty()判斷指定屬性是否為自有屬性届榄;in操作符對原型屬性和自有屬性都返回true浅乔。

var obj = {a: 1};
obj.hasOwnProperty("a"); // true
obj.hasOwnProperty("toString"); // false
"a" in obj; // true
"toString" in obj; // true

__proto__是指向本對象的原型對象的指針÷撂酰可稱為隱式原型靖苇,一個(gè)對象的隱式原型指向構(gòu)造該對象的構(gòu)造函數(shù)的原型,這也保證了實(shí)例能夠訪問在構(gòu)造函數(shù)原型中定義的屬性和方法班缰。

function Foo(){}
var Boo = {name: "Boo"};
Foo.prototype = Boo;
var f = new Foo();

console.log(f.__proto__ === Foo.prototype); // true
console.log(f.__proto__ === Boo);   // true
Object.getPrototypeOf(f) === f.__proto__;   // true

示例(結(jié)合關(guān)系圖食用)

function Person(name) {
    this.name = name;
}
Person.prototype = {
    constructor: Person,
    sayName: function(){
        console.log("my name is " + this.name);
    }
}
var p1 = new Person("ligang");
var p2 = new Person("Camile");
p1.sayName();   // my name is ligang
p2.sayName();   // my name is Camile

關(guān)系圖

prototype和__proto__參考

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末贤壁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子埠忘,更是在濱河造成了極大的恐慌芯砸,老刑警劉巖萧芙,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異假丧,居然都是意外死亡双揪,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進(jìn)店門包帚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來渔期,“玉大人,你說我怎么就攤上這事渴邦》杼耍” “怎么了?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵谋梭,是天一觀的道長信峻。 經(jīng)常有香客問我,道長瓮床,這世上最難降的妖魔是什么盹舞? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮隘庄,結(jié)果婚禮上踢步,老公的妹妹穿的比我還像新娘。我一直安慰自己丑掺,他們只是感情好获印,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著街州,像睡著了一般兼丰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上唆缴,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天地粪,我揣著相機(jī)與錄音,去河邊找鬼琐谤。 笑死,一個(gè)胖子當(dāng)著我的面吹牛玩敏,可吹牛的內(nèi)容都是我干的斗忌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼旺聚,長吁一口氣:“原來是場噩夢啊……” “哼织阳!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起砰粹,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤唧躲,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體弄痹,經(jīng)...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡饭入,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了肛真。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片谐丢。...
    茶點(diǎn)故事閱讀 39,932評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖蚓让,靈堂內(nèi)的尸體忽然破棺而出乾忱,到底是詐尸還是另有隱情,我是刑警寧澤历极,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布窄瘟,位于F島的核電站,受9級特大地震影響趟卸,放射性物質(zhì)發(fā)生泄漏蹄葱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一衰腌、第九天 我趴在偏房一處隱蔽的房頂上張望新蟆。 院中可真熱鬧,春花似錦右蕊、人聲如沸琼稻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帕翻。三九已至,卻和暖如春萝风,著一層夾襖步出監(jiān)牢的瞬間嘀掸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工规惰, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留睬塌,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓歇万,卻偏偏與公主長得像揩晴,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子贪磺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,126評論 0 21
  • ??面向?qū)ο螅∣bject-Oriented寒锚,OO)的語言有一個(gè)標(biāo)志劫映,那就是它們都有類的概念违孝,而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,109評論 0 6
  • 你是我身體的一個(gè)“伙伴” 口中的一個(gè)部件 今天卻要私奔雌桑,私奔到無人知曉的彼岸 曾記得,以前 布谷吐著淺綠的一天 我...
    山上人家123閱讀 197評論 15 10
  • 我們的友情摹蘑, 曾是我一個(gè)人的愛情 有些人筹燕, 只比較適合暗戀 比如我....
    Amandababy閱讀 173評論 0 0
  • 青春永駐一直是人們尤其是女人們永恒的追求,現(xiàn)代醫(yī)學(xué)研究發(fā)現(xiàn)DHEA(青春素)不僅可以讓你延長壽命衅鹿、身材窈窕之外撒踪,運(yùn)...
    小岳老師閱讀 494評論 0 0