javascript
《javascript面向对象编程指南》读书笔记
《javascript面向?qū)ο缶幊讨改稀纷x書筆記
- 《javascript面向?qū)ο缶幊讨改稀纷x書筆記
- 第一章 面向?qū)ο蟮腏avaScript
- 第二章 基本數(shù)據(jù)類型與流程控制
- 變量
- 數(shù)據(jù)類型
- typeof
- 數(shù)字
- 字符串
- 轉(zhuǎn)義字符
- bool值
- 邏輯運(yùn)算符
- 比較運(yùn)算符
- undefined與null
- 數(shù)組
- 數(shù)組元素的增刪改查
- 多維數(shù)組
- Map（ES6規(guī)范）
- Set（ES6規(guī)范）
- 流程控制
- 條件語(yǔ)句
- 循環(huán)語(yǔ)句
- 第三章 函數(shù)
- 函數(shù)定義
- 參數(shù)
- 返回值
- 內(nèi)建函數(shù)
- 變量作用域
- 變量提升
- 匿名函數(shù)
- 回調(diào)函數(shù)
- 即時(shí)函數(shù)（自執(zhí)行函數(shù)）
- 內(nèi)部（私有）函數(shù)
- 函數(shù)中this指向的坑
- 返回函數(shù)的函數(shù)
- 能重寫自己的函數(shù)
- 閉包
- 作用域鏈
- 寫法
- 應(yīng)用
- 第四章 對(duì)象
- js中對(duì)象與數(shù)組的區(qū)別
- 對(duì)象聲明和訪問
- 聲明
- 屬性的訪問
- 屬性的增刪改
- 全局對(duì)象
- constructor屬性
- instanceof操作符
- 對(duì)象作為參數(shù)傳遞
- 比較對(duì)象
- 內(nèi)建對(duì)象
- Object
- Array
- length屬性
- 一些內(nèi)建方法
- Function
- 函數(shù)對(duì)象的內(nèi)建屬性：
- call和apply
- Boolean
- Number
- String
- Math
- Date
- RegExp
- replace
- 回調(diào)式替換
- Error對(duì)象
- 第五章 原型
- 原型屬性
- 原型對(duì)象上的屬性和方法
- 原型鏈
- 枚舉屬性
- isPrototypeOf()
- __proto__
- 原型作用
- 原型陷阱
- 第六章 繼承
- 實(shí)現(xiàn)方法1
- 實(shí)現(xiàn)方法2
- ES6中繼承寫法
- 第七章 瀏覽器環(huán)境
- BOM（瀏覽器對(duì)象模型）
- window對(duì)象
- window.navigator
- window.location
- window.history
- H5中history的API
- window.frames
- window.screen
- window.open/window.close
- window.moveTo()、window.moveBy()、window.resizeTo()、window.resizeBy()
- window.alert()、window.confirm()、window.prompt()
- window.setTimeout()、window.setInterval()
- window.document
- window對(duì)象
- DOM(文檔對(duì)象模型)
- DOM節(jié)點(diǎn)的訪問
- 方法一 索引訪問法
- 方法二 快捷訪問法
- DOM節(jié)點(diǎn)的修改
- DOM節(jié)點(diǎn)的新建
- DOM節(jié)點(diǎn)的移除
- 只適用于HTML的DOM對(duì)象
- DOM節(jié)點(diǎn)的訪問
- 事件
- 注冊(cè)事件三種方式
- 捕捉法和冒泡法
- 阻斷冒泡
- 防止默認(rèn)行為
- 事件類型
- XMLHttpRequest對(duì)象
- BOM（瀏覽器對(duì)象模型）
第一章 面向?qū)ο蟮腏avaScript
HTML專注于內(nèi)容，CSS專注于表現(xiàn)，JavaScript專注于行為。
JavaScript術(shù)語(yǔ)包含三個(gè)部分：
- ECMAScript：語(yǔ)言的核心部分（變量、函數(shù)、循環(huán)等等），獨(dú)立于瀏覽器，可以在其他環(huán)境中使用。
- 文檔對(duì)象模型（DOM）
- 瀏覽器對(duì)象模型（BOM）
ECMAScript和JavaScript的區(qū)別：
ECMAScript是為了規(guī)范各種前端腳本語(yǔ)法的標(biāo)準(zhǔn)（后端node.js也包含ECMAScript），JavaScript只是其的一種實(shí)現(xiàn)。
第二章 基本數(shù)據(jù)類型與流程控制
變量
- 變量名可以由字母、數(shù)字、下劃線、美元符號(hào)組合而成。
- 變量名不能以數(shù)字開頭。
- 變量名區(qū)分大小寫。
數(shù)據(jù)類型
共6大數(shù)據(jù)類型
- 值類型
- 數(shù)字
- 字符串
- 布爾值
- undefined
- null
- 引用類型
- object
typeof
- 作用：查看變量的類型是什么
- 取值：
- "number"
- "string"
- "boolean"
- "undefined"
- "object"
- "function" (相比6種數(shù)據(jù)類型，null變成了function)
注意：
- typeof(null) === 'object'; //true
- 檢測(cè)變量存在且初始化過用typeof(somevar) !== "undefined"
數(shù)字
字符串
轉(zhuǎn)義字符
| \\、\'、\" | 由于\、'、"在js中是關(guān)鍵符號(hào)，所以需要轉(zhuǎn)義 |
| \n | 換行符 |
| \r | 回車符 |
| \t | 制表符 |
| \u | \u后面的字符將會(huì)被視為Unicode碼 |
bool值
if(變量)時(shí)，以下值被當(dāng)作false。
- 空字符串
- null
- undefined
- 數(shù)字0
- 數(shù)字NaN
注意：
- 不代表以上值 == false，如null == false; //false
- if('false')、if('0')都為true，因?yàn)榉强兆址?dāng)作true
邏輯運(yùn)算符
優(yōu)先級(jí)：！> && > || ，但為了可讀性，最好加括號(hào)。
惰性求值：前面的滿足，后面不會(huì)執(zhí)行。
比較運(yùn)算符
| == | 相等運(yùn)算符 | null == undefined;//true '1'==true; //true '1'==1; //true | ||
| === | 嚴(yán)格相等運(yùn)算符 | 類型相同&&值相同 | null === undefined; //false 1 === '1'; //false | |
| != | 不相等運(yùn)算符 | NaN!=NaN;//true '1'!=1; //false | ||
| !== | 嚴(yán)格不相等運(yùn)算符 | '1'!==1; //true | ||
| > | 大于運(yùn)算符 | '2'>1 ;//true | ||
| >= | 大于等于運(yùn)算符 | 1>='1'; //true | ||
| < | 小于運(yùn)算符 | 1<'2'; //true | ||
| <= | 小于等于運(yùn)算符 | 1<='1'; //true |
注意：
- 以上表格僅針對(duì)值類型，對(duì)于引用類型，若引用的是同一個(gè)對(duì)象，則相等且嚴(yán)格相等。
- 后四種沒有對(duì)應(yīng)的嚴(yán)格大于、嚴(yán)格大于等于、......。
undefined與null
- 聲明而不初始化一個(gè)變量時(shí)，javascript會(huì)自動(dòng)用undefined值來初始化。
- 當(dāng)與數(shù)字進(jìn)行運(yùn)算時(shí)，undefined返回NaN，null則會(huì)被當(dāng)作0進(jìn)行運(yùn)算
例子：
let somevar;somevar === undefined;//true 1*undefined;//NaN;1*null;//0數(shù)組
數(shù)組為引用類型，typeof([]) === 'object' //true
數(shù)組元素的增刪改查
- 聲明：let a = [2,4,5]
- 增加：a[4]=6;//跳過了a[3]，a[3]將為undefined
- 刪除：delete a[0];//刪除后數(shù)組長(zhǎng)度不變，被刪除地方的值變?yōu)閡ndefined
- 更新：a[4]=7
- 訪問：a[0]
注意：
- delete元素不會(huì)改變數(shù)組長(zhǎng)度，要想改變數(shù)組長(zhǎng)度見第四章的Array的pop和splice方法。
- 字符串也以當(dāng)作數(shù)組用索引訪問每個(gè)字符。
多維數(shù)組
Map（ES6規(guī)范）
- 存在必要：JavaScript中的{}的鍵只能是字符串，若要以其他數(shù)據(jù)類型(包括引用類型)為鍵則可以用到map。
初始化：
let m1 = new Map(); // 空Map let m2 = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);- 操作：
|屬性/方法|作用|
|---|---|
|size|返回成員數(shù)量|
|clear()|清空所有成員，無返回值|
|has(key)|判斷是否存在指定成員，返回值為 true / false|
|get(key)|獲取指定成員的值，如不存在則返回 undefined|
|set(key, value)|為key設(shè)置鍵值，如已經(jīng)存在該key則更新，否則添加新元素，返回值是實(shí)例本身|
|delete(key)|刪除key的鍵值對(duì)，返回值為 true / false| 注意：map的鍵必須唯一，若加入重復(fù)的鍵，后面的值會(huì)沖掉前面的值。
Set（ES6規(guī)范）
初始化：
let s1 = new Set(); // 空Set let s2 = new Set([1, 2, 3]); // 含1, 2, 3- 操作：
|屬性/方法|作用|
|---|---|
|size|返回成員數(shù)量|
|clear()|清空所有成員，無返回值|
|has(ele)|判斷是否存在指定成員，返回值為 true / false|
|add(ele)|添加元素ele，如果已經(jīng)存在，沒有變動(dòng)，否則添加，返回值是實(shí)例本身|
|delete(ele)|刪除某個(gè)值，返回值為 true / false| 注意：
- Set中的值必須唯一，重復(fù)的會(huì)自動(dòng)保留一個(gè)。（map鍵、set重復(fù)的標(biāo)準(zhǔn)：值類型必須值嚴(yán)格相等，引用類型必須引用同一個(gè)對(duì)象）
- Set沒有數(shù)組那種通過索引取值的方法，只能夠遍歷。
流程控制
條件語(yǔ)句
- if、if else、if else if...else
- switch
- 三元表達(dá)式
循環(huán)語(yǔ)句
- while
- do while
- for
- for in
- for of(es6規(guī)范)
- forEach
注意：for in循環(huán)遍歷鍵，而for of和forEach會(huì)遍歷鍵值。
第三章 函數(shù)
函數(shù)定義
聲明式定義
function func(){} //在全局中，或函數(shù)中的函數(shù)，多用此法定義函數(shù)標(biāo)識(shí)記法
let func = function(){} //函數(shù)當(dāng)作對(duì)象一個(gè)屬性時(shí)，用詞定義法,如下：let student = {name:zhangsan,study:function(){console.write('study hard!');}}
js中函數(shù)也是一種數(shù)據(jù)(應(yīng)該屬于六種數(shù)據(jù)類型的object，雖說typeof為'function',而不是'object')，故命名規(guī)則和變量一樣用駝峰，而不是C#中的帕斯卡。
參數(shù)
arguments：可以通過索引獲取傳過來的所有參數(shù),類似數(shù)組但不是。
function foo(x) {for (let i=0; i<arguments.length; i++) {console.log(arguments[i]);} }rest(ES6規(guī)范)：獲取多余的參數(shù)。
function foo(a, b, ...rest) {console.log('a = ' + a);console.log('b = ' + b);console.log(rest); }foo(1, 2, 3, 4, 5); // 結(jié)果: // a = 1 // b = 2 // Array [ 3, 4, 5 ]foo(1); // 結(jié)果: // a = 1 // b = undefined // Array []
返回值
- 若函數(shù)沒有返回值，默認(rèn)返回undefined。（new 調(diào)用構(gòu)造函數(shù)除外）
內(nèi)建函數(shù)
parseInt()
parseInt('123abc1');//輸出123，遇到第一個(gè)字母或其他非法符號(hào)截?cái)?parseInt('FF',16);//輸出255，第二個(gè)參數(shù)為進(jìn)制 parseInt('0x377');//輸出887，以0x開頭代表16進(jìn)制，無需指定進(jìn)制 parseInt('0377');//輸出377，雖然以0開頭代表八進(jìn)制，但易與十進(jìn)制混淆，所以還是當(dāng)成十進(jìn)制 parseInt('1.258e2')；//125
轉(zhuǎn)換字符串為整數(shù)- parseFloat()
- isNaN()
判斷變量不是數(shù)字不能用a!==NaN,因?yàn)镹aN===NaN返回false，所以只能用isNaN判斷。 isFinite()
isFinite(Infinity);//false isFinite(-Infinity);//false isFinite(1e309);//false，因?yàn)槌隽薺s能表示的最大數(shù)字
表示是否有限，注意Infinity、-Infinity代表正負(fù)無限- encodeURI()
- 存在必要：URL中如/?&等都是關(guān)鍵字符，有特殊含義，若需要他們僅僅作為字符出現(xiàn)，則需要'轉(zhuǎn)義'
- 編碼：一般對(duì)中文、空格編碼，保持 ASCII字母、數(shù)字、~!*()@#$&=:/,;?+' 不變。
- 使用場(chǎng)景：對(duì)整個(gè)url編碼，返回一個(gè)完整格式的url。
- decodeURI()
對(duì)應(yīng)encodeURL的解碼。 - encodeURIComponent()
- 編碼：保留 ASCII字母、數(shù)字、~!*()'，其他字符編碼。
- 使用場(chǎng)景：對(duì)部分url編碼，如queryString中一項(xiàng)參數(shù)的值也是一個(gè)url，則為了轉(zhuǎn)義其中的/?&等關(guān)鍵字，需要先用encodeURIComponent編碼，再與整個(gè)url拼接起來
- encodeURIComponent()
對(duì)應(yīng)encodeURL的解碼。 - escape()、unescape()
**已棄用，用于字符串的編解碼，多用于將中文轉(zhuǎn)義成16進(jìn)制表示 - eval()
- 作用：將一段字符串當(dāng)作js腳本執(zhí)行。
- 缺點(diǎn)：
- 安全性差
- 動(dòng)態(tài)執(zhí)行代碼，效率差
alert()
彈窗，且會(huì)阻塞js線程。
變量作用域
- var聲明的作用域?yàn)楹瘮?shù)體。
- let、const聲明的作用域?yàn)榇罄ㄌ?hào)。
- 函數(shù)內(nèi)不加var、let、const修飾的作用域?yàn)槿帧２贿^，要等到函數(shù)被調(diào)用后變量才會(huì)創(chuàng)建。
- 全局變量也可以通過window.變量名獲取到
變量提升
- 定義：執(zhí)行過程進(jìn)入函數(shù)時(shí)，函數(shù)內(nèi)變量的定義會(huì)提升到函數(shù)開始處。
- 特點(diǎn)：提升定義，賦值不提升。
例子：
let a = 123; function f(){alert(a);let a = 1;alert(a); } f(); //輸出：先彈出'undefined',再?gòu)棾?.解釋：因?yàn)楹瘮?shù)域始終優(yōu)先與全局域，所以全局的123沒作用。上面代碼被等價(jià)的改寫為下面
let a = 123; function f(){let a; //變量會(huì)被提升至此，且js引擎默認(rèn)初始化為undefinedalert(a);a = 1; //賦值不會(huì)提升，只提升了定義alert(a); } f();
匿名函數(shù)
- 一般用來執(zhí)行一次性的函數(shù)，如自執(zhí)行函數(shù)或回調(diào)函數(shù)
- 一般寫成箭頭函數(shù)形式()=>{}。（ES6規(guī)范）
回調(diào)函數(shù)
- 函數(shù)作為一個(gè)參數(shù)傳遞個(gè)另一個(gè)函數(shù)，并在后面這個(gè)函數(shù)中調(diào)用。
即時(shí)函數(shù)（自執(zhí)行函數(shù)）
多用于執(zhí)行一些一次性的或初始化的任務(wù)。
function (name){alert('Hello'+name+'!'); }('dude'); //匿名自執(zhí)行函數(shù)內(nèi)部（私有）函數(shù)
函數(shù)內(nèi)再定義函數(shù)。
function outer(param) {function inner(theinput) {return theinput * 2;}return 'The result is ' + inner(param); }函數(shù)中this指向的坑
坑1：
let xiaoming = {birth: 1990,age: function () {//根據(jù)出生日期獲取xiaoming年齡let y = new Date().getFullYear();return y - this.birth;} };let fn = xiaoming.age;//fn指向了age函數(shù)，fn跟xiaoming沒任何關(guān)系 fn(); //輸出：Uncaught TypeError: Cannot read property 'birth' of undefined //原因：相當(dāng)于window調(diào)用的fn，age中的this.birth就是window.birth.坑2：
'use strict';let xiaoming = {birth: 1990,age: function () {//根據(jù)出生日期獲取xiaoming年齡console.log(this.birth);//這里的this正常的指向xiaoming對(duì)象function getAgeFromBirth() {let y = new Date().getFullYear();return y - this.birth;//嵌套函數(shù)中的this又指向了window}return getAgeFromBirth();} }; xiaoming.age(); //輸出：Uncaught TypeError: Cannot read property 'birth' of undefined //原因：對(duì)象中的嵌套函數(shù)（第二層及以上）中的this指向window，只有直接子級(jí)函數(shù)的this指向該對(duì)象本身。解決辦法：
返回函數(shù)的函數(shù)
function a(){alert('A!');return function(){alert('B!');} } let func = a();//彈出'A' func();//彈出'B' //或者直接如下 a()();//先彈出'A'，后彈出'B'能重寫自己的函數(shù)
function a() {alert('A!');a = function(){alert('B!');}; }a();//彈出'A!'a();//彈出'B!'應(yīng)用場(chǎng)景：瀏覽器兼容性探測(cè)，初始化時(shí)根據(jù)瀏覽器類型，重寫某些方法。
閉包
作用域鏈
私有變量可以訪問自身作用域（var為函數(shù)，let、const為塊）和其外層作用域，就形成了一條作用域鏈。
寫法
用一個(gè)全局變量指向內(nèi)層的函數(shù)，這樣通過這個(gè)全局變量就可以訪問內(nèi)層函數(shù)同級(jí)的變量，突破了作用域鏈。（看著像從外層訪問里層）
函數(shù)所綁定的是作用域本身，而不是在函數(shù)定義時(shí)該作用域中的變量或變量當(dāng)前所返回的值。
若需要綁定(非引用類型)變量當(dāng)前值的快照，則可以通過調(diào)用傳參。因?yàn)楹瘮?shù)傳參是傳的當(dāng)前值的拷貝。
應(yīng)用
getter與setter
//變量寫成局部變量，不可直接訪問。通過getter和setter暴露取值和賦值的接口。 let getValue, setValue; (function() {let secret = 0;getValue = function(){return secret;};setValue = function (v) {if (typeof v === "number") {secret = v;}}; }());getValue();//輸出0 setValue(123); getValue();//輸出123 setValue(false);//false驗(yàn)證失敗，賦值不成功 getValue();//輸出123
通過setter給變量賦值可以加驗(yàn)證。迭代器
第四章 對(duì)象
js中對(duì)象與數(shù)組的區(qū)別
| 數(shù)字 | 數(shù)組 |
| 字符串 | 對(duì)象 |
| 任意類型 | map |
在一些程序語(yǔ)言中，通常會(huì)存在兩種不同的數(shù)組形式。
js中數(shù)組表示索引型數(shù)組，對(duì)象表示關(guān)聯(lián)型數(shù)組。
對(duì)象聲明和訪問
聲明
1.文本標(biāo)識(shí)法
let obj = {breed: 'Turtle',occupation: 'Ninja' };對(duì)象的屬性名若不符合變量命名規(guī)范，則屬性名需要加引號(hào)。
let obj = {'this':'abc','123':123 }2.構(gòu)造函數(shù)
function Hero() {this.occupation = 'Ninja'; } let hero = new Hero();- 構(gòu)造函數(shù)中無需寫return，自動(dòng)返回this。若顯式return了一個(gè)object,則以顯示return的為準(zhǔn)。
- 構(gòu)造函數(shù)首字母大寫。
屬性的訪問
1.通過變量名.屬性名訪問
hero.occupation;2.通過變量名[屬性名]訪問
hero['occupation'];此種訪問有兩種使用場(chǎng)景：
屬性的增刪改
增：hero.name = 'zhangsan';
改：hero.name = 'lisi';
刪：delete hero.name;
全局對(duì)象
瀏覽器環(huán)境中，全局對(duì)象為window。
調(diào)用全局變量可以 a 或 window.a 或 this.a 。
constructor屬性
指向?qū)嵗瘯r(shí)所用的構(gòu)造函數(shù)。若用文本標(biāo)識(shí)法創(chuàng)建對(duì)象，則它的constructor指向Object()。
h2.constructor; //輸出 //function Hero(name){ // this.name = name; //} let o = {}; o.constructor; //輸出 function Object(){[native code]}instanceof操作符
用于判斷某個(gè)對(duì)象是否由某個(gè)指定的構(gòu)造器或其父級(jí)構(gòu)造器所創(chuàng)建。
h instanceof Hero;//true h instanceof Object;//true對(duì)象作為參數(shù)傳遞
- 對(duì)象類型的以引用類型傳遞，引用同一份。
- 值類型拷貝一份再傳遞。
比較對(duì)象
當(dāng)且僅當(dāng)倆引用指向同一對(duì)象時(shí)，倆對(duì)象相等且嚴(yán)格相等。
let fido = {breed: 'dog'}; let benji = {breed: 'dog'};fido == benji;//輸出false內(nèi)建對(duì)象
內(nèi)建對(duì)象大致分三類。
Object
Object是所有對(duì)象的父級(jí)對(duì)象。
let o = {}和let o = new Object()等價(jià)。
Object含以下三個(gè)內(nèi)建屬性:
Array
數(shù)組也是一種對(duì)象。
let a = []; typeof a;//Object a instanceof Object;//true相比對(duì)象的特殊之處
length屬性
length屬性會(huì)隨著數(shù)字鍵名的數(shù)量而更新，而忽略非數(shù)字鍵名屬性。
a[0] = 0;a.prop = 2;//非數(shù)字鍵名不會(huì)增加lengtha.length;//輸出1a;//輸出[0,prop:2];- 當(dāng)手動(dòng)設(shè)置length的值大于數(shù)組中元素?cái)?shù)量時(shí)，剩下的部分會(huì)被undefined填充。
當(dāng)手動(dòng)設(shè)置length的值小于數(shù)組中的元素?cái)?shù)量時(shí)，多出的部分元素被移除。
一些內(nèi)建方法
原素組會(huì)改變的方法：
- push————在數(shù)組末端添加一個(gè)新元素，并返回改變后數(shù)組的長(zhǎng)度
- pop————移除數(shù)組末端的一個(gè)元素，返回該元素
- unshift————在數(shù)組頭部添加若干元素，返回?cái)?shù)組長(zhǎng)度
- shift————移除數(shù)組頭部的一個(gè)元素，返回該移除的元素
- sort————排序，返回排序后的數(shù)組。（原數(shù)組也會(huì)變）
- reverse————數(shù)組元素順序翻轉(zhuǎn)過來
- indexOf————獲取數(shù)組中某元素的索引（若為引用類型，必須為同一份引用）
splice————萬能改變數(shù)組的方法，截取數(shù)組同時(shí)填充若干元素，返回截取后的數(shù)組。
let a = [1,3,5,7,9]; let b = a.splice(1,2,100,101,102);//第二個(gè)參數(shù)為截取長(zhǎng)度，與slice的第二個(gè)參數(shù)不同 console.log(a);//[1,100,101,102,7,9] console.log(b);//[3,5]
原數(shù)組不受影響，返回一個(gè)改變后的數(shù)組的方法：
- join————用某個(gè)字符串連接數(shù)組中的每個(gè)元素。（split為把字符串切割成數(shù)組）
- slice————截取數(shù)組，兩參數(shù)為截取起止索引，包括開始，不包括結(jié)束索引
- concat————合并兩個(gè)數(shù)組返回
Function
函數(shù)對(duì)象的內(nèi)建屬性：
- constructor————繼承自O(shè)bject（因?yàn)閖s中函數(shù)也是一種對(duì)象），其引用Function()這個(gè)構(gòu)造函數(shù)
- length————記錄該函數(shù)聲明時(shí)的參數(shù)數(shù)量
- prototype
- 每個(gè)函數(shù)的prototype屬性都指向一個(gè)對(duì)象
- 只有在函數(shù)是構(gòu)造函數(shù)是才發(fā)揮作用
- 該函數(shù)創(chuàng)建的所有對(duì)象都會(huì)持有一個(gè)該prototype 屬性的引用，并可以將其當(dāng)做自身的屬性來使用。
call和apply
call和apply可以指定方法的執(zhí)行上下文，從而可以實(shí)現(xiàn)一個(gè)對(duì)象去"借用"另一個(gè)對(duì)象的方法為己所用。
例如，arguments對(duì)象沒有數(shù)組的內(nèi)建方法，可以像如下方式調(diào)用
通過該方法可以實(shí)現(xiàn)子類對(duì)象中調(diào)用父類對(duì)象中的方法
例如：Array繼承自O(shè)bject，Array中重寫了Object中的toString方法，但在Array中想調(diào)用Object中的方法時(shí)可以O(shè)bject.prototype.toString.call([])
apply和call的唯一區(qū)別是，apply傳參放在一個(gè)數(shù)組里。
Boolean
作用：
其他幾種基本數(shù)據(jù)類型也有以上功能
五個(gè)基本類型數(shù)據(jù)都有一個(gè)對(duì)應(yīng)的Object類型封裝。
('abcdefg').slice(0,2)會(huì)發(fā)生裝箱拆箱。
因?yàn)閟lice方法在String類型對(duì)象上，所以會(huì)先把值類型轉(zhuǎn)換為引用類型，得到結(jié)果后再轉(zhuǎn)換回值類型。
Number
作用與Boolean相同，但增加了一些屬性和方法。
把Number當(dāng)成一個(gè)對(duì)象，該對(duì)象里有以下屬性：
- Number.MAX_VALUE————最大值
- Number.MIN_VALUE————最小值
- Number.POSITIVE_INFINITY————正無窮
- Number.NEGATIVE_INFINITY————負(fù)無窮
- Number.NaN————NaN
把Number當(dāng)成構(gòu)造函數(shù)，該構(gòu)造函數(shù)prototype指向?qū)ο笊嫌幸韵路椒?#xff1a;
- toFixed————保留小數(shù)位
- toPrecision————把數(shù)字格式化為指定的長(zhǎng)度
- toExponential————轉(zhuǎn)化位指數(shù)寫法
toString————重寫了object的toString,有一個(gè)可選的radix參數(shù)(默認(rèn)10)
(255).toString(16);//'ff'
String
- toUpperCase————轉(zhuǎn)大寫
- toLowerCasse————轉(zhuǎn)小寫
- charAt————返回指定位置的字符，位置不存在時(shí)返回空字符串
- indexOf————返回第一個(gè)匹配的位置
- lastIndexOf————返回最后一個(gè)匹配的位置
- slice————根據(jù)起止索引截取部分字符串，不包括截止索引，若截止索引為負(fù)值，則相當(dāng)于與字符串長(zhǎng)度相加后的值
- subString————與slice唯一區(qū)別是對(duì)截止索引為負(fù)值時(shí)，subString會(huì)當(dāng)作0處理
- split—————根據(jù)所傳遞的分割字符串，將目標(biāo)字符串分割成一個(gè)數(shù)組
- concat————連接兩個(gè)字符串返回
Math
Math用法與上面不同，不能new。
常用屬性：
- Math.PI————常用數(shù)字π
- Math.E————?dú)W拉常數(shù)e
- Math.SQRT2————2的平方根
- Math.LN2————2的自然對(duì)數(shù)
- Math.LN10————10的自然對(duì)數(shù)
常用方法：
- Math.random————獲取0到1之間的某個(gè)數(shù)
- Math.floor————向下取整
- Math.ceil————向上取整
- Math.round————四舍五入
- Math.max————獲取最大值
- Math.min————獲取最小值
- Math.pow————指數(shù)運(yùn)算
- Math.sqrt————求平方根
- Math.sin、Math.cos————正弦、余弦
Date
用于創(chuàng)建Date對(duì)象的構(gòu)造器函數(shù)，可以傳遞以下幾種參數(shù)
- 無參數(shù)，默認(rèn)返回當(dāng)前時(shí)間
- 一個(gè)用于表現(xiàn)日期的字符串
- 分開傳遞年、日、月、時(shí)間等值
- 一個(gè)timestamp值
注意：js中的月份是從0開始，0表示一月，1表示二月...
常用方法
var now = new Date(); now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST) now.getFullYear(); // 2015, 年份 now.getMonth(); // 5, 月份，注意月份范圍是0~11，5表示六月 now.getDate(); // 24, 表示24號(hào) now.getDay(); // 3, 表示星期三 now.getHours(); // 19, 24小時(shí)制 now.getMinutes(); // 49, 分鐘 now.getSeconds(); // 22, 秒 now.getMilliseconds(); // 875, 毫秒數(shù) now.getTime(); // 1435146562875, 以number形式表示的時(shí)間戳同時(shí)有相應(yīng)的set方法設(shè)置值。
注意：getDay表示獲取星期，getDate才表示獲取日
RegExp
寫法：
組成部分：
修飾符：
- i————ignoreCase,忽略大小寫
- g————global,找出所有的匹配
- m————跨行搜索
RegExp對(duì)象的方法：
- test————返回一個(gè)布爾值
- exec————返回一個(gè)匹配到的數(shù)組，若加g修飾符，數(shù)組可能會(huì)有多個(gè)元素，不加則最多只有一個(gè)
字符串中使用正則的方法：
- match————返回包含匹配內(nèi)容的數(shù)組
- search————返回第一個(gè)匹配內(nèi)容所在位置
- replace————將匹配的文本替換為指定的字符串
- split————根據(jù)指定的正則表達(dá)式將字符串分割成若干個(gè)數(shù)組元素
replace
s.replace(/[A-z]/,'');//返回elloJavaScriptWorld，替換首個(gè)大寫字母為空 s.replace(/[A-Z]/g,'')；//返回elloavacriptorld，替換所有大寫字母為空 s.replace(/[A-Z]/g,"_$&")；//返回_Hello_Java_Script_World，用$&代替所匹配的文本 s.replace(/([A-Z])/g, "_$1");//返回_Hello_Java_Script_World，若正則表達(dá)式中分了組（即帶括號(hào)），那么可以用$1表示分組中的第一組，$2表示第二組，依此類推注意：replace中第一個(gè)參數(shù)不是正則而是字符串時(shí)，只會(huì)替換掉第一個(gè)。這是與其他語(yǔ)言不同的。
"pool".replace('o','*');//返回"p*ol" "pool".replace('/o/g','*');//返回"p**l"回調(diào)式替換
function replaceCallback(match){return ""+match.toLowerCase(); }s.replace(/[A-Z]/g,replaceCallback);//輸出_hello_java_script_world該回調(diào)函數(shù)接受一系列參數(shù)（以上示例僅用到了第一個(gè)參數(shù)）
- 首參數(shù)是所匹配的內(nèi)容
- 尾參數(shù)是被搜索的字符串
- 倒數(shù)第二個(gè)參數(shù)是匹配內(nèi)容所在位置
- 剩下的參數(shù)是分組所匹配的字符串
Error對(duì)象
包括一些派生的ReferenceError、RangeError、EvalError、SyntaxError、TypeError、URIError。
Error類對(duì)象都有兩個(gè)屬性:
- name————構(gòu)造當(dāng)前Error對(duì)象的構(gòu)造器名稱
- message————出錯(cuò)的詳細(xì)信息描述
IE瀏覽器跟Chrome、FireFox拋出異常的name和message不同，可以自定義拋出一個(gè)匿名對(duì)象。
throw {name: "MyError",message: "OMG! Something terrible has happened" }第五章 原型
js中的繼承就是基于原型的。
原型屬性
函數(shù)也是對(duì)象，每個(gè)函數(shù)上都有一個(gè)prototype屬性。
function foo(a,b){return a*b; }typeof foo.prototype;//輸出"object"函數(shù)的原型屬性只有在函數(shù)當(dāng)作構(gòu)造函數(shù)使用（即使用new調(diào)用）時(shí)才起作用。
原型對(duì)象上的屬性和方法
- 原型對(duì)象上的屬性和方法無論實(shí)例化多少個(gè)對(duì)象都只存在一份。
- 如果實(shí)例屬性名和原型對(duì)象上的屬性名相同（或方法名相同，因?yàn)閖s中不存在方法重載），則實(shí)例屬性優(yōu)先級(jí)高。
- 原型對(duì)象上的方法也可以通過this.屬性名訪問實(shí)例屬性值和原型對(duì)象上的屬性。
原型鏈
每個(gè)對(duì)象都會(huì)有一個(gè)構(gòu)造器，而原型本身也是一個(gè)對(duì)象，這意味著它必然也有一個(gè)構(gòu)造器，而這個(gè)構(gòu)造器又會(huì)有自己的原型。于是這種結(jié)構(gòu)可能會(huì)一直不斷地持續(xù)下去，并最終形成原型鏈。
枚舉屬性
- 內(nèi)建對(duì)象.propertyIsEnumerable('屬性名||方法名||原型鏈上的屬性名||原型鏈上的方法名')返回false。
- 對(duì)象.propertyIsEnumerable('原型鏈上的屬性名||原型鏈上的方法名')返回false。
- for in 會(huì)例舉出實(shí)例對(duì)象和其原型鏈上的屬性或方法。但不會(huì)例舉內(nèi)建對(duì)象的原型屬性。如Object的原型對(duì)象的屬性和方法。
isPrototypeOf()
判斷一個(gè)對(duì)象是否是另一個(gè)對(duì)象的原型對(duì)象
let monkey = {hair:true,feeds:'bananas',breathes:'air' };function Human(name){this.name = name; } Human.prototype = monkey;let george = new Human('George'); monkey.isPrototypeOf(george);//返回true獲取一個(gè)對(duì)象的原型對(duì)象
Object.getPrototypeOf(george);//返回monkey對(duì)象 george.constructor.prototype;//這樣也可以獲取__proto__
生成一個(gè)對(duì)象時(shí)，js引擎自動(dòng)在對(duì)象上加了一個(gè)__proto__屬性，指向該對(duì)象的原型對(duì)象。然后原型對(duì)象也是對(duì)象，也有一個(gè)__proto__屬性指向一個(gè)原型對(duì)象...如此下去，便形成了一條原型鏈。
__proto__只能在學(xué)習(xí)或調(diào)試環(huán)境下使用
注意：以上為對(duì)象層面的原型鏈。new一個(gè)對(duì)象時(shí)，js引擎把構(gòu)造函數(shù)、原型對(duì)象層面的鏈狀關(guān)系轉(zhuǎn)化為對(duì)象層面的原型鏈。構(gòu)造原型對(duì)象和構(gòu)造函數(shù)之間的鏈狀關(guān)系才是我們所需編寫的代碼。
原型作用
原型陷阱
- 對(duì)原型對(duì)象執(zhí)行完全替換時(shí)，可能會(huì)出發(fā)原型鏈中的某種異常。
- 在對(duì)象生成后才完全替換原型對(duì)象。
此種情況下，先前生成的對(duì)象的__proto__還是鏈接著原先的原型對(duì)象。 - 完全替換原型對(duì)象后生成對(duì)象。
此種情況下，__proto__鏈接著被替換掉的原型對(duì)象。 - prototype.constructor屬性是不可靠的。
最佳實(shí)踐：當(dāng)我們重寫對(duì)象的prototype時(shí)，需要重置相應(yīng)的constructor屬性。
第六章 繼承
js引擎所做的：查找對(duì)象屬性時(shí)，先在對(duì)象自身屬性中查找，再沿著__proto__鏈著的對(duì)象上查找。
我們所需做的：通過構(gòu)造函數(shù)和原型對(duì)象構(gòu)建鏈接關(guān)系。（new一個(gè)對(duì)象時(shí)，js引擎把轉(zhuǎn)化為通過__proto__把對(duì)象之間連接起來）
實(shí)現(xiàn)方法1
Child.prototype = new Parent(); Child.prototype.constructor = Child;//重置原型對(duì)象上的constructor屬性，不然就指向了Parent缺點(diǎn)：該方法不僅繼承了父類的實(shí)例屬性，還繼承了父類的原型屬性
實(shí)現(xiàn)方法2
function extend(Child,Parent){let F = function(){};F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child; }該方法只會(huì)繼承父類的原型屬性，不會(huì)繼承父類的實(shí)例屬性。
ES6中繼承寫法
ES6中引入了class關(guān)鍵字，但并非js中有了類，只是一個(gè)實(shí)現(xiàn)繼承的語(yǔ)法糖，實(shí)際還是通過原型實(shí)現(xiàn)繼承。
class Student {constructor(name) {this.name = name;//實(shí)例屬性、方法放在constructor中}hello() { //原型屬性、方法放在外面alert('Hello, ' + this.name + '!');} }class PrimaryStudent extends Student { //extends關(guān)鍵字代表繼承自誰(shuí)constructor(name, grade) {super(name); // 記得用super調(diào)用父類的構(gòu)造方法!this.grade = grade;}myGrade() {alert('I am at grade ' + this.grade);} }第七章 瀏覽器環(huán)境
運(yùn)行javascript代碼需要宿主環(huán)境，一般是瀏覽器環(huán)境。
BOM（瀏覽器對(duì)象模型）
BOM（瀏覽器對(duì)象模型）是一個(gè)用于訪問瀏覽器和計(jì)算機(jī)屏幕的對(duì)象集合。可以通過window訪問這些對(duì)象。
window對(duì)象
window對(duì)象是瀏覽器中的全局對(duì)象，所有的全局變量和函數(shù)都可以通過window對(duì)象的屬性訪問。
window.navigator
navigator是一個(gè)反應(yīng)瀏覽器及其功能信息的對(duì)象。如navigator.userAgent可以識(shí)別不同的瀏覽器。
window.location
location是一個(gè)用于存儲(chǔ)當(dāng)前載入頁(yè)面url信息的對(duì)象。
屬性：
//若果當(dāng)前頁(yè)面的url為http://search.phpied.com:8080/search?p=java&what=script#resultsfor(var i in location) {if(typeof location[i] === “string”) {console.log(i + ' = "' + location[i] + '"');} } //輸出： //href = "http://search.phpied.com:8080/search?q=java&what=script#results" //hash = "#results" //host = "search.phpied.com:8080" //hostname = "search.phpied.com" //pathname = "/search" //port = "8080" //protocol = "http:" //search = "?q=java&what=script"注：location的href中除了hash變化不會(huì)引起向服務(wù)端發(fā)起請(qǐng)求外，其他部分變化都會(huì)重新向服務(wù)端發(fā)起請(qǐng)求。
方法：
- reload()————重新加載當(dāng)前頁(yè)面
- assign()————導(dǎo)航到其他頁(yè)面
- replace()————也是導(dǎo)航到其他頁(yè)面，但是不會(huì)在瀏覽器的歷史記錄表中留下記錄
window.history
window.histoty屬性允許我們以有限的權(quán)限操作同一個(gè)瀏覽器會(huì)話中的已訪問頁(yè)面。
- history.length————查看用戶在這之前訪問了多少頁(yè)面
- histoty.forward()————前進(jìn)
- history.back()————后退
- history.go(-1)————后退一步，同理可以傳其他正、負(fù)、0數(shù)，實(shí)現(xiàn)前進(jìn)、后退、重載當(dāng)前頁(yè)面
H5中history的API
作用：讓無跳轉(zhuǎn)的單站點(diǎn)也可以將它的各個(gè)狀態(tài)保存為瀏覽器的多條歷史記錄。當(dāng)通過歷史記錄重新加載站點(diǎn)時(shí)，站點(diǎn)可以直接加載到對(duì)應(yīng)的狀態(tài)。
API：
- history.pushState()
完整是history.pushState(stateObject, title, url)，包括三個(gè)參數(shù)。
第一個(gè)為狀態(tài)參數(shù)，存放需要記錄的狀態(tài)；第二個(gè)是標(biāo)題，目前瀏覽器忽略它，傳空字符串；第三個(gè)為當(dāng)前狀態(tài)對(duì)應(yīng)的url地址。 - history.repalceState()
與pushState唯一區(qū)別是不會(huì)新生成歷史記錄，而是將當(dāng)前歷史記錄替換掉。 window.onpopstate
//假如當(dāng)前網(wǎng)頁(yè)地址為http://example.com/example.html,則運(yùn)行下述代碼后: window.onpopstate = function(event) {alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; //綁定事件處理函數(shù) history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一個(gè)歷史記錄條目 http://example.com/example.html?page=1,條目索引為1 history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一個(gè)歷史記錄條目 http://example.com/example.html?page=2,條目索引為2 history.replaceState({page: 3}, "title 3", "?page=3"); //修改當(dāng)前激活的歷史記錄條目 http://ex..?page=2 變?yōu)?http://ex..?page=3,條目索引為3 history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // 彈出 "location: http://example.com/example.html, state: null history.go(2); // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}
頁(yè)面前進(jìn)后退時(shí)，若當(dāng)前url有對(duì)應(yīng)的stateObject則觸發(fā)事件，并在參數(shù)中包含stateObject。
window.frames
window.frames屬性是當(dāng)前頁(yè)面中所有框架的集合。
frames中的每個(gè)元素都包含了一個(gè)頁(yè)面，都有各自的window全局對(duì)象。
window.screen
screen所提供的是瀏覽器以外的環(huán)境信息。
- screen.colorDepth————當(dāng)前顯示器的色位
- screen.width————屏幕寬
- screen.height————屏幕高
- screen.availWith————屏幕可用寬（與width不同之處是availWith不包括任務(wù)欄）
- screen.availHeight————屏幕可用高（不包括任務(wù)欄）
window.open/window.close
打開窗口、關(guān)閉窗口
window.moveTo()、window.moveBy()、window.resizeTo()、window.resizeBy()
注：Chrome、edge中測(cè)試均無反應(yīng)，已廢棄。
window.alert()、window.confirm()、window.prompt()
- window.alert()————彈出提示框
- window.confirm()————彈出確定框，可以選擇確定或取消，相應(yīng)返回true或false
- window.prompt()————彈出帶輸入框的窗口，輸入后點(diǎn)確定，返回所輸入的文本
window.setTimeout()、window.setInterval()
setTimeout:在一定時(shí)間后執(zhí)行
function boo(){console.log('boo!'); }let id = setTimeout(boo,2000);//2秒后執(zhí)行boo方法 clearTimeout(id);//根據(jù)id取消計(jì)時(shí)器setInterval:每隔多少毫秒執(zhí)行一次
let id = setInterval(boo,2000);//每隔2秒執(zhí)行一次 clearInterval(id);//根據(jù)id取消計(jì)時(shí)器window.document
DOM(文檔對(duì)象模型)
DOM是一種將XML或HTML文檔解析成樹形節(jié)點(diǎn)的方法。通過DOM的方法與屬性，我們可以訪問到頁(yè)面中的任何元素，并進(jìn)行元素的修改刪除及添加操作。
基于DOM Level1用于解析所有XML文檔的那部分稱為Core DOM,在Core DOM上進(jìn)行擴(kuò)展的那部分稱為HTML DOM。
DOM節(jié)點(diǎn)的訪問
方法一 索引訪問法
- nodeType————節(jié)點(diǎn)類型，常用的1（元素）、2（屬性）、3（文本）...
- nodeName————節(jié)點(diǎn)名稱，對(duì)HTML標(biāo)簽來說，一般就是標(biāo)簽名（即tagName屬性），對(duì)文本則是#text
- nodeValue————節(jié)點(diǎn)值，對(duì)文本節(jié)點(diǎn)來說，值就是實(shí)際文本。
document表示當(dāng)前所訪問的文檔。
document.documentElement表示document上的HTML節(jié)點(diǎn)。
document.documentElement（即HTML節(jié)點(diǎn)）有三個(gè)，即head元素、body元素，以及兩者之間的空白（空白默認(rèn)為文本節(jié)點(diǎn)）。
- 節(jié)點(diǎn)相關(guān)：
- hasChildNodes()————判斷某節(jié)點(diǎn)是否包含子節(jié)點(diǎn)
- childNodes————NodeList類型的子節(jié)點(diǎn)集合,通過索引可以訪問到子節(jié)點(diǎn)
- parentNode————某節(jié)點(diǎn)的父節(jié)點(diǎn)
- 屬性相關(guān)：
- hasAttributes()————檢查元素是否存在屬性
- attributes————屬性集合，通過索引訪問
- getAttribute()————獲取對(duì)應(yīng)屬性名的值
- 直接在節(jié)點(diǎn)后面.屬性名，如節(jié)點(diǎn)對(duì)象.id訪問id屬性的值，節(jié)點(diǎn)對(duì)象.className訪問class屬性的值
- 節(jié)點(diǎn)中的內(nèi)容相關(guān)：
- textContent————節(jié)點(diǎn)中的文本
- innerHTML————節(jié)點(diǎn)中的html的字符串
若一段HTML結(jié)構(gòu)如下：
<html><head></head><!--這中間雖然什么都沒有，但其實(shí)還是有一個(gè)text節(jié)點(diǎn)--><body><p class="opener">first paragraph</p><p><em>second</em> paragraph</p><p id="closer">final</p><!-- and that's about it --></body> </html> document.documentElement.childNodes[1];//#text，因?yàn)閔ead和body之間存在一個(gè)空白，該空白為text節(jié)點(diǎn) document.documentElement.childNodes[1].parentNode;//<html>...</html> let bd = document.documentElement.childNodes[2]; bd.childNodes.length;//9,因?yàn)樗膫€(gè)節(jié)點(diǎn)（包括注釋）之間、子節(jié)點(diǎn)和父節(jié)點(diǎn)之間一共存在5個(gè)空白的text節(jié)點(diǎn)，所以一共9個(gè)節(jié)點(diǎn)bd.childNodes[1].hasAttributes();//true，第一個(gè)標(biāo)簽有個(gè)class屬性。注意索引0是空白text，索引1才是p標(biāo)簽 bd.childNodes[1].attributes.length;//1 bd.childNodes[1].attributes[0].nodeName;//'class' bd.childNodes[1].attributes[0].nodeValue;//'opener' bd.childNodes[1].attributes['class'].nodeValue;//'opener' bd.childNodes[1].getAttribute('class');//'opener' bd.childNodes[1].className;//'opener' bd.childNodes[1].nodeName;//'p' bd.childNodes[1].textContent;//'first paragraph' bd.childNodes[1].innerHTML;//'first paragraph' bd.childNodes[3].textContent;//'second paragraph' bd.childNodes[3].innerHTML;//'<em>second</em> paragraph' bd.childNodes[1].childNodes[0].nodeValue;//'first paragraph'方法二 快捷訪問法
索引法的問題：
- 訪問的節(jié)點(diǎn)層次很深時(shí)，需要寫很長(zhǎng)的代碼
- 節(jié)點(diǎn)之間存在空白text節(jié)點(diǎn)，導(dǎo)致計(jì)算索引很麻煩
快捷方法：
- getElement系列：
- getElementsByTagName()————以標(biāo)簽名為參數(shù)，返回當(dāng)前html頁(yè)面中所有匹配該標(biāo)簽名的元素集合
- getElementsByClassName()————以類名為參數(shù)，返回所有該類名的元素集合
- getElementById()————以id為參數(shù)返回一個(gè)element
- getElementsByName()————以name屬性為參數(shù)，返回所有該name屬性的元素集合
- querySelector系列
- querySlector()————通過css選擇器返回第一個(gè)元素
- querySelectorAll————通過css先選擇器返回所有元素
注：getElement系列除了getElementById返回一個(gè)Element外，其他都返回一個(gè)HTMLCollection集合，HTMLCollection是動(dòng)態(tài)的，會(huì)隨著文檔樹的變化動(dòng)態(tài)更新。
querySelector系列返回一個(gè)NodeList，NodeList是靜態(tài)的，獲取后，文檔樹變化不會(huì)影響NodeList.
body雖然說嵌套在html標(biāo)簽里，但document.body就可以訪問到body，而不用document.documentElement.body。
- nextSibling————下一個(gè)相鄰節(jié)點(diǎn)
- previousSibling————上一個(gè)相鄰節(jié)點(diǎn)
- firstChild————第一個(gè)子節(jié)點(diǎn)，一般為空白text
- lastChild————最后一個(gè)子節(jié)點(diǎn)，一般為空白text
DOM節(jié)點(diǎn)的修改
- innerHTML————修改元素里的HTML
- nodeValue————修改元素的內(nèi)容，text類型元素則為文本值
- style————修改元素的樣式
DOM節(jié)點(diǎn)的新建
- createElement()————新建元素
- createTextNode()————新建文本節(jié)點(diǎn)
- cloneNode()————拷貝節(jié)點(diǎn)，參數(shù)傳false則為淺拷貝，傳true則為深拷貝
- appendChild()————添加到最后
- insertBefore()————插入到某元素前面
- replaceChild()————替換某元素
注意：后三個(gè)方法調(diào)用方是父容器節(jié)點(diǎn)。
let p = document.createElement('p'); p.innerHTML = '<em>yet</em> another'; p.style.border = '2px dotted blue'; document.body.appendChild(p); let list=document.getElementById("myList") list.insertBefore(p,list.childNodes[0]);//第一個(gè)參數(shù)為新節(jié)點(diǎn)，第二個(gè)參數(shù)為插入誰(shuí)的前面item.replaceChild(p,list.childNodes[0]);//第一個(gè)參數(shù)為替換者，第二個(gè)為被替換者document.body.appendChild(p.cloneNode(false));//將只會(huì)拷貝一個(gè)p標(biāo)簽，相當(dāng)于document.body.appendChild(document.createElement('p')); document.body.appendChild(p.cloneNode(true));//p及p標(biāo)簽里的子元素都將拷貝DOM節(jié)點(diǎn)的移除
- removeChild()————移除節(jié)點(diǎn)
- replaceChild()————替換節(jié)點(diǎn)
- innerHTML='' ————把innerHTML置為空字符串
只適用于HTML的DOM對(duì)象
以上總結(jié)的都是屬于DOM Level 0(或叫Core DOM)，既適用于XML又適用于HTML。以下的只適用于HTML。
- document.body————HTML中的body元素
- document.images————當(dāng)前頁(yè)中所有圖片的集合，等價(jià)于Core DOM中的document.getElementsByTagName('img')
- document.links————包含所有<a href='...'/>的集合
- document.anchors—————包含所有<a name='...'>的集合
document.forms————包含所有表單的集合
document.write()————在頁(yè)面載入時(shí)插入一些HTML元素，當(dāng)載入完成后調(diào)用則會(huì)覆蓋整個(gè)HTML。一般沒什么用。
- document.cookie————獲取或設(shè)置cookie
- document.title————獲取或設(shè)置title
- document.referrer————記錄前面訪問的頁(yè)面的URL，同HTTP 頭信息中的Referer
- document.domain————獲取或設(shè)置當(dāng)前域名，注意設(shè)置只能比真實(shí)域名更簡(jiǎn)短，如www.yahoo.com改為yahoo.com
document.location————同window.location
事件
注冊(cè)事件三種方式
1.內(nèi)聯(lián)HTML屬性法
<div onclick="alert('Ouch!')">click me</div>缺點(diǎn)：Javascript代碼和HTML耦合在一起。
2.元素屬性法
<div id="my-div">click</div> let myelement = document.getElementById('my-div'); myelement.onclick = function() { alert('Ouch!'); }缺點(diǎn)：只能指定一個(gè)事件函數(shù)。
3.事件監(jiān)聽器法
<p id="closer">final</p> let mypara = document.getElementById('closer'); mypara.addEventListener('click', function(){alert('Boo!')}, false); mypara.addEventListener('click', console.log.bind(console), false);移除某個(gè)監(jiān)聽器：
function func(){alert('Woo'); } mypara.addEventListener('click', func, false); mypara.removeEventListener('click', func, false);注意：移除某個(gè)監(jiān)聽器時(shí)，傳遞的方法參數(shù)必須是同一個(gè)方法的引用，即使寫一個(gè)完全相同的方法爺不行。故需要移除的監(jiān)聽器在注冊(cè)時(shí)不能用匿名方法。
捕捉法和冒泡法
addEventListner方法的第三個(gè)參數(shù)，當(dāng)置為true時(shí)為捕捉法，默認(rèn)為false即冒泡法。
<body><ul><li><a href="http://phpied.com">my blog</a></li></ul> </body>單擊鏈接
- 事件捕捉————單機(jī)首先發(fā)生在document上，然后依次傳遞給body、列表、列表項(xiàng)，并最終到達(dá)該鏈接，稱為捕捉法。
- 事件冒泡————單機(jī)首先發(fā)生在鏈接上，然后逐層向上冒泡，直到document對(duì)象，稱為冒泡法
按照DOM2的規(guī)定，事件傳播分三階段：先捕捉標(biāo)簽，然后到達(dá)標(biāo)簽，再冒泡。
阻斷冒泡
在最里層的處理器中加e.stopPropagation()，就不會(huì)觸發(fā)上層父容器的事件。
function paraHandler(e){ alert('clicked paragraph'); e.stopPropagation(); }防止默認(rèn)行為
在瀏覽器中某些元素的事件有一些預(yù)定義行為，例如，單機(jī)鏈接會(huì)載入另一個(gè)頁(yè)面。可以在事件處理器中加e.preventDefault()來阻斷默認(rèn)行為。
// 在點(diǎn)擊所有鏈接前詢問是否導(dǎo)航至目標(biāo)鏈接，若選擇否，則不導(dǎo)航 let all_links = document.getElementsByTagName('a'); for (let i = 0; i < all_links.length; i++) {all_links[i].addEventListener('click',function(e){if (!confirm('Are you sure you want to follow this link?')){e.preventDefault();}},false // don't use capturing); }事件類型
- 鼠標(biāo)類事件
- 鼠標(biāo)鍵的按下、松開、單擊、雙擊
- 鼠標(biāo)的懸停、移出、拖動(dòng)
- 鍵盤類事件
- 鍵盤鍵的按下、輸入、松開
- 載入/窗口類事件
- 載入（圖片、頁(yè)面或其他組件完成載入操作）、卸載（指用戶離開當(dāng)前頁(yè)面）、卸載之前（由腳本提供的、允許用戶終止卸載的選項(xiàng)）
- 中止（指用戶在IE 中停止頁(yè)面或圖片載入）、錯(cuò)誤（指在IE 發(fā)生了JavaScript錯(cuò)誤或圖片載入失敗）。
- 調(diào)整大小（指瀏覽器窗口大小被重置）、滾動(dòng)（指頁(yè)面進(jìn)行了滾動(dòng)操作）、上下文菜單（即右鍵菜單出現(xiàn)）。
- 表單類事件
- 獲得焦點(diǎn)（指某字段獲得輸入）、失去焦點(diǎn)（指離開該字段）。
- 改變（指改變某字段的值后離開）、選中（指某文本字段中的文本被選中）。
- 重置（指擦除用戶輸入的所有信息）、提交（指發(fā)送表單）。
現(xiàn)代瀏覽器還有dragstart、dragend、drop事件，觸控設(shè)備還有touchstart、touchmove、touchend事件。
XMLHttpRequest對(duì)象
let xhr = new XMLHttpRequest(); xhr.onreadystatechange = myCallback; xhr.open('GET','somefile.text',true); xhr.send('');//若要攜帶參數(shù)則以格式'key=value&key2=value2'fuction myCallback(){if(xhr.readyState<4){return;}if(xhr.status!==200){alert('Error!');return;}alert(xhr.responseText); }轉(zhuǎn)載于:https://www.cnblogs.com/victor-leeson/p/10963802.html
總結(jié)
以上是生活随笔為你收集整理的《javascript面向对象编程指南》读书笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 女程序员做了个梦。。。
- 下一篇： gradle idea java ssm