你不知道的JavaScript“坑”

最近在看《你不知道的JavaScript》系列叢書一汽,發(fā)現(xiàn)了平時(shí)容易誤解昧识、混淆或者違背常理的一些特性乌逐,在此進(jìn)行總結(jié)一下取董。

[[Prototype]]屏蔽屬性

var a = {a:2}
var b = Object.create(a)
a.a
>2
b.a
>2
b.a++
>2
b.a
>3
a.a
>2

原因:++操作相當(dāng)于b.a = b.a + 1量淌。因此++操作首先通過[[Prototype]]查找a屬性并從a.a獲取當(dāng)前屬性值2匈织,然后給這個(gè)值加1剑按,接著用[[put]]將值3賦給b中新建的屏蔽屬性a淌铐。

JavaScript中的“類”

在ES6之前杰刽,我們都是用一些方法近似實(shí)現(xiàn)類的功能菠发。然而實(shí)際上JavaScript的類與其他語言并不一樣。

繼承

在其他語言(如Java)中贺嫂,定義一個(gè)子類滓鸠,相對(duì)于父類它就是一個(gè)獨(dú)立并且完全不同的類。子類會(huì)包含父類行為的原始副本第喳,也可以重寫所有繼承的行為甚至定義新行為糜俗。類的繼承本質(zhì)上是復(fù)制。
在JavaScript中曲饱,類繼承和實(shí)例化悠抹,并不會(huì)自動(dòng)執(zhí)行復(fù)制行為。在JavaScript中只有對(duì)象扩淀,并不存在可以實(shí)例化的類楔敌。一個(gè)對(duì)象并不會(huì)復(fù)制到其他對(duì)象,它們會(huì)被關(guān)聯(lián)起來驻谆。

實(shí)例

function Foo(){this.a = 1}
f = new Foo()
Object.getPrototypeOf(f) === Foo.prototype
>true

JavaScript中不能創(chuàng)建一個(gè)類的多個(gè)實(shí)例卵凑,只能創(chuàng)建多個(gè)對(duì)象庆聘。new Foo()會(huì)生成一個(gè)新對(duì)象,新對(duì)象的內(nèi)部鏈接[[Prototype]]關(guān)聯(lián)的是Foo.prototype對(duì)象勺卢。
最后我們得到了兩個(gè)對(duì)象掏觉,它們之間互相關(guān)聯(lián)。實(shí)際上值漫,我們并沒有從"類”中復(fù)制任何行為到一個(gè)對(duì)象中澳腹,只是讓兩個(gè)對(duì)象關(guān)聯(lián)。這是和其他編程語言不同的地方杨何。

“類”和“委托”


function Foo(who){
    this.me = who;
}

Foo.prototype.identify = function () {
    return "I am  "+this.me;
};

function Bar(who){
    Foo.call(this,who);
}

//創(chuàng)建一個(gè)新的Bar.prototype對(duì)象并關(guān)聯(lián)到Foo.prototype
Bar.prototype = Object.create(Foo.prototype);

Bar.prototype.speak = function () {
    console.log("Hello,"+this.identify());
};

var b1 = new Bar("b1");
var b2 = new Bar("b2");
b1.speak();
b2.speak();
>Hello,I am  b1
>Hello,I am  b2

以上例子是“類”模式酱塔。

Foo = {
    init:function (who) {
        this.me = who;
    },
    identify:function () {
        return "I am " + this.me;
    }
};
Bar = Object.create(Foo);
Bar.speak = function () {
    console.log("Hello,"+this.identify());
};

var b1 = Object.create(Bar);
var b2 = Object.create(Bar);
b1.init("b1");
b2.init("b2");
b1.speak();
b2.speak();
>Hello,I am b1
>Hello,I am b2

以上是“委托”模式。

以上均用到了Object.create(...)函數(shù)危虱。它會(huì)創(chuàng)建一個(gè)新對(duì)象羊娃,并把它關(guān)聯(lián)到指定對(duì)象。這樣我們才能充分發(fā)揮[[prototype]]機(jī)制的威力(委托)(查找屬性當(dāng)對(duì)象本身不存在該屬性時(shí)查找原型鏈)埃跷。

"類“模式的代碼中常常會(huì)出現(xiàn)大量” Foo.call(this,who);"這樣丑陋的代碼(從”子類”中引用”父類“方法)蕊玷。相比而言,“委托”模式更為簡(jiǎn)潔明了弥雹。

值得多提一句的是垃帅,在很多書籍中,使用“類”模式時(shí)剪勿,常常使用了兩種錯(cuò)誤的方式來創(chuàng)建原型關(guān)聯(lián)贸诚。

//直接引用的方式,當(dāng)修改Bar.prototype時(shí)會(huì)直接影響Foo.prototype
Bar.prototype = Foo.prototype;
//如果函數(shù)Foo有一些副作用厕吉,比如寫日志酱固、給this添加屬性等等,會(huì)影響B(tài)ar的shi'li
Bar.prototype = new Foo();

閉包的“正確定義”

閉包:當(dāng)函數(shù)可以記住并訪問所在的詞法作用域头朱,即使函數(shù)在當(dāng)前詞法作用域之外執(zhí)行运悲,這時(shí)就產(chǎn)生了閉包

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市项钮,隨后出現(xiàn)的幾起案子班眯,更是在濱河造成了極大的恐慌,老刑警劉巖寄纵,帶你破解...
    沈念sama閱讀 216,470評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鳖敷,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡程拭,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門棍潘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來恃鞋,“玉大人崖媚,你說我怎么就攤上這事⌒衾耍” “怎么了畅哑?”我有些...
    開封第一講書人閱讀 162,577評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)水由。 經(jīng)常有香客問我荠呐,道長(zhǎng),這世上最難降的妖魔是什么砂客? 我笑而不...
    開封第一講書人閱讀 58,176評(píng)論 1 292
  • 正文 為了忘掉前任泥张,我火速辦了婚禮,結(jié)果婚禮上鞠值,老公的妹妹穿的比我還像新娘媚创。我一直安慰自己,他們只是感情好彤恶,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評(píng)論 6 388
  • 文/花漫 我一把揭開白布钞钙。 她就那樣靜靜地躺著,像睡著了一般声离。 火紅的嫁衣襯著肌膚如雪芒炼。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評(píng)論 1 299
  • 那天术徊,我揣著相機(jī)與錄音焕议,去河邊找鬼。 笑死弧关,一個(gè)胖子當(dāng)著我的面吹牛盅安,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播世囊,決...
    沈念sama閱讀 40,041評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼别瞭,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了株憾?” 一聲冷哼從身側(cè)響起蝙寨,我...
    開封第一講書人閱讀 38,903評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嗤瞎,沒想到半個(gè)月后墙歪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡贝奇,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評(píng)論 2 332
  • 正文 我和宋清朗相戀三年虹菲,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掉瞳。...
    茶點(diǎn)故事閱讀 39,703評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡毕源,死狀恐怖浪漠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情霎褐,我是刑警寧澤址愿,帶...
    沈念sama閱讀 35,417評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站冻璃,受9級(jí)特大地震影響响谓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜省艳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評(píng)論 3 325
  • 文/蒙蒙 一娘纷、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拍埠,春花似錦失驶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至棉圈,卻和暖如春涩堤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背分瘾。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評(píng)論 1 269
  • 我被黑心中介騙來泰國打工胎围, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人德召。 一個(gè)月前我還...
    沈念sama閱讀 47,711評(píng)論 2 368
  • 正文 我出身青樓白魂,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親上岗。 傳聞我的和親對(duì)象是個(gè)殘疾皇子福荸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評(píng)論 2 353

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