javascript學(xué)習(xí)筆記

1. 原型對(duì)象和原型鏈

prototype的主要作用是繼承,prototype中定義的屬性和方法是留給自己的“后代”用的。子類(lèi)可以完全訪(fǎng)問(wèn)prototype中的屬性和方法

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

通過(guò)例子可以看出,自身是訪(fǎng)問(wèn)不到自己的prototype

__proto__通常是把父類(lèi)的prototype賦值給它,這樣的話(huà),就可以通過(guò)這種父類(lèi)的prototype賦值給新對(duì)象的__proto__屬性的形式,一代代傳承

function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc

obj對(duì)象擁有這樣一個(gè)原型鏈以后利诺,當(dāng)obj.foo執(zhí)行時(shí),obj會(huì)先查找自身是否有該屬性剩燥,但不會(huì)查找自己的prototype,當(dāng)找不到foo時(shí)慢逾,obj就沿著原型鏈依次去查找...

function Animal(name){
    this.name = name;
}
Animal.color = "black";
Animal.prototype.say = function(){
    console.log("I'm " + this.name);
};
var cat = new Animal("cat");

console.log(
   cat.name,  //cat
   cat.color //undefined
);
cat.say(); //I'm cat

console.log(
   Animal.name, //Animal
   Animal.color //back
);
Animal.say(); //Animal.say is not a function

cat.color -> cat會(huì)先查找自身的color,沒(méi)有找到便會(huì)沿著原型鏈查找灭红,在上述例子中侣滩,我們僅在Animal對(duì)象上定義了color,并沒(méi)有在其原型鏈上定義,因此找不到变擒。
cat.say -> cat會(huì)先查找自身的say方法君珠,沒(méi)有找到便會(huì)沿著原型鏈查找,在上述例子中娇斑,我們?cè)贏nimal的prototype上定義了say,因此在原型鏈上找到了say方法策添。

1. 原型鏈的形成真正是靠__proto__ 而非prototype,當(dāng)JS引擎執(zhí)行對(duì)象的方法時(shí)材部,先查找對(duì)象本身是否存在該方法,如果不存在唯竹,會(huì)在原型鏈上查找乐导,但不會(huì)查找自身的prototype

2. 一個(gè)對(duì)象的__proto__記錄著自己的原型鏈浸颓,決定了自身的數(shù)據(jù)類(lèi)型物臂,改變__proto__就等于改變對(duì)象的數(shù)據(jù)類(lèi)型。

3. 函數(shù)的prototype不屬于自身的原型鏈产上,它是子類(lèi)創(chuàng)建的核心棵磷,決定了子類(lèi)的數(shù)據(jù)類(lèi)型,是連接子類(lèi)原型鏈的橋梁晋涣。

4. 在原型對(duì)象上定義方法和屬性的目的是為了被子類(lèi)繼承和使用仪媒。

2. 作用域

JS中有種特殊情況
如果一個(gè)變量沒(méi)有使用var聲明,window便擁有了該屬性姻僧,因此這個(gè)變量的作用域不屬于某一個(gè)函數(shù)體规丽,而是window對(duì)象

functtion varscope(){
    foo = "I‘m in function";
    console.log(foo);//I‘m in function
}
varscope();
console.log(window.foo);//I‘m in function

作用域鏈就是一個(gè)函數(shù)體中嵌套了多層函數(shù)體蒲牧,并在不同的函數(shù)體中定義同一變量撇贺,當(dāng)其中一個(gè)函數(shù)訪(fǎng)問(wèn)這個(gè)變量時(shí),便會(huì)形成一條作用域鏈

foo = "window";
function first(){
    var foo = "first";
    function second(){
        var foo = "second",
        console.log(foo);
    }
    function third(){
        console.log(foo);
    }
    second();   //second
    third();    //first
}
first();

當(dāng)執(zhí)行second時(shí)冰抢,JS引擎會(huì)將second的作用域放置鏈表頭部松嘶,其次是first的作用域,最后是window對(duì)象
second形成的作用域鏈:second->first->window
third形成的作用域鏈:third->first->window

var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function(){
        return function(){
            return this.foo;
        };
    }
};
var f = obj.getFoo();
f(); //window

在實(shí)例化obj.getFoo方法的時(shí)候挎扰,在getFoo方法作用域里,this代表getFoo函數(shù)
但是在輸出的時(shí)候翠订,又定義了一個(gè)匿名函數(shù),所以this就代表了這個(gè)匿名函數(shù)
相當(dāng)于賦值給f的是這個(gè)匿名的函數(shù)遵倦,所以找到的是window,即

var foo = "window";
var f = function(){
    return this.foo;
}

3. 閉包

當(dāng)一個(gè)內(nèi)部函數(shù)被其外部函數(shù)之外的變量引用時(shí)尽超,就形成了閉包

function A(){
    var count = 0;
    function B(){
       count ++;
       console.log(count);
    }
    return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

因?yàn)楸灰盟裕珹對(duì)象不會(huì)被GC回收(GC回收的機(jī)制是:如果一個(gè)對(duì)象不再被引用梧躺,那么這個(gè)對(duì)象就會(huì)被GC回收似谁,否則這個(gè)對(duì)象一直會(huì)保存在內(nèi)存中)

var f = function(document){
    var viewport;
    var obj = {
        init:function(id){
            viewport = document.querySelector("#"+id);
        },
        addChild:function(){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
}
f(document);

obj 是在 f 中定義的一個(gè)對(duì)象,這個(gè)對(duì)象中定義了一系列方法掠哥, 執(zhí)行window.jView = obj 就是在 window 全局對(duì)象定義了一個(gè)變量 jView巩踏,并將這個(gè)變量指向 obj 對(duì)象,即全局變量 jView 引用了 obj . 而 obj 對(duì)象中的函數(shù)又引用了 f 中的變量 viewport ,因此 f 中的 viewport 不會(huì)被GC回收续搀,會(huì)一直保存到內(nèi)存中塞琼,所以這種寫(xiě)法滿(mǎn)足閉包的條件。

參考的博客文一像素博客

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末禁舷,一起剝皮案震驚了整個(gè)濱河市彪杉,隨后出現(xiàn)的幾起案子毅往,更是在濱河造成了極大的恐慌,老刑警劉巖派近,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件煞抬,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡构哺,警方通過(guò)查閱死者的電腦和手機(jī)革答,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)曙强,“玉大人残拐,你說(shuō)我怎么就攤上這事〉欤” “怎么了溪食?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)娜扇。 經(jīng)常有香客問(wèn)我错沃,道長(zhǎng),這世上最難降的妖魔是什么雀瓢? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任枢析,我火速辦了婚禮,結(jié)果婚禮上刃麸,老公的妹妹穿的比我還像新娘醒叁。我一直安慰自己,他們只是感情好泊业,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布把沼。 她就那樣靜靜地躺著,像睡著了一般吁伺。 火紅的嫁衣襯著肌膚如雪饮睬。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,708評(píng)論 1 305
  • 那天篮奄,我揣著相機(jī)與錄音捆愁,去河邊找鬼。 笑死宦搬,一個(gè)胖子當(dāng)著我的面吹牛牙瓢,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播间校,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼矾克,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了憔足?” 一聲冷哼從身側(cè)響起胁附,我...
    開(kāi)封第一講書(shū)人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤酒繁,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后控妻,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體州袒,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年弓候,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了郎哭。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡菇存,死狀恐怖夸研,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情依鸥,我是刑警寧澤亥至,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站贱迟,受9級(jí)特大地震影響姐扮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜衣吠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一茶敏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蒸播,春花似錦睡榆、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)塘揣。三九已至包雀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亲铡,已是汗流浹背才写。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留奖蔓,地道東北人赞草。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像吆鹤,于是被迫代替她去往敵國(guó)和親厨疙。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355

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