javascript基礎(chǔ)學(xué)習(xí)總結(jié)（一）

AdolphLWQ 發(fā)布于2019-08-26 10:57 / 474人閱讀

摘要：原型規(guī)則所有的函數(shù)，都有一個(gè)屬性顯示原型，屬性值也是一個(gè)普通對(duì)象原型規(guī)則所有的引用類型數(shù)組對(duì)象函數(shù)，屬性值指向它的構(gòu)造函數(shù)的屬性值。注釋其實(shí)是的語(yǔ)法糖，的構(gòu)造函數(shù)是，所有。要在執(zhí)行是才能確認(rèn)值，定義是無(wú)法確認(rèn)的幾種使用場(chǎng)景作為構(gòu)造函數(shù)執(zhí)行。

1.js中使用typeof能得到哪些類型？

number string boolean object function undefined 
如果變量是null，則typeof會(huì)返回 object。typeof undefined 返回 undefined。

2.window.onload和DOMContentLoaded的區(qū)別

一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當(dāng)DOM樹(shù)構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded事件，而window.onload是在頁(yè)面載入完成的時(shí)候，才執(zhí)行，這其中包括圖片等元素。大多數(shù)時(shí)候我們只是想在DOM樹(shù)構(gòu)建完成后，綁定事件到元素，我們并不需要圖片元素，加上有時(shí)候加載外域圖片的速度非常緩慢。
if(obj.a == null){
//這里相當(dāng)于 obj.a === null || obj.a === undefined ,簡(jiǎn)寫(xiě)形式
}

3.原型規(guī)則=>所有的引用類型都有構(gòu)造函數(shù)

var a={} 其實(shí)是 var a = new Object()的語(yǔ)法糖
var b=[] 其實(shí)是 var b = new Array()的語(yǔ)法糖
function Foo(){...} 其實(shí)是 var Foo = new Function(...)

4.原型規(guī)則=>所有的引用類型(數(shù)組、對(duì)象、函數(shù))，都具有對(duì)象特性，即可自由擴(kuò)展(除了“null” 之外)。

var a = [1,2,3,4];
a.name = ‘你好’;
function foo(){};
foo.age = 21;

5.原型規(guī)則=>所有的引用類型(數(shù)組、對(duì)象、函數(shù))，都有一個(gè)__proto__屬性(隱式原型)，屬性值是一個(gè)普通的對(duì)象。

6.原型規(guī)則=>所有的函數(shù)，都有一個(gè)prototype屬性(顯示原型)，屬性值也是一個(gè)普通對(duì)象

7.原型規(guī)則=>所有的引用類型(數(shù)組、對(duì)象、函數(shù))，__proto__屬性值指向它的構(gòu)造函數(shù)的“prototype”屬性值。

var obj = {};
obj.a=100;
obj.__proto__ === Object.prototype
注釋：var obj ={} 其實(shí)是 var obj = new Objec()的語(yǔ)法糖，obj的構(gòu)造函數(shù)是Object，所有    obj.__proto__ === Object.prototype。

8.原型鏈

當(dāng)試圖得到一個(gè)對(duì)象的某個(gè)屬性時(shí)，如果這個(gè)對(duì)象本身沒(méi)有這個(gè)屬性，那么就會(huì)去它的__proto__ (即它的構(gòu)造函數(shù)的prototype) 中尋找。
function Foo(name){
this.name = name;
}
Foo.prototype.sayName = function(){
console.log("my name is "+this.name);
}

var foo1 = new Foo("zhangsan");
foo1.printName = function(){
console.log("print name "+this.name);
}
foo1.printName();
foo1.sayName();
foo1.toString();
//foo1.__proto__為Foo.prototype，F(xiàn)oo.prototype.__proto__為Object.prototype

9.f instanceof Foo 的邏輯判斷是：

f 的 __proto__ 一層一層往上，能否對(duì)應(yīng)到 Foo.prototype

備注：閱讀源碼是高效提高技能的方式
不能“埋頭苦鉆”有技巧在其中，搜jquery源碼解讀分析等等
慕課網(wǎng)搜索“zepto設(shè)計(jì)和源碼分析”免費(fèi)教程。

10.this 要在執(zhí)行是才能確認(rèn)值，定義是無(wú)法確認(rèn)

this的幾種使用場(chǎng)景：
1.作為構(gòu)造函數(shù)執(zhí)行。
2.作為對(duì)象屬性執(zhí)行。
3.作為普通函數(shù)執(zhí)行。
4.call、apply、bind。

11.作用域
在es6之前，ECMAScript的作用域只有兩種：全局作用域、函數(shù)作用域。正是因?yàn)橛羞@兩種作用域，所以在javascript中出現(xiàn)--術(shù)語(yǔ)--“變量提升”。es6提供了塊級(jí)作用域，且“塊級(jí)作用域”并不影響var聲明的變量。var聲明的變量的性質(zhì)和原來(lái)一樣，還是具有‘變量提升’的特性。而‘塊級(jí)作用域’通過(guò)新增命令let和const來(lái)體現(xiàn)。

12.閉包
實(shí)例1：

注釋：函數(shù)的父級(jí)作用域是它定義時(shí)的作用域，不是執(zhí)行時(shí)的作用域。
實(shí)例2：

輸出為: example increment 1 2 3
注釋：當(dāng)一個(gè)函數(shù)返回另一個(gè)函數(shù)時(shí)，才會(huì)真正涉及閉包。返回的函數(shù)可以訪問(wèn)僅存在于其閉包中的變量

13.閉包在實(shí)際開(kāi)發(fā)中的應(yīng)用

//閉包實(shí)際應(yīng)用主要用于封裝變量，收斂權(quán)限。
function isFirstLoad(){
    var _list =[];
    return function( id ){
    if ( _list.indexOf ( id ) >=0 ){
        return false;
    } else {
        _list.push(id);
        return true;
    }
    }
}
var firstLoad = isFirstLoad();
firstLoad ( 10 ) // true
firstLoad ( 10 ) // false
firstLoad ( 20 ) // true

14.同步、異步和單線程
前端使用異步的場(chǎng)景：
定時(shí)任務(wù)：setTimeout, setInterval
網(wǎng)絡(luò)請(qǐng)求：ajax請(qǐng)求，動(dòng)態(tài)加載
事件綁定

注釋：
執(zhí)行第一行，打印100
執(zhí)行setTimeout后，傳入setTimeout的函數(shù)會(huì)被暫存起來(lái)，不會(huì)立即執(zhí)行(單線程的特點(diǎn)，不能同時(shí)干兩件事)。
執(zhí)行最后一行，打印300
待所有程序執(zhí)行完，處于空閑狀態(tài)時(shí)，會(huì)立馬看有沒(méi)有暫存起來(lái)的要執(zhí)行。
發(fā)現(xiàn)暫存起來(lái)的setTimeout中的函數(shù)無(wú)需等待時(shí)間，就立即拿過(guò)來(lái)執(zhí)行，如果
setTimeout(function(){
console.log(200);
},1000),暫存起來(lái)的setTimeout函數(shù)有需要等待的時(shí)間，則會(huì)在等待時(shí)間后執(zhí)行。

同步：
console.log(100);
alert(200);
console.log(300);
同步和異步的區(qū)別：同步會(huì)阻塞代碼的執(zhí)行，而異步不會(huì)。

18.DOM屬于哪種基本的數(shù)據(jù)結(jié)構(gòu)？
樹(shù)
19.ajax -XMLHttpRequest
get請(qǐng)求:

post請(qǐng)求：

20.跨域
可以跨域加載資源的三個(gè)標(biāo)簽：

JSONP實(shí)現(xiàn)原理：

服務(wù)器端設(shè)置 http header

21.存儲(chǔ)
cookie
本身用于客戶端和服務(wù)器端通信
但是它有本地存儲(chǔ)的功能，于是被“借用”
使用document.cookie = ...獲取和修改即可

cookie用于存儲(chǔ)的缺點(diǎn)
存儲(chǔ)量太小，只有4KB
所有http請(qǐng)求都帶著，會(huì)影響獲取資源的效率
API簡(jiǎn)單，需要封裝才能用document.cookie = ...

cookie的內(nèi)容只要包括：名字，值，過(guò)期時(shí)間，路徑和域。路徑和域一起構(gòu)成cookie的作用范圍。若不設(shè)置過(guò)期時(shí)間，則cookie的生命周期為瀏覽器會(huì)話期間，關(guān)閉瀏覽器窗口，cookie就會(huì)消失。這種生命周期為瀏覽器會(huì)話期的cookie被稱為會(huì)話cookie。
會(huì)話cookie一般不存儲(chǔ)在硬盤(pán)上而是保存在內(nèi)存里。若設(shè)置了過(guò)期時(shí)間，瀏覽器會(huì)把cookie保存在硬盤(pán)上，關(guān)閉再次打開(kāi)瀏覽器，這些cookie仍然有效直到超過(guò)設(shè)定的過(guò)期時(shí)間。存儲(chǔ)在硬盤(pán)上的cookie可以在同類型的瀏覽器間共享，比如兩個(gè)IE窗口。

locationStorage和sessionStorage
THML5專門(mén)為存儲(chǔ)而設(shè)計(jì)，最大容量5M
API簡(jiǎn)單易用：
localStorage.setItem( key, value);localStorage.getItem( key, value)
sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁(yè)，一旦窗口或標(biāo)簽頁(yè)被永久關(guān)閉了，那么所有通過(guò)sessionStorage存儲(chǔ)的數(shù)據(jù)也就被清空了。localStorage生命周期是永久。