構(gòu)造函數(shù)理解

首先來(lái)了解一段代碼

function Person(name,age){
     this.name = name;    
     this.age = age;   
     this.sayHello = function(){   
         console.log(this.name +"say hello");
    }
}

var boy = new Person("bella",23);    
boy.sayHello(); // bella say hello

什么是構(gòu)造函數(shù)炊豪?

var sum3=new Function('n1','n2','return n1+n2')
console.log(sum3(2,3));//5
構(gòu)造函數(shù)的特點(diǎn):

a:構(gòu)造函數(shù)的首字母必須大寫(xiě),用來(lái)區(qū)分于普通函數(shù)

b:內(nèi)部使用的this對(duì)象牵舱,來(lái)指向即將要生成的實(shí)例對(duì)象

c:使用New來(lái)生成實(shí)例對(duì)象

構(gòu)造函數(shù)的缺點(diǎn):

所有的實(shí)例對(duì)象都可以繼承構(gòu)造器函數(shù)中的屬性和方法缺虐。但是,同一個(gè)對(duì)象實(shí)例之間,無(wú)法共享屬性
解決思路:

a:所有實(shí)例都會(huì)通過(guò)原型鏈引用到prototype

b:prototype相當(dāng)于特定類(lèi)型所有實(shí)例都可以訪問(wèn)到的一個(gè)公共容器

c:那么我們就將重復(fù)的東西放到公共容易就好了

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayHello = function(){
        console.log(this.name + "say hello");
    }
}
var girl = new Person("bella",23);
var boy = new Person("alex",23);
console.log(girl.name);  //bella
console.log(boy.name);   //alex
console.log(girl.sayHello === boy.sayHello);  //false

image

一個(gè)構(gòu)造函數(shù)Person生成了兩個(gè)對(duì)象實(shí)例girl和boy,并且有兩個(gè)屬性和一個(gè)方法顷牌。但是sayHello方法是不一樣的塞淹。如上圖(圖畫(huà)得很丑)。也就是說(shuō)當(dāng)New一個(gè)實(shí)例對(duì)象的時(shí)候运挫,都會(huì)去創(chuàng)建一個(gè)sayHello方法套耕,這就浪費(fèi)了內(nèi)存資源谁帕,因?yàn)閟ayHello方法使一樣的行為的冯袍,完全可以被兩個(gè)實(shí)例對(duì)象共享。

所以儡循,缺點(diǎn)就是:同一個(gè)構(gòu)造函數(shù)的對(duì)象實(shí)例之間無(wú)法共享屬性和方法征冷。

為了解決構(gòu)造函數(shù)的這個(gè)缺點(diǎn),js提供了prototype屬相來(lái)解決該問(wèn)題资盅。

propotype屬性的作用

js中每個(gè)數(shù)據(jù)類(lèi)型都是對(duì)象踊赠,除了null 和 undefined,而每個(gè)對(duì)象都是繼承自一個(gè)原型對(duì)象,只有null除外今穿,它沒(méi)有自己的原型對(duì)象伦籍,最終的Object的原型為null

eg3

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.propotype.sayHello = function(){
    console.log(this.name + "say hello");
}
var girl = new Person("bella",23);
var boy = new Person("alex",23);
console.log(girl.name);  //bella
console.log(boy.name);   //alex
console.log(girl.sayHello === boy.sayHello);  //true
image

由上圖可以看出,propotype是構(gòu)造函數(shù)的屬性帖鸦,而consructor則是構(gòu)造函數(shù)的prototype屬性所指向的那個(gè)對(duì)象,也就是說(shuō)constuctor是原型對(duì)象的屬性洛二。

constructor屬性是定義在原型對(duì)象上面,意味著也可以被實(shí)例對(duì)象繼承

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.propotype.sayHello = function(){
    console.log(this.name + "say hello");
}
var girl = new Person("bella",23);
console.log(girl.construcotr); //Person()
console.log(girl.construcotr == Person.propotype.construcotr); //true

constructor屬性的作用
a:分辨原型對(duì)象到底是哪個(gè)構(gòu)造函數(shù)

 function Person(){};
 var person1 = new Person();
 console.log(person1.construcotr === Person); //true

b:從實(shí)例新建另一個(gè)實(shí)例

function Person(){};
 var person1 = new Person();
 var person2 = new person1.construcotr();
 console.log(person2 instanceof Person); //true

c:由于constructor屬性是一種原型對(duì)象和構(gòu)造函數(shù)的關(guān)系妓雾,所以在修改原型對(duì)象的時(shí)候垒迂,一定 要注意construtor的指向問(wèn)題械姻,避免instanceof失真机断,關(guān)于這一點(diǎn),會(huì)在繼承中講到唯竹。

原型(prototype)

了解了構(gòu)造器苦丁,我們來(lái)看下原型prototype

JS中萬(wàn)物都是對(duì)象,但是對(duì)象也分為:普通對(duì)象和函數(shù)對(duì)象旺拉,也就是Object 和 Function.

那么怎么區(qū)分普通對(duì)象和函數(shù)對(duì)象呢? ---凡是通過(guò)New Function()創(chuàng)建的對(duì)象都是函數(shù)對(duì)象晋涣,其他的都是普通對(duì)象.

var sum3=new Function('n1','n2','return n1+n2')
console.log(sum3(2,3));//5

需要注意的是:普通對(duì)象沒(méi)有propotype(prototype即是屬性也是對(duì)象)沉桌,但是有proto屬性谢鹊。

js創(chuàng)建對(duì)象的時(shí)候都有一個(gè)propo內(nèi)置屬性留凭,用于指向創(chuàng)建它的函數(shù)對(duì)象的原型對(duì)象prototype。

我們還是來(lái)根據(jù)eg3的代碼來(lái)分析原型鏈

console.log(girl.proto === Person.protype);//true

console.log(Persion.propotype.proto === Object.propotype);//true

console.log(Object.porpotype.proto); //null

通過(guò)proto串起來(lái)直到Object.propotype.proto為null的鏈叫做原型鏈(矩形表示函數(shù)對(duì)象兼耀,橢圓形表示普通對(duì)象)

也許看到這個(gè)圖會(huì)有幾個(gè)疑問(wèn)

a:為什么Object.proto指向Function.prototype?

Object是函數(shù)對(duì)象求冷,是通過(guò)new Function()創(chuàng)建的,所以...

b:Function.proto === Function.prototype //true

Function也是對(duì)象函數(shù)拯坟,通過(guò)new Function()創(chuàng)建韭山,所以...

轉(zhuǎn)載于快餓死的魚(yú)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末傲绣,一起剝皮案震驚了整個(gè)濱河市巩踏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌塞琼,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件毅往,死亡現(xiàn)場(chǎng)離奇詭異派近,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)渴丸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)戒幔,“玉大人土童,你說(shuō)我怎么就攤上這事∠缀梗” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵枢析,是天一觀的道長(zhǎng)刃麸。 經(jīng)常有香客問(wèn)我,道長(zhǎng)泊业,這世上最難降的妖魔是什么啊易? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮租谈,結(jié)果婚禮上捆愁,老公的妹妹穿的比我還像新娘窟却。我一直安慰自己,他們只是感情好夸赫,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布茬腿。 她就那樣靜靜地躺著,像睡著了一般切平。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上悴品,一...
    開(kāi)封第一講書(shū)人閱讀 49,166評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音菇存,去河邊找鬼邦蜜。 笑死,一個(gè)胖子當(dāng)著我的面吹牛悼沈,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播絮供,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼壤靶,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼缚俏!你這毒婦竟也來(lái)了贮乳?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤亚茬,失蹤者是張志新(化名)和其女友劉穎浓恳,沒(méi)想到半個(gè)月后碗暗,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體梢夯,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年洲守,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片梗醇。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡撒蟀,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出保屯,到底是詐尸還是另有隱情,我是刑警寧澤姑尺,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布切蟋,位于F島的核電站,受9級(jí)特大地震影響柄粹,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜驻右,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望愕把。 院中可真熱鬧,春花似錦恨豁、人聲如沸拗秘。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至棒搜,卻和暖如春活箕,著一層夾襖步出監(jiān)牢的瞬間力麸,已是汗流浹背育韩。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留埃叭,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓赤屋,卻偏偏與公主長(zhǎng)得像壁袄,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子嗜逻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

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