這是個人第一次JavaScript初級技巧

Github來源：這是個人第一次JavaScript初級技巧 | 求星星 ✨ | 給個❤️關注，❤️點贊，❤️鼓勵一下做者

你們好，我是魔王哪吒，很高興認識你~~

哪吒人生信條：若是你所學的東西 處於喜歡 纔會有強大的動力支撐。

天天學習編程，讓你離夢想更新一步，感謝不負每一份熱愛編程的程序員，不論知識點多麼奇葩，和我一塊兒，讓那一顆四處流蕩的心定下來，一直走下去，加油，2021加油！歡迎關注加我vx:xiaoda0423，歡迎點贊、收藏和評論

不要懼怕作夢，可是呢，也不要光作夢，要作一個實幹家，而不是空談家，求真力行。

前言

若是這篇文章有幫助到你，給個❤️關注，❤️點贊，❤️鼓勵一下做者，接收好挑戰了嗎？文章公衆號首發，關注 程序員哆啦A夢 第一時間獲取最新的文章

❤️筆芯❤️~

JavaScript工做原理

1. HTML超文本標記語言 來指定網頁的內容和結構
2. CSS層疊樣式表 來指定網頁的外觀，CSS用於指定樣式，獨立於網頁結構的方式實現的
3. JavaScript可以在網頁中添加行爲

JavaScript的變量和值

1. 聲明變量時，老是以關鍵字var打頭。
2. 任何狀況下，都應該這樣作，儘管省略關鍵字var，JavaScript也不會報錯。
3. 建立變量時，能夠不給它指定初始值，之後再給它賦值。（變量說：沒有值，那我不是沒什麼用了，傷害不大，侮辱性極強）

變量說，我也是有（名字）的。--- 可不能隨隨便便給我命名呢？

• 第一，要以字母，下劃線，或者美圓符號開頭。
• 第二，而後可使用任意數量的字母，數字，下劃線，或者美圓符號。

對了，還有不要使用任何內置的關鍵字 哦！（達達問：那我怎麼知道有哪些關鍵字呢？變量：哈哈！是的，不少關鍵字，我也記不住，可是經常使用的，多瞭解的，慢慢就知道了，也不用去記住。讓我變量告訴你哦，因此就別把這些給我命名了哦）

例如如下關鍵字：

break,delete,for,let,super,void,case,do,function,new,switch,
while,catch,package,this,with,class,enum,implements,
else,if,package,private,throw,yield,const,export,import,
protected,true,continue,extends,in,public,try,debugger,
false,instanceof,return,typeof,default,finally,
interface,static,var

達達問：那什麼是關鍵字呢？

哪吒：關鍵字就是JavaScript用於特殊目的的，關鍵字是JavaScript保留字。

達達問：若是變量名中包含關鍵字

哪吒：能夠的，只要變量名不和關鍵字徹底相同就行。

注意寫法規範：第一，每條語句後都要以分號結尾；第二，寫代碼要進行註解，用於你本身或其餘開發人員的解釋代碼其做用；第三，JavaScript中是區分大小寫的哦。

布爾運算符

布爾運算符用於結果爲 true或 false的布爾表達式中。

有兩種布爾運算符：1.比較運算符 和 2.邏輯運算符。

1. 比較運算符，比較運算符對兩個值進行比較。

下面是一些常見的比較運算符：

< 表示小於
> 表示大於
== 表示等於
=== 表示正好等於
<= 表示小於或等於
>= 表示大於或等於
!= 表示不等於

1. 邏輯運算符：

邏輯運算符將兩個布爾表達式合而爲一，獲得一個布爾結果。

|| 表示OR(或)，只要至少有一個表達式爲true，結果就爲true
&& 表示ADN(與)，僅當兩個表達式都爲true時，結果才爲true
! 表示NOT(非)，僅當表達式爲false時，結果才爲true

Math.random

1. Math.random生成0~1（不包含1）的數字，使用Math.random可生成的最大數字爲0.9999...。
2. Math.floor老是向下取整，如1.2取整爲1。

全局變量和局部變量

1. 若是變量在函數外聲明的，它就是全局變量；
2. 若是變量是在函數中聲明的，它就是局部變量。

瞭解局部變量和全局變量的做用域

變量的定義位置決定了其做用域，即變量在代碼的哪些地方可見，哪些地方不可見。

生命週期：

1. 全局變量是在JavaScript代碼中加載到網頁以後降生的，在網頁消失後死去。從新加載網頁時，將銷燬並從新建立全部的全局變量。
2. 局部變量通常是在函數結束時消失的，局部變量是在函數被調用後建立的，並一直活到函數返回，不管函數是否有返回值。

注意，別忘記了聲明局部變量哦！由於使用未聲明的變量時，它將會自動被視爲全局變量，即便你在函數中首次使用它也是如此。

若是局部變量和全局變量同名，那麼引用的都是局部變量，而不是全局變量，全局變量和局部變量不會相互影響，若是修改其中一個，對另外一個不會有任何影響，它們是彼此獨立的變量。

示例：

var dada = 12;
function getName(name) {
 var dada = 123;
 // 有一個名爲dada的全局變量，還有一個名爲dada的局部變量。
}

達達：因此能夠將形參和全局變量同名嗎？

哪吒：不能夠的，和在函數中聲明瞭與全局變量同名的局部變量同樣，若是形參與全局變量同名，該形參會遮擋相應的全局變量。

規範：寫代碼是要將局部變量寫在函數開頭聲明，在函數開頭聲明局部變量是一種良好的編程實踐，這可讓別人閱讀你的代碼時可以容易找到這些聲明，清楚看到函數使用了哪些變量。

函數的讀取

JavaScript可將函數在使用前仍是使用後聲明。

例如：

var dada = 12;
var jeskson = dadaFun(dada);
console.log(jeskson);

function dadaFun(name) {
 run name;
}

實際上瀏覽器讀取分：

1. 讀取全部的函數定義；
2. 開始執行代碼。

JavaScript是如何與網頁交互

DOM是瀏覽器在加載網頁時建立的。

1. 在瀏覽器中加載網頁時，瀏覽器不只對HTML進行分析並將其渲染到顯示器，還建立一系列表示標記的對象。這些對象存儲在DOM中；
2. JavaScript代碼可經過與DOM交互來訪問元素及其內容，還可使用DOM來建立或刪除元素;
3. JavaScript代碼修改DOM時，瀏覽器將動態地更新網頁，讓用戶可以在網頁中看到新內容。

getElementById

注意事項：

根據id從DOM獲取元素時，若是指定的id不存在，getElementById將返回null，調用getElementById時，檢查返回的是不是null是不錯的主意，能夠確保只在返回了一個元素時才訪問其屬性。

JavaScript是區分大小寫的

JavaScript是區分大小寫的語言，關鍵字，變量，函數名和全部標識符都必須採起一致的大小寫形式。

使用註釋

寫代碼時要多使用註解，示例：

// 這是單行註解
/* 這是一段註解 */
/*
* 這是一段註解
* 能夠多行
*/

undefined

使用未初始化的變量，訪問不存在的屬性，使用不存在的數組元素時，你都會遇到undefined。

undefined對於任何尚未值的東西，都會將undefined賦予給它。

示例：

var da;
if (da == undefined) {
 // da未定義
}
// 用於檢查變量是否未定義，需和undefined進行比較

可檢查屬性是不是未定義的，例如：

var daObj = {
 name: 'dadaqianduan.cn'
};

if(daObj.age == undefined) {
 // 獲取對象的age
}

使用 undefined，若是你的代碼中須要判斷（如屬性或變量可能沒有值），就須要檢查它是不是 undefined。

null與NaN

null用於表示對象不存在。

有些數字在JavaScript中沒法表示，提供了一個替代值：NaN。在JavaScript中使用NaN，來表示它沒法表示的數值結果。NaN不只用來表示全部沒法表示的數值，仍是JavaScript中惟一一個與本身不相等的值。

表示：NaN != NaN

由於NaN與任何東西，包含它本身都不相等，因此不能以下使用：

// 錯誤
if(myNum == NaN) {
 // 錯誤用法
}

可使用函數isNaN表示：

if(isNaN(myNum)) {
 // 使用函數isNaN，當它傳入的值不是數字時返回true
}

NaN表示：沒法表示的數字（理解爲NaN是一個數字，但只是沒有辦法表示），因此並不是全部沒法表示的數字都相同，則NaN與它本身不相等。

示例：0/0的結果爲NaN，而10/0的結果爲Infinity，在JavaScript中，Infinity指的是任何超過浮點數上限某值，Infinity的類型爲數字。將Infinity與它本身相減時，結果爲NaN，null的類型結果爲object。

null表示不存在的對象

賦值和相等

示例：

var da = 1;
// = 是賦值運算符，用於給變量賦值

da == 2;
// == 是比較運算符，用於對兩個值進行比較，看看它們是否相等

判斷兩個對象是否相等

檢查兩個對象變量是否相等時，比較的是指向對象的引用，對象變量存儲的是指向對象的引用。

只有兩個引用指向的是同一個對象時，它們才相等。

記錄爲假的值

表示值爲假值：5個假值

undefined, null, 0, 空字符串, NaN

標識符

什麼是標識符呢，它就是一個名字，在JavaScript中，標識符用來對變量和函數進行命名，或者用作JavaScript代碼中某些循環語句中的跳轉位置的標記。

JavaScript標識符必須以 字母，下劃線，或美圓符號開始，後面的字符能夠是 字母，數字，下劃線，或者美圓符號。

字符串

在 JavaScript中，支持字符串既可做爲基本類型，又可做爲對象。

字符串屬性：length

屬性length指出了字符串包含多少個字符，爲迭代字符串中的字符提供了極大的便利。

方法charAt，將一個整數做爲參數，這個參數必須在0和字符串長度減1之間，並返回一個字符串，其中包含指定位置處的字符，能夠認爲字符串像數組，其中每一個字符都有對應的索引，而索引從0開始，若是指定的索引大於或等於字符串的長度，這個方法將返回一個空字符串。

方法indexOf，將一個字符串做爲參數，並在字符串中該參數首次出現的位置返回該參數中第一個字符的索引。

第一個參數，目標字符串；第二個參數，它是一個索引，指定從什麼位置開始查找；第三，若是沒有找到指定的字符串，將返回索引-1。

方法substring，將兩個索引做爲參數，提取並返回這個兩個索引之間的子串。若是省略第二個參數，將提取從指定索引到字符串末尾的子串。

var da = data.substring(1,5);

var da1 = data.substring(1);

方法split，將一個用做分隔符的字符做爲參數，並根據這個分隔符分紅多個部分。split根據分隔符將字符串分紅多個部分，並返回一個包含這些部分的數組。

整理：

1. toLowerCase，將字符串中的全部大寫字符都轉換爲小寫，並返回結果
2. slice，刪除字符串的一部分，並返回結果
3. substring，返回字符串的一部分
4. lastIndexOf，與indexOf相似，但查找最後一個子串
5. match，在字符串中查找與正則表達式匹配的子串
6. trim，刪除字符串開頭和末尾的空白字符，爲處理用戶輸入提供了極大的便利
7. replace，查找子串並將它們都替換爲另外一個字符串
8. concat，將字符串拼接起來
9. toUpperCase，將字符串中的全部小寫字符都轉換爲大寫，並返回結果

事件

什麼是事件，如：用戶單擊按鈕，鼠標位置發生變化，經過網絡獲取數據，窗口大小發生變化，定時器到期，瀏覽器位置發生變化等，都會觸發事件。

建立事件處理程序：

// 處理程序就是一個函數
function da() {
 console.log('dadaqianduan.cn');
}

訪問DOM中的圖片

var image = document.getElementById('dadapic'); // 獲取指向圖像元素的引用
// 只有網頁加載完畢後，咱們才能從DOM中獲取圖像
window.onload = init;
function init() {
 var image = document.getElementById('dadapic');
 // 建立init函數，並將其賦給屬性onload，從而確保這些代碼在網頁加載完畢後才執行
}

// 添加圖像處理程序
window.onload = init;
function init() {
 var image = document.getElementById("dadapic");
 image.onclick = dadaFun;
}
// 將一個處理程序賦給從DOM中獲取的圖像對象的onclick屬性
// 編寫函數dadaFun
function dadaFun() {
 var image = document.getElementById("dadapic");
 image.src = "dadaqianduan.jpg";
 // 將圖像元素的src屬性更換圖片
}

事件和隊列

瀏覽器不斷地從這個隊列中取出事件，並調用相應的事件處理程序來處理他們。

mousemove事件：

當鼠標在特定元素上移動時，mousemove事件通知相應的處理程序，要指定處理程序，可以使用元素的屬性onmousemove，這樣會給這種事件處理程序傳遞一個event對象，其中包含以下屬性：

clientX和clientY，鼠標相對於瀏覽器建立左邊緣和上邊緣的距離，單位爲像素。

screenX和screenY，鼠標相對於設備屏幕左邊緣和上邊緣的距離，單位爲像素。

pageX和pageY，鼠標相對於網頁左邊緣和上邊緣的距離，單位爲像素`

規範

編寫可維護的代碼，很重要，否則被罵得很慘！！！

1. 寫代碼，無需原始開發者的幫助，寫代碼要讓任何人一看代碼就知道它是在幹什麼，以及它是怎麼實現的。
2. 寫代碼✍，要符合邏輯，不管操做有多麼複雜，代碼中的一切都要瓜熟蒂落。
3. 要重點思考，寫代碼，當使用數據發生變化時，也不用重寫。
4. 要通過設計（代碼架構），可以支持之後的擴展核心功能。
5. 要讓本身或別人可以容易進行調試，能讓代碼能夠給出明確的信息，能夠經過調試定位問題。
6. 學習前要注重代碼編寫規範，要讓代碼容易維護，具備可讀性。
7. 注意寫註解，在函數和方法地方描述其用途，完成任務所用到的算法。在大型代碼塊中，複雜的算法中，加入註解。
8. 代碼中變量和函數的適當命名對於其可讀性和可維護性相當重要的。如變量名應該是名詞，函數名應該是動詞，返回布爾值的函數常以is開頭，對變量和函數都使用符合邏輯的名稱（長度適當），變量，函數和方法應該以小寫字母開頭，使用駝峯大小寫形式，類名應該首字母 大寫，常量值應該所有大寫並如下劃線相接，名稱要儘可能具備描述性和直觀。

ES6以前，初始化方式不適合函數聲明中函數的參數，以後，能夠在函數聲明中爲參數指定默認值來標明參數類型。

經過標明變量類型的方式是經過初始化。示例：

// 經過初始化標明變量類型
let daBoolean = false; // 布爾值
let daNumber = -1; // 數值
let daString = ""; // 字符串
let daObject = null; // 對象

經過匈牙利表示法，標明變量類型的方式。

JavaScript傳統的匈牙利表示

o 表示 對象
s 表示 字符串
i 表示 整數
f 表示 浮點數
b 表示布爾值

let bDa; // 布爾值
let iDa; // 整數
let sDa; // 字符串

可是這種很差的是使用起來代碼可讀性降低，不夠直觀。

還可使用類型註釋，可是也不夠優美。

setTimeout工做原理

函數setTimeout建立一個倒計時的定時器，並將其關聯到一個處理程序。當定時器計時到零後，將調用這個處理程序。

• setInterval返回一個timer對象。要中止該定時器，可將其傳遞給另外一個函數clearInterval。
• 嚴格上說，應寫window.setTimeout，因window是全局對象，能夠省略。
• 調用setTimeout時，能夠向處理程序傳遞任意數量的參數：0個，1個或更多。
• 事件對象主要用於DOM事件處理程序，setTimeout不向處理程序傳遞事件對象，由於時間事件並不是由特定的元素觸發。

事件

1. click，在網頁中單擊時將觸發這個事件。
2. resize，每當用戶調整瀏覽器窗口的大小時，都將觸發這個事件。
3. play，用戶單擊網頁中video元素的播放按鈕時，將觸發這個事件。
4. pause，用戶單擊video元素的暫停按鈕時，將觸發這個世界。
5. load，瀏覽器加載網頁完畢後觸發的事件。
6. unload，用戶關閉瀏覽器窗口或切換其餘網頁時，將觸發這個事件。
7. dragstart，用戶拖拽網頁中的元素時，將觸發這個事件。
8. drop，用戶放下拖拽的元素時，將觸發這個事件。
9. mousemove，在元素上移動鼠標時，將觸發這個事件。
10. mouseover，用戶將鼠標指向元素時，將觸發這個事件。
11. touchstart，在觸摸設備上，用戶觸摸並按住元素時，將觸發這個事件。
12. touchend，用戶中止觸摸時，將觸發這個事件。
13. keypress，用戶按下任何鍵都將觸發這個事件。
14. mouseout，用戶將鼠標從元素上移開時將觸發這個事件。

鴨子方法

代碼示例加描述：

window.onload = dada;
function dada() {
 var image = document.getElementById("dadaqianduan");
 image.onclick = showDa;
}

function showDa() {
 var image = document.getElementById("dadaqianduan");
 image.src="dada.jpg";
}

網頁加載時，定義函數 dada和showDa；將 dada指定爲加載事件處理程序，網頁加載事件發生時，調用加載事件處理程序 dada，獲取 id爲dadaqianduan的圖像元素，將該圖像元素的單擊事件處理程序設置爲 showDa，圖像單擊事件發生時，調用 showDa，獲取 id爲dadaqianduan的圖像元素。將其 src屬性設置爲dada.jpg。

函數是一等公民

一個標準的函數聲明，由關鍵字function，函數名，形參和代碼塊組成。

示例聲明函數：

function da(num) {
 for (var i = 0; i < num; i++) {
  console.log("魔王哪吒");
 }
}

// 調用這個函數
da(12);

展現另一種（指向函數的引用）：

var da = function(num) {
 for (var i = 0; i < num; i++) {
  console.log("魔王哪吒");
 }
}
da(12);

函數聲明 和 函數表達式

分析：在執行任何代碼以前，瀏覽器查找函數聲明，找到函數聲明時，瀏覽器建立相應的函數，並將獲得的函數引用賦給與函數同名的變量。

瀏覽器：遇到了一個函數聲明，必須先對其進行處理，再作其餘的事情，咱們將這個函數存儲起來，以便可以在它被調用時獲取它。

這個函數名爲da，所以建立一個名爲da的變量來存儲指向這個函數的引用。

1. 在處理其餘代碼以前，先處理函數聲明。
2. 函數聲明是完整的語句，而函數表達式只是語句的一部分。
3. 函數表達式隨其餘代碼一塊兒被處理。
4. 對於函數聲明和函數表達式建立的函數，用相同的方式處理調用它們的語句。
5. 應儘量使用函數聲明，因它們先被處理。
6. 函數聲明不返回指向函數的引用，而是建立一個與函數同名的變量，並將指向函數的引用賦給它。
7. 函數表達式返回一個引用，該引用指向函數表達式建立的變量。
8. 可在變量中存儲指向函數的引用。

區別

1. 使用函數聲明時，函數將在執行代碼前建立
2. 使用函數表達式時，函數將在運行階段執行代碼時建立
3. 使用函數聲明時，將建立一個與函數同名的變量，並讓它指向函數
4. 使用函數表達式時，一般不給函數指定名稱，所以你要麼在代碼中將函數賦給一個變量，要麼以其餘方式使用函數表達式

一等公民特色

第一，將其賦給變量或存儲在數組和對象等數據結構中

第二，將其傳遞給函數

第三，從函數中返回它們

能夠將函數賦給變量；能夠將函數傳遞給函數；能夠從函數返回函數。

1. 定義函數的方式：使用函數聲明和使用函數表達式
2. 函數引用是一個指向函數的值
3. 函數聲明在執行代碼前處理
4. 函數表達式在運行階段隨其餘代碼一塊兒執行
5. 處理函數聲明時，瀏覽器建立一個函數以及一個與函數同名的變量，並將指向函數的引用存儲到變量中
6. 處理函數表達式時，瀏覽器建立一個函數，但你必須顯式地處理指向這個函數的引用
7. 函數引用是做爲一等公民的值
8. 可將做爲一等公民的值賦給變量，包含在數據結構中，傳遞給函數或從函數返回

做用域，閉包

瀏覽器分兩次處理JavaScript代碼：

1. 瀏覽器分析全部的函數聲明，並定義這些函數聲明建立的函數；
2. 瀏覽器按從上到下的順序執行代碼，並定義函數表達式建立的函數。

使用函數聲明的函數是在使用函數表達式建立的函數以前定義的。

提高：函數聲明放在任何地方，且可在任何地方調用它們。在代碼任何地方，函數聲明建立的函數都是已定義的。

函數表達式，它建立的函數要等到它執行後才被定義，就算你將函數表達式賦給全局變量，也要等到它建立的函數被定義後，才能使用這個全局變量來調用這個函數。

嵌套函數，影響函數的做用域

函數表達式是在它調用的時候，才定義的。

詞法做用域介紹

詞法，表示只須要查看代碼的結構 就 可肯定 變量的做用域，而不是等到代碼執行時才明白。

全部的局部變量都存儲在一個環境中，它存儲了在局部做用域內定義的全部變量。

function da() {
 return daString;
} 
return da;

返回這個函數時，返回的不只僅是函數，還有與之相關聯的環境。（每一個函數都有與之相關聯的環境，其中包含它所處做用域內的局部變量）

什麼是詞法做用域

JavaScript的做用域規則徹底基於代碼的結構，而不是一些動態的運行階段屬性。（只須要查看代碼的結構，就能肯定變量是在什麼地方定義的）

在JavaScript中，只有函數會引入新的做用域。

對於函數中引用的變量，要肯定它是在哪裏定義的，能夠從最裏面，既是當前函數中，開始依次向最外面進行查找，直到找到它爲止。若是在這些函數中都找不到它，要麼是全局，要麼未定義。

形參變量包含在環境中，形參視爲函數的局部變量，因此它們也在環境中。

閉包

閉包，名詞，指的是函數和引用環境（閉包，一個函數及其環境）

示例：

function makeCounter() {
 var count = 0; // 局部變量
 function counter() { // 建立函數counter,它將變量count+1
  count = count + 1;
  return count;
 }
 return counter; // 返回函數counter
}

將函數傳遞給函數時，也將建立閉包。

示例：

function makeTimer(doDa, n) {
 setTimeout(function() { // 函數setTimeout傳入一個函數表達式
  console.log(doDa);  // 函數表達式使用了自由變量doDa。
 }, n);
}

自由變量：不是在本地定義的變量，這些變量稱爲自由變量。

注意：（若是閉包函數外面的代碼修改了變量，閉包函數執行時看到的將是變量的新值。）

點擊事件使用閉包

示例：

window.onload = function() {
 var count = 0;
 var message = "dadaqianduan";
 var div = document.getElementById("message");
 
 var button = document.getElementById("clickme");
 button.onclick = function() {
  count++;
  div.innerHTML = message + count + "瀏覽量";
 };
};

對象

每一個對象，都使用對象字面量來指定其全部屬性。

使用對象字面量建立對象

示例：

var dadaqianduan = {
 name: '魔王哪吒',
 age: 'dada',
 name1: 'jeskson',
 name2: 'dada',
}

對象構造函數

構造函數命名時，採用首字母大寫的形式，示例：

function Dadaqianduan(name, name1, name2) {
 this.name = name;
 this.name1 = name1;
 this.name2 = name2;
 this.sayName = function() { // this.sayName 屬性 一個匿名函數
  console.log("dada");
 }
}

使用構造函數示例：

var dada = new Dadaqianduan("dada1", "dada2", "dada3");

變量dada將包含一個指向新對象的引用，有了構造函數後，能夠不斷地建立不一樣對象。

this，存儲了一個引用，指向當前處理的對象。函數執行完畢後，運算符new返回this，指向新建立的對象的引用。

構造函數中返回值，除非返回的是 this，不然這將致使構造函數不返回它建立的對象。

注意：調用構造函數來建立對象時，this被設置爲一個引用，值向正在建立的新對象，所以構造函數的全部代碼針對的都是這個新對象。

對象建立後，當你對其調用方法時，this被設置爲方法被調用的對象。因此，在方法中，this老是表示方法被調用的對象。

對象實例

使用運算符instanceof來肯定對象是由哪一個構造函數建立的，若是對象是由指定的構造函數建立的，運算符instanceof將返回true。（根據建立對象時，運算符new在幕後存儲了一些信息，隨時都能肯定對象是由哪一個構造函數建立的）

內置構造函數

1. Object，可以使用構造函數Object來建立對象。
2. Math，用於執行數學運算任務的屬性和方法。
3. RegExp，用戶建立正則表達式對象。
4. Error，在代碼中捕獲錯誤。

建立日期對象，示例：

// 只須要使用其構造函數便可
var now = new Date(); // 表示當前日期和時間的日期對象

// 構造函數Date返回一個表示本地當前日期和時間的Date實例

數組對象示例：

var emptyArray = new Array(); // 建立一個長度爲零的空數組

var arrArray = new Array("a", "b", "c");

原型

在 JavaScript中，對象從其餘對象那裏繼承行爲，稱爲 原型式繼承或基於原型的繼承。（被繼承的對象稱爲 原型，繼承既有屬性包括方法，同時在新對象中添加屬性）

JavaScript對象模型基於原型的概念，在這種模型中，可經過**擴展其餘
對象**（即原型對象）來建立對象。

原型：對象構造函數。構造函數-繼承原型。

如何在代碼中訪問原型，有一個構造函數Da，示例訪問：

// 構造函數Da，將發現它有一個prototype屬性，這是一個指向原型的引用
Da.prototype

在JavaScript中，函數也是對象，實際上，在JavaScript中，幾乎全部的東西都是對象，數組也是。(函數有屬性，而構造函數都包含屬性prototype，來訪問原型對象)

調用對象的方法時，this被設置爲方法被調用的對象。即使在該對象中沒有找到調用的方法，而是在原型中找到了它，也不會修改this的值，在任何狀況下，this都指向原始對象，即方法被調用的對象，即使該方法位於原型中也是如此。

1. JavaScript對象系統使用原型式繼承
2. 使用構造函數建立對象實例時，實例包含本身的自定義屬性，還有構造函數中方法的副本
3. 給構造函數的原型添加屬性後，使用這個構造函數建立的實例都將繼承這些屬性
4. 經過在原型中定義屬性，可減小對象包含的重複代碼
5. 要重寫原型中的屬性，只需在實例中添加該屬性便可
6. 構造函數有默認的原型，你可經過構造函數的屬性prototype來訪問它
7. 可將你本身建立的對象賦給構造函數的屬性prototype
8. 使用自定義的原型對象時，務必將原型的屬性constructor設置爲相應的構造函數，以保持一致性。
9. 要調用函數並指定函數體中this指向的對象，可調用其方法call

JavaScript事件

setTimeout的描述：給定一個回調及n毫秒的延遲，setTimeout就會在n毫秒後運行該回調。

示例：

for (var i = 1; i <= 3; i++) {
 setTimeout(function() {
  console.log(i);
 }, 0);
}
// 4
// 4
// 4

異步函數

JavaScript環境提供的異步函數一般能夠分爲兩大類：I/O函數和計時函數。

從原型到原型鏈

使用構造函數建立一個對象，示例：

// 構造函數首字母大寫
function Da() {
 // 構造函數
}
var da = new Da(); // 實例化對象
da.name = 'jeskson'; // 添加屬性
console.log(da.name); // jeskson

在示例中，Da是一個構造函數，使用new建立一個實例對象da。

記住：每一個函數都有一個prototype屬性，示例：

function Da() {
}
// 每一個函數都有prototype屬性
Da.prototype.name = 'jeskson';
var da1 = new Da();
var da2 = new Da();
console.log(da1.name); // jeskson
console.log(da2.name); // jeskson

注意：函數的prototype屬性指向一個對象，這個對象是調用該構造函數而建立的實例原型。

既是構造函數和實例原型之間的關係：Da（構造函數）經過prototype而建立Da.prototype（實例原型）。

每一個 JavaScript對象，除 null外，在建立的時候就會與之關聯另外一個對象，這個對象就是 原型。每一個對象都會從原型「繼承」屬性。

實例化對象da，實例與實例原型Da.prototype之間的關係：

__proto__，每一個JavaScript對象（new構造函數建立對象，如上述的da），除null外，都具備的一個屬性，叫__proto__，這個屬性會指向該對象的原型。

示例：

function Da() {
}

var da = new Da();
console.log(da.__proto__ === Da.prototype); // true

既是：Da構造函數，建立實例化對象da，da對象中都有一個屬性__proto__，這個屬性指向Da.prototype實例原型，而這個實例原型，是經過Da構造函數使用 每一個函數中都有一個屬性prototype，指向實例原型（Da.prototype）。

表示：構造函數 和 實例對象，均可以指向 原型。

有人問，那有沒有原型 指向 （構造函數或者實例的），答：指向實例沒有，指向構造函數就有。沒有指向實例是 一個構造函數能夠生成多個實例。

記住：每一個原型都有一個constructor屬性指向關聯的 構造函數。

示例：

function Da() {
}
console.log(Da === Da.prototype.constructor); // true

既是關係：

1. 構造函數Da經過prototype指向實例原型Da.prototype
2. 構造函數Da建立的實例化對象da，經過da中（對象都有的屬性）__proto__指向實例原型Da.prototype
3. 實例原型Da.prototype，每一個原型中都有的屬性constructor，經過constructor指向構造函數

示例：

function Da() {

}

var da = new Da();

console.log(da.__proto__ == Da.prototype) // true
console.log(Da == Da.prototype.constructor) // true
// 獲取對象的原型
console.log(Object.getPrototypeOf(da) === Da.prototype) // true

實例與原型

當讀取實例的屬性時，若是找不到該屬性，就會去查找與對象相關聯的原型 中 的屬性，若是查找不到， 就會去找 原型 的 原型，一直找到 最頂層爲止。

示例：

function Da(){
}
Da.prototype.name = 'jeskson';
var da = new Da();
da.name = 'dadaqianduan';
console.log(da.name); // dadaqianduan
delete da.name;
console.log(da.name); // jeskson

原型的原型

示例：

var obj = new Object();
obj.name = 'jeskson';
console.log(obj.name); // jeskson

關係：構造函數，實例原型，實例化對象，原型的原型Object.prototype，構造函數Object()。

1. Da（構造函數），經過prototype指向，實例原型Da.prototype
2. Da構造函數，建立對象da，其da中的屬性__proto__指向，實例原型Da.prototype
3. 實例原型Da.prototype，中屬性constructor指向，構造函數Da
4. 實例原型Da.prototype，中原型的原型，（實例原型便是對象）對象中屬性__proto__指向Object.prototype
5. Object()構造函數，經過prototype指向，Object.prototype原型
6. Object.prototype原型中屬性constructor指向，構造函數Object()

原型鏈

示例：

// Object.prototype的原型 -> null
console.log(Object.prototype.__proto__ === null); // true
// null 表示 沒有對象，即該處不該該有值。就是說Object.prototype沒有原型，查找到Object.prototype就能夠中止查找了

即 Object.prototype（對象）中的屬性 __proto__指向 null

constructor

示例：

function Da() {
}
var da = new Da();
console.log（da.constructor === Da); // true

當獲取da.constructor時，da中其實沒有constructor屬性，當不能讀取到constructor屬性時，會從da的原型中Da.prototype中讀取，找到原型中有該屬性，即表示：

da.constructor === Da.prototype.constructor

proto

大部分瀏覽器支持這個非標準的方法訪問原型，它並不存在於Da.prototype中，而是來自於Object.prototype，與其說是一個屬性，能夠說是getter/setter，當使用obj.__proto__時，能夠理解爲返回了Object.getPrototype(obj)

注意：Function做爲一個內置對象，是運行前就已經存在的東西，因此不會根據本身生成本身。

緣由：

1. 爲量保持與其餘函數一致
2. 標明是一種關係而已

prototype是函數纔會有的屬性，而 __proto__是幾乎全部對象都有的屬性。

接下來，說說什麼是做用域：做用域指☞的是 程序源代碼中定義變量的區域。

做用域規定了如何查找變量，也就是肯定當前 執行代碼 對變量 的訪問權限。

詞法做用域

在JavaScript中採用的是詞法做用域，函數的做用域在函數定義的時候就決定了。

示例：

var name = 'jeskson'

function da1() {
 console.log(name);
}

function da2() {
 var name = 'dadaqianduan.cn';
 da1();
}

da2();
// 結果是jeskson ， 由於採用的是靜態做用域

動態做用域

動態做用域 是 在函數調用的時候才決定的

面試題

var scope = "global scope";
function checkscope() {
 var scope = "local scope";
 function f() {
  return scope;
 }
 return f();
}
checkscope();

var scope = "global scope";
function checkscope() {
 var scope = "local scope";
 function f() {
  return scope;
 }
 return f;
}
checkscope()();

其結果都是打印： local scope，因採用的是詞法做用域，函數的做用域 基於 函數 建立的位置。 （函數的做用域在函數定義的時候就決定了）

JavaScript是採用詞法做用域的，表示函數的執行依賴於函數定義的時候所產生的變量做用域。

結果是10，因變量 a讀取不到對象 o的屬性 a。改成 console.log(o.a)就能夠打印11。

JavaScript設計模式之單例模式

1. 什麼是設計模式：

設計模式是一套被反覆使用，多數人知曉的，通過分類編目的，代碼設計經驗的總結

有人說：當封裝一個函數時，你是在複用代碼，當使用一個設計模式時，你是在複用他人的經驗。

1. 設計模式的分類

• 建立型模式：單例模式，抽象工廠模式，建造者模式，工廠模式，原型模式。
• 結構型模式：適配器模式，橋接模式，裝飾模式，組合模式，外觀模式，享元模式，代理模式。
• 行爲型模式：模板方法模式，命令模式，迭代器模式，觀察者模式，中介者模式，備忘錄模式，解釋器模式，狀態模式，策略模式，職責鏈模式，訪問者模式。

1. 設計模式的好處

• 行之有效的解決方法
• 易於修改和維護
• 便於交流和溝通

1. 傳統的單例模式

保證一個類僅有一個實例，並提供一個訪問它的全局訪問點。

{} 命名空間，防衝突
惰性單例

深刻函數

1. 函數的定義

// 字面量
function fn() {};
函數聲明
簡潔，直觀
聲明提早

// 構造函數
var fn = new Function();
賦值語句
畫蛇添足，效率低下
必須在調用語句以前

// 賦值表達式
var fn = function() {};
賦值語句
簡潔，直觀
必須在調用語句以前

1. 函數的調用

// 普通函數
fn()

// 匿名函數
(function() {})()

// 構造函數
new Object()

// 方法
Obj.method()

// 間接
fn.daFun()

1. 函數的參數

// 形參
函數定義時括號內的參數
接收實參的值
個數爲fn_name.length

// 實參
函數調用時括號內實際傳遞的參數
將值賦值給形參
個數爲arguments.length

1. 函數的返回值

// return
用在函數中
跳出函數

// continue
用在循環中
跳出本次循環

// break
用在循環中
跳出當前循環

js表單驗證案例

用戶註冊時，用戶名，密碼，手機的數據再輸入的時候可能會格式不正確，因此須要對數據進行合法性校驗。

用js的正則對象來進行數據的驗證：var reg = /正則表達式/;

js面向對象

面向對象：對代碼的一種抽象，對外統一提供調用接口的編程思想。

基於原型的面向對象方式中，對象則是依靠構造器（constructor)利用原型prototype構造出來的。

1. 屬性是事物的特性
2. 方法是事物的功能
3. 對象是事物的一個實例
4. 原型 是 js函數中由 prototype 屬性引用了一個對象，即原型對象（原型）

閉包：是一個擁有許多變量和綁定了這些變量的環境的表達式

js字面式對象聲明對象，示例：

var obj = {
 屬性名稱： 屬性值，
 屬性名稱： 屬性值，
 ...
 方法名稱：function() {},
 方法名稱：function() {},
 ...
}

new操做符後跟Object構造函數，示例：

var obj = new Object();

obj.屬性 = 屬性值；
obj.屬性 = 屬性值；
obj.方法 = function(str) {
 方法代碼
};

js中構造函數聲明對象，示例：

function Test([參數列表]) {
 this.屬性 = 屬性值；
 this.方法 = function() {
  // 方法中的代碼
 }
}

var obj = new Test(參數列表);

js中工廠方式聲明對象，示例：

function createObject(name, age) {
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 obj.run = function() {
  // return 
 };
 return obj;
}

var da1 = createObject('dada', 1);
var da2 = createObject('jeskson', 2);

js中原型模式聲明對象，示例：

function test() {

}
test.prototype.屬性 = 屬性值；
test.prototype.屬性 = 屬性值；
test.prototype.屬性 = function() {
 // 執行代碼
}
var obj = new test();

js中混合模式聲明對象，示例：

function test(da1, da2, da3) {
 this.da1 = da1;
 this.da2 = da2;
 this.da3 = da3;
}
test.prototype.方法名稱 = function() {
 // 執行代碼
}
var obj = new Blog(da1, da2, da3);

js遍歷對象的屬性和方法，示例：

var da = {};
da.name = 'jeskson';
da.age = 1,
da.fn = function() {
 console.log('魔王哪吒');
}
for(var i in da) {
 // 遍歷對象 in
 console.log(da[i]);
}

什麼是封裝

把對象內部數據和操做細節進行隱藏。

原型和原型鏈

1. 原型，利用prototype添加屬性和方法
2. 原型鏈，js在建立對象的時候，都有一個叫作__proto__的內置屬性，用於指向建立它的函數對象的原型對象prototype

原型繼承

利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法

構造函數繼承

在子類內部構造父類的對象實現繼承

call和 apply的用法

• call，調用一個對象的一個方法，以另外一個對象替換當前對象
• apply，應用某一個對象的一個方法，用另外一個對象替換當前對象

傳參方式不一樣，call是參數列表，apply是數組。

js面向對象的關鍵詞

instanceof, delete, call, apply, arguments, callee, this

• 經過new function()建立的對象都是函數對象，其餘的都是普通對象
• js中全部的函數對象都有一個prototype屬性這個屬性引用了一個對象，便是原型對象，簡稱原型，普通對象沒有prototype，但有__proto__屬性。

繼承

1. 構造繼承示例

function parents(name) {
 this.name = name;
 this.say = function() {
  console.log(this.name);
 }
}
function child(name, age {
 this.pobj = parents;
 this.pobj(name);
 this.age = age;
}

var da = new child('魔王哪吒', 1);

1. 原型繼承示例

var da = function(){
};
da.prototype.say = function() {
 console.log('魔王哪吒');
}
da.prototype.name = 1;

var dada = function() {};
dada.prototype = new da();
dada.prototype.name = 2;
var obj = new dada();
// 子元素的成員屬性name 會覆蓋父元素

變量、做用域和內存問題

1. 變量：基本類型 和 引用類型

// 基本類型
不可修改
保持在棧內存中
按值訪問
比較時，值相等即相等
複製時，建立一個副本
按值傳遞參數
用typeof檢測類型

// 引用類型
能夠修改
保存在堆內存中
按引用訪問
比較時i，同一引用才相等
複製的實際上是指針
按值傳遞參數
用instanceof檢測類型

1. 做用域

• 做用域：全局做用域和局部做用域
• 做用域鏈 是用來 查詢變量的
• js解析機制

1. 內存問題

• 離開做用域的值將被標記爲 可回收， 將在垃圾收集期間 刪除
• 標記清除 是 目前主流的垃圾收集算法
• 標記清除 是給 不用的值加標記，而後進行回收其內存
• 當變量不用的時候，能夠手動解除它的引用
• 引用計算算法 可能 由於 循環引用的問題而得不到釋放

執行上下文棧

執行代碼順序，示例（函數表達式）：

var da = function() {
 console.log("da1");
}
da(); // da1

var da = function() {
 console.log("da2");
}
da(); // da2

函數聲明，先執行，展現：

function da() {
 console.log("da1");
}
da(); // da2

function da() {
 console.log("da2");
}
da(); // da2

代碼是一段一段執行的。在JavaScript中的可執行代碼，運行環境有三種，分全局代碼（全局環境，代碼首先進入的環境），函數代碼（函數被調用時執行的環境），eval代碼。

執行上下文（當執行到一個函數的時候，就會進行準備工做），概念：當代碼運行時，會產生一個對應的執行環境，在這個環境中，全部變量會被事先提出來，有的直接賦值，有的默認值爲undefined，代碼從上往下開始執行，就叫作執行上下文。

示例：

function fn() {
 console.log(a); // undefined
 var a = 1;
}
fn();

執行上下文棧， Execution context stack, ECS，(如何管理建立的那麼多執行上下文呢)，在 JavaScript引擎中建立了執行上下文棧來管理執行上下文。

執行上下文生命週期：

建立-執行-執行完畢後出棧，等待被回收。

建立階段：1，生成變量對象；2，創建做用域鏈；3，肯定this指向。

執行階段：1，變量賦值；2，函數引用；3，執行其餘代碼。

全局執行上下文

全局執行上下文只有一個，在客戶端中通常由瀏覽器建立，也就是window對象，咱們能經過this直接訪問到它。

console.log(this);
// window

全局對象window上預約了大量的方法和屬性，咱們在全局環境的任意處都能直接訪問這些屬性方法，同時window對象仍是var聲明的全局變量的載體。

經過 var建立的全局對象，均可以經過 window訪問。

函數執行上下文

函數執行上下文可存在無數個，每當一個函數被調用時會建立一個函數上下文，同一個函數被調用屢次，都會建立一個新的上下文。

模擬執行上下文棧的行爲，定義執行上下文棧數組：

ECStack = [];

JavaScript開始執行代碼的時候，先遇到全局代碼，即初始化的時候先向執行上文棧壓入一個全局執行上下文，globalContext全局執行上下文，只有整個應用程序結束時，ECStack纔會清空。即表示ECStack底部永遠有個globalContext。

ECStack = [
 globalContext
];

執行上下文棧，也叫執行棧，或叫 調用棧，執行棧用於存儲代碼期間 建立的 全部上下文。

示例：

function da1() {
 da2();
 console.log(1);
}

function da2() {
 da3();
 console.log(2);
}

function da3() {
 console.log(3);
}

da1(); // 3 2 1

執行棧 與 上下文的關係，執行過程：

// 代碼執行前建立全局執行上下文
ECStack = [
 globalContext
];

ECStack.push("da1 functionContext");

ECStack.push("da2 functionContext");

ECStack.push("da3 functionContext");

// da3 執行完畢，輸出 3 並出棧
ECStack.pop();
// da2
ECStack.pop();
// da1
ECStack.pop();
// 最後執行棧中只剩下一個全局執行上下文

執行上下文建立階段

分：1，建立階段；2，執行階段。

示例建立過程代碼：

ExecutionContext = {
 // 肯定this的值
 ThisBinding = <this value>,
 // 建立詞法環境組件
 LexicalEnvironment = {},
 // 建立變量環境組件
 VariableEnvironment = {},
};

模擬寫執行上下文棧的變化

示例1：

var scope = "global scope";

function da(){
    var scope = "local scope";
    function dada(){
        return scope;
    }
    return dada();
}

da();

// 執行上下文棧
ECStack.push(<da> functionContext);
ECStack.push(<dada> functionContext);
ECStack.pop();
ECStack.pop();

示例2：

var scope = "global scope";

function da(){
    var scope = "local scope";
    function dada(){
        return scope;
    }
    return dada;
}

da()();

ECStack.push(<da> functionContext);
ECStack.pop();
ECStack.push(<dada> functionContext);
ECStack.pop();

做用域鏈

上述說到：每一個執行上下文，都有其三個重要屬性：

1. 變量對象
2. 做用域鏈
3. this

做用域鏈就是：當查找變量的時候，會先從當前上下文的變量對象中查找，若是沒有找到，就會 從父級執行上下文的變量對象中查找，一直找到全局上下文的變量對象爲止，就就是全局對象。

像這樣，由多個執行上下文的變量對象構成的鏈表，叫作做用域鏈。

回顧：函數的做用域在函數定義的時候就決定了，詞法做用域。

示例：（函數有一個內部屬性[[scope]]存儲全部父變量對象）

function da1() {
    function da2() {
        ...
    }
}


da1.[[scope]] = [
  globalContext.VO
];

da2.[[scope]] = [
    da1Context.AO,
    globalContext.VO
];

示例2：

var scope = "global scope";
function da(){
    var scope2 = 'local scope';
    return scoped2;
}
da();

// 函數被建立
da.[[scope]] = [
    globalContext.VO
];

// 執行函數
ECStack = [
    daContext,
    globalContext
];

// 建立做用域鏈
daContext = {
    Scope: da.[[scope]],
}

// 用 arguments 建立活動對象
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    }
}

// 將活動對象壓入 da 做用域鏈頂端
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]
}

// 開始執行函數
daContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    Scope: [AO, [[Scope]]]
}

// 函數執行完畢
ECStack = [
    globalContext
];

事件

什麼是事件呢？它是能夠被JavaScript偵測到的行爲，通俗的將就是當用戶與web頁面進行某些交互時，解釋器就會建立響應的event對象以描述事件信息。

你知道哪些事件呢：

1. 用戶點擊頁面上的某項內容
2. 鼠標通過特定的元素
3. 用戶滾動窗口
4. 用戶改變窗口大小
5. 用戶按下鍵盤某個鍵
6. 頁面元素加載完成或加載失敗

事件週期

1. 第一階段：事件捕獲，事件對象沿DOM樹向下傳播，向下
2. 第二階段：目標觸發，運行事件監聽函數
3. 第三階段，事件冒泡，事件對象沿DOM樹向上傳播，向上

IE的事件模型中沒有「事件捕獲」階段。

事件的冒泡處理機制（向上）

當處於DHTML對象模型底部對象事件發生時，會依次激活上面對象定義的同類事件處理。

事件句柄

那麼什麼是事件句柄：事件句柄，稱 事件處理函數，事件監聽函數，指用於響應某個事件而調用的函數。

每個事件均對應一個事件句柄，在程序執行時，將相應的函數或語句指定給事件句柄，則在該事件發生時，瀏覽器便執行指定的函數或語句。

事件定義

定義監聽函數三種方式：

1. 直接在HTML中定義元素的事件相關屬性。（應儘量少用）
2. 在JavaScript中爲元素的事件相關屬性賦值。
3. 高級事件處理方式，一個事件能夠綁定多個監聽函數。

DOM事件流

1. 添加事件：addEventListener()

語法：element.addEventListener(event,function,useCapture)，用於指定元素添加事件句柄。

參數：

event: 字符串，指定事件名

function：指定要事件觸發時執行的函數

useCapture：指定事件是否在捕獲或冒泡階段執行

1. 移除事件：removeEventListener()

語法：element.removeEventListener(event,function,useCapture)，用於移除addEventListener()方法。

事件列表

通常事件示例

onclick 鼠標點擊時觸發此事件

ondblclick 鼠標雙擊時觸發此事件

onmousedown 按下鼠標時觸發此事件

onmouseup 鼠標按下後鬆開鼠標時觸發此事件

onmouseover 當鼠標移動到某對象範圍的上方時觸發此事件

onmousemove 鼠標移動時觸發此事件

onmouseout 當鼠標離開某對象範圍時觸發此事件

onkeypress 當鍵盤上的某個鍵被按下而且釋放時觸發此事件

onkeydown 當鍵盤上某個鍵被按下而且釋放時觸發此事件

onkeyup 當鍵盤上某個按鍵被放開時觸發此事件

頁面相關事件

onabort 圖片在下載時被用戶中斷

onbeforeunload 當前頁面的內容將要被改變時觸發此事件

onerror 出現錯誤時觸發此事件

onload 頁面內容完成時觸發此事件

onmove 瀏覽器的窗口被移動時觸發此事件

onresize 當瀏覽器的窗口大小被改變時觸發此事件

onscroll 瀏覽器的滾動條爲止發生變化時觸發此事件

onstop 瀏覽器的中止按鈕被按下時觸發此事件或正在下載的文件被中斷

onunload 當前頁面將被改變時觸發此事件

滾動字幕事件

onbounce 在Marquee內的內容移動至Marquee顯示範圍以外時觸發此事件

onfinish 當Marquee元素完成須要顯示的內容後 觸發此事件

onfinish 當Marquee元素完成須要顯示的內容後觸發此事件

onstart 當Marquee元素開始顯示內容時觸發此事件

表單相關事件

onblur 當前元素失去焦點時觸發此事件

onchange 當前元素失去焦點而且元素的內容發生改變而觸發此事件

onfocus 當某個元素得到焦點時觸發事件

onrest 當表單中reset的屬性被激發時觸發此事件

onsubmit 一個表單被提交時觸發此事件

數據綁定

oncellchange 當數據來源發生變化時
ondetaavailable 當數據接收完成時觸發事件
onafterupdate 當數據完成由數據緣對象的傳送時觸發此事件
onrowexit 當前數據源的數據將要發生變化時觸發的事件
onrowsdelete 當前數據記錄將被刪除時觸發此事件
onrowsinserted 當前數據源將要插入新數據記錄時觸發此事件

小結

1. 在瀏覽器內部，使用文檔對象模型DOM來表示網頁
2. 瀏覽器在加載並分析HTML時建立網頁的DOM
3. 在JavaScript代碼中，使用document對象來訪問DOM
4. document對象包含你能夠用來訪問和修改DOM的屬性和方法
5. 方法document.getElementById根據id從DOM獲取一個元素
6. 方法document.getElementById返回一個表示網頁中元素的元素對象
7. 元素對象包含一些屬性和方法，你可使用它們來讀取和修改元素的內容
8. 屬性innerHTML包含元素的文本內容和所有嵌套的HTML內容
9. 要修改元素的內容，能夠修改其屬性innerHTML的值
10. 要獲取元素的特性值，可以使用方法getAttribute
11. 要設置元素的特性值，可以使用方法setAttribute
12. 可以使用window對象的onload屬性給加載事件指定事件處理程序
13. 網頁加載完畢後，將當即調用window對象的onload屬性指向事件處理程序
14. undefined是一個值，其undefined的類型是undefined類型，它不是對象，不是數字，字符串或布爾值，也不是任何明確的東西
15. 在JavaScript中，類型分兩組，基本類型和對象。不屬於基本類型的值都是對象
16. 基本類型包含數字，字符串，布爾值，null和undefined，其餘的值都是對象
17. undefined表示變量尚未初始化
18. null表示「無對象」
19. NaN表示的是「非數字」，但應該說在JavaScript中沒法表示的數字，NaN的類型爲數字
20. NaN與包含它本身在內的任何值都不相等，所以要檢查一個值是不是NaN，應該使用函數isNaN
21. 在JavaScript中總共有5個假值：undefined, null, 0, "", false，其餘值都是真值
22. 要響應事件，能夠編寫並註冊一個事件處理程序。如，要指定單擊事件處理程序，可將事件處理程序賦給元素的onclick屬性。
23. 匿名韓寒是沒有名稱的函數表達式
24. 函數聲明建立的函數是在執行其餘代碼前定義的
25. 函數表達式是在運行階段與其餘代碼一塊兒執行的，所以在函數表達式所在的語句執行前，它建立的函數是未定義的
26. 可將函數表達式傳遞給函數，還可從函數返回函數表達式
27. 閉包指的是函數及其引用的環境
28. 閉包捕獲其建立時所處做用域內的變量的值
29. 自由變量指的是在函數體內未綁定的變量
30. typeof返回其操做數的類型，若是向它傳遞一個字符串，它將返回string
31. 須要建立少許對象時，使用對象字面量；須要建立大量對象時，使用構造函數
32. 使用構造函數可建立包含相同屬性和方法的一致對象
33. 使用new來調用構造函數時，將新建一個空對象，並在構造函數中將其賦給this
34. 在構造函數中，使用this來訪問正在建立的對象，進而給它添加屬性，構造函數 自動返回 它建立的 新對象

回看筆者往期高贊文章，也許能收穫更多喔！

• 一個合格的初級前端工程師須要掌握的模塊筆記
• Vue.js筆試題解決業務中常見問題
• 【初級】我的分享Vue前端開發教程筆記
• 長篇總結之JavaScript，鞏固前端基礎
• 前端面試必備ES6全方位總結
• 達達前端我的web分享92道JavaScript面試題附加回答
• 【圖文並茂，點贊收藏哦！】重學鞏固你的Vuejs知識體系
• 【思惟導圖】前端開發-鞏固你的JavaScript知識體系
• 14期-連肝7個晚上，總結了計算機網絡的知識點！（共66條）

❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創做更好的文章

點贊、收藏和評論

我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，咱們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一塊兒學習了)

咱們下期見！

文章持續更新，能夠微信搜一搜「 程序員哆啦A夢 」第一時間閱讀，回覆【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經收錄

github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily