頭圖

這是我的第一次JavaScript初級技巧

程序員哆啦A夢

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中是區分大小寫的哦。

布爾運算符

布爾運算符用于結果為truefalse的布爾表達式中。

有兩種布爾運算符: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

注意事項:

根據idDOM獲取元素時,如果指定的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對象,其中包含如下屬性:

clientXclientY,鼠標相對于瀏覽器創建左邊緣和上邊緣的距離,單位為像素。

screenXscreenY,鼠標相對于設備屏幕左邊緣和上邊緣的距離,單位為像素。

pageXpageY,鼠標相對于網頁左邊緣和上邊緣的距離,單位為像素`

規范

編寫可維護的代碼,很重要,不然被罵得很慘?。?!

  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環境提供的異步函數通??梢苑譃閮纱箢悾?code>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()();
其結果都是打?。?code>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
原型繼承

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

構造函數繼承

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

callapply的用法
  • 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根據idDOM獲取一個元素
  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. 基本類型包含數字,字符串,布爾值,nullundefined,其他的值都是對象
  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來訪問正在創建的對象,進而給它添加屬性,構造函數 自動返回 它創建的 新對象

回看筆者往期高贊文章,也許能收獲更多喔!

??關注+點贊+收藏+評論+轉發??,原創不易,鼓勵筆者創作更好的文章

點贊、收藏和評論

我是Jeskson(達達前端),感謝各位人才的:點贊、收藏和評論,我們下期見!(如本文內容有地方講解有誤,歡迎指出?謝謝,一起學習了)

我們下期見!

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

github收錄,歡迎Starhttps://github.com/webVueBlog/WebFamily

閱讀 2.4k

程序員哆啦A夢
達達前端技術社群:囊括前端Vue、JavaScript、數據結構與算法、實戰演練、Node全棧一線技術,緊跟業界發...

面向JavaScript愛好人員提供:Web前端最新資訊、原創內容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和經驗分享。

2.4k 聲望
310 粉絲
0 條評論

面向JavaScript愛好人員提供:Web前端最新資訊、原創內容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和經驗分享。

2.4k 聲望
310 粉絲
宣傳欄
一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>