第一章、引言

1.5 面向?qū)ο蟮某绦蛟O(shè)計(jì)常用概念

對象（名詞）：是指“事物”在程序設(shè)計(jì)語言中的表現(xiàn)形式。
這里的事物可以是任何東西，我們可以看到它們具有某些明確特征，能執(zhí)行某些動(dòng)作。
這些對象特征就叫做屬性（形容詞），動(dòng)作稱之為方法（動(dòng)詞）。

類：實(shí)際上就是對象的設(shè)計(jì)藍(lán)圖或制作配方。類更多的是一種模板，而對象就是在這些模版的基礎(chǔ)上被創(chuàng)建出來的。

封裝：主要闡述對象中包含的內(nèi)容。通常包括：

• 相關(guān)數(shù)據(jù)（用于存儲屬性）
• 基于這些數(shù)據(jù)所能做的事（所能調(diào)用的方法）

聚合：將幾個(gè)現(xiàn)有對象合并成一個(gè)新對象的過程
繼承：實(shí)現(xiàn)代碼重用
多態(tài)：不同對象通過相同的方法調(diào)用來實(shí)現(xiàn)各自行為的能力

第二章、基本數(shù)據(jù)類型、數(shù)組、循環(huán)及條件表達(dá)式

2.3基本數(shù)據(jù)類型

2.3.2 指數(shù)表示法

2e+3表示在數(shù)字2后面加3個(gè)0，即2000

typeof Infinity // number typeof NaN // number typeof null // object null值表示一個(gè)空指針對象

2.3.4 惰性求值

Javascript引擎在一個(gè)邏輯表達(dá)式中遇到一個(gè)非布爾類型操作數(shù)，
那么該操作數(shù)的值就會成為該表達(dá)式返回的結(jié)果。

true || "something" //true true && "something" //"something"

2.9 練習(xí)題

var s = "1s"; //隱式轉(zhuǎn)換Number()用于任何數(shù)據(jù)類型 s++ //NaN 10 % "0" //NaN 如果被除數(shù)是有限大的數(shù)值而除數(shù)是零，則結(jié)果是NaN //乘法口訣程序代碼 for(var i=1;i<10;i++){for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+i*j+" ");}document.write("<br>"); }

第三章、函數(shù)

3.1 函數(shù)

3.1.2 函數(shù)參數(shù)

函數(shù)內(nèi)部都有一個(gè)內(nèi)建的arguments數(shù)組，能返回函數(shù)所接收的所有參數(shù)

function sumOnSteroids(){var i,res = 0;for(i = 0; i < arguments.length; i++){res += arguments[i];}return res; } sumOnSteroids(1,2,3,4,5,6); //21

3.3 函數(shù)的作用域

var a = 123; function f(){alert(a); //undefined 這是因?yàn)楹瘮?shù)域優(yōu)先于全局域var a = 1;alert(a); //1 } f();

3.4.2 回調(diào)函數(shù)

當(dāng)我們將函數(shù)B傳遞給函數(shù)A，并由A來執(zhí)行B時(shí)，B就成了一個(gè)回調(diào)函數(shù)

function A(a,b,c,callback){var i=0,ar = [];for(i=0;i<3;i++){ar[i] = callback(arguments[i]*2);}return ar; } function B(a){ //回調(diào)函數(shù)return a+1; } A(a,b,c,B)

3.4.4 自調(diào)函數(shù)

(function(name){alert('Hello '+name+' !'); })('Jesse') //Hello Jesse ! //第二對括號起到的是立即調(diào)用的作用，同時(shí)也是向函數(shù)傳遞參數(shù)的地方

使用自調(diào)函數(shù)的好處是不會產(chǎn)生任何全局變量，缺點(diǎn)是無法重復(fù)執(zhí)行，這使得匿名自調(diào)函數(shù)最合適于執(zhí)行一些一次性的或者初始化的任務(wù)

3.4.5 私有函數(shù)

function a(param){function b(theinput){ //私有函數(shù)return theinput * 2};return 'The result is '+b(param) }

使用私有函數(shù)的好處：

• 有助于全局命名空間的純凈性（命名沖突的機(jī)會很小）
• 私有性--不被外部其他用用程序所用

3.4.7 能重寫自己的函數(shù)

這對于要執(zhí)行某些一次性初始化工作的函數(shù)非常有用

function a(){alert('A'); //第一次調(diào)用該函數(shù)時(shí)該語句會被執(zhí)行a = function(){ //第一次調(diào)用時(shí)a被賦予新函數(shù)alert('B'); //第二次調(diào)用該函數(shù)時(shí)該語句會被執(zhí)行}; } var a = function(){function someSetup(){var setup = 'done'}function actualWork(){alert('work')}someSetup();return actualWork; }();

3.5 閉包

3.5.1 作用域鏈

在函數(shù)內(nèi)定義的變量在函數(shù)外是不可見的，
但是如果該變量是在某個(gè)代碼塊中定義的（if或for語句中），它在代碼塊外是可見的。

3.5.2 詞法作用域

在javascript中每個(gè)函數(shù)都有一個(gè)屬于自己的詞法作用域，也就是說每個(gè)函數(shù)
在被定義時(shí)（而非執(zhí)行時(shí)）都會創(chuàng)建一個(gè)屬于自己的環(huán)境（即作用域）

function f1(){var a = 1;f2();} function f2(){return a;} //f2()被定義時(shí)a是不可見的，只能訪問自身作用域和全局作用域 f1(); //a is not defined

3.5.3 利用閉包突破作用域鏈

3.5.3.1 閉包#1

function f(){var b = "m";return function(){ //有著私有作用域，可以訪問f()的作用域和全局作用域return b;} } var n = f(); n(); //m

f()是全局函數(shù)，我們可以將它的返回值賦值給另一個(gè)全局變量，
從而生成一個(gè)可以訪問f()私有空間的新全局函數(shù)

3.5.3.3 相關(guān)定義與閉包#3

如果一個(gè)函數(shù)在其父函數(shù)返回之后想留住對父級作用域的鏈接，就必須要為此建立一個(gè)閉包

3.5.3.4 循環(huán)中的閉包

function f(){var a = [];for(var i = 0; i < 3; i++){a[i] = function(){return i;}}return a; } var s = f(); s[0](); //3 s[1](); //3 s[2](); //3

我們在這里創(chuàng)建了3個(gè)閉包，它們都指向一個(gè)共同的局部變量i，
但是閉包不會記錄它們的值，他們所擁有的只是一個(gè)i的引用，
因此只能返回i的當(dāng)前值(循環(huán)結(jié)束時(shí)i=3).

function f(){var a = [];for(var i = 0; i < 3; i++){a[i] = (function(x){return function(){return x;}})(i);}return a; } var s = f(); s[0](); //0 s[1](); //1 s[2](); //2

3.7 練習(xí)題

1.十六進(jìn)制值轉(zhuǎn)為顏色函數(shù)getRGB()

function getRGB(hex){var rgb=[0,0,0];if(/#(..)(..)(..)/g.test(hex)){rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)];};return "rgb("+rgb.join(",")+")"; } getRGB('#00ff00'); //"rgb(0,255,0)"

第四章、對象

4.1 從數(shù)組到對象

用[]定義數(shù)組的方法我們稱之為數(shù)組文本標(biāo)識法
用{}定義對象的方法我們稱之為對象文本標(biāo)識法

4.1.2 哈希表、關(guān)聯(lián)型數(shù)組

在javascript中我們用數(shù)組表示索引型數(shù)組，用對象表示關(guān)聯(lián)型數(shù)組

4.1.3 訪問對象屬性

一般通過以下兩種方式訪問對象的屬性：

• 中括號表示法：hero['name']
• 點(diǎn)號表示法：hero.name

4.1.7 構(gòu)造器函數(shù)

function Hero(name){ //構(gòu)造器函數(shù)首字母大寫this.name = name;this.occupation = 'ninja' } var hero = new Hero('jesse'); //使用new操作符創(chuàng)建新對象 hero.name; //ninja

使用構(gòu)造器函數(shù)的好處是能利用同一個(gè)構(gòu)造器函數(shù)通過傳參從而創(chuàng)建出不同的對象。

4.1.8 全局對象

事實(shí)上程序所在的宿主環(huán)境一般都會為其提供一個(gè)全局對象，
而所謂的全局變量其實(shí)只不過是該對象的屬性

4.1.9 構(gòu)造器屬性

構(gòu)造器屬性實(shí)際上是一個(gè)指向用于創(chuàng)建該對象的構(gòu)造器函數(shù)的引用

hero.contructor //Hero

通過instanceof操作符，我們可以測試一個(gè)對象是不是由某個(gè)指定的構(gòu)造器函數(shù)所創(chuàng)建的

hero instanceof Hero; //true

4.1.12 傳遞對象

引用類型，因?yàn)槠渲荡笮〔还潭?#xff0c;因此棧內(nèi)存中存放的只是該對象的訪問地址，（即該對象的引用）
堆內(nèi)存為這個(gè)值分配空間。因此我們在引用上所做的任何改動(dòng)，都會影響到他所引用的源對象。

4.2 內(nèi)建對象

4.2.1 Object

所有對象都繼承自O(shè)bject對象，因此都具有toLocaleString()、toString()和valueOf()方法。

var o = new Object(); var o = {}; alert(o); //[object,Object]

由于alert()要接收字符串參數(shù)，所以它會在后臺調(diào)用toString()方法

Object構(gòu)造器的成員:

用Object()構(gòu)造器所建對象的成員:

4.2.2 Array

var a = new Array(); var a = []; typeof a; //'object' 數(shù)組也是對象

值得關(guān)注的數(shù)組的屬性與方法

• length屬性：定義數(shù)組時(shí)會自動(dòng)生成length屬性，而一般對象中沒有
• sort()、join()、slice()、splice()

Array對象的成員:

4.2.3 Function

函數(shù)實(shí)際上也是一種對象，函數(shù)對象的內(nèi)建構(gòu)造器是Function()

定義函數(shù)的三種方式：

• function sum(a,b){return a + b;}; //函數(shù)聲明
• var sum = function(a,b){return a + b;}; //函數(shù)表達(dá)式
• var sum = new Function('a','b','return a + b;'); //Function構(gòu)造器 避免使用

4.2.3.1 Function對象的屬性:

• prototype屬性詳見第五章
• length:用于記錄該函數(shù)所擁有的參數(shù)數(shù)量
• caller:返回一個(gè)調(diào)用該函數(shù)對象的外層函數(shù)引用

function A(){return A.caller;} function B(){return A();} B(); //function B(){return A();}

4.2.3.2 Function對象的方法

Function對象繼承自O(shè)bject對象，默認(rèn)擁有Object對象的所有方法

call()、apply()方法都能讓對象去借用其他對象中的方法為己所用，這也是一種代碼重用的方式。

• call()方法：

var someObj = {name: 'Ninja',say: function(who){return 'Hello '+who+', my name is '+ this.name;} }; var myObj = {name:'Jesse' }; someObj.say.call(myObj, 'Dude');//"Hello Dude, my name is Jesse" //當(dāng)say()被調(diào)用時(shí)其中的this就被自動(dòng)設(shè)置成myObj對象的引用

如果我們調(diào)用call方法時(shí)需要傳遞更多的參數(shù)，可以在后面依次加入他們

someObj.say.call(myObj,'a','b','c')

如果我們沒有將對象傳遞給call()的首參數(shù)，或者傳遞的是null，則它的調(diào)用對象默認(rèn)為全局對象

• apply()方法：
  apply()的工作方式與call()基本相同，唯一的不同之處在于第二個(gè)參數(shù)的傳遞形式apply()方法的第二個(gè)參數(shù)是通過一個(gè)數(shù)組來傳遞的

someObj.say.apply(myObj,['a','b','c'])

4.2.3.3 重新認(rèn)識arguments對象

在函數(shù)中通過arguments訪問傳遞給函數(shù)的所有參數(shù)

arguments對象的callee屬性，該屬性返回的是當(dāng)前被調(diào)用的函數(shù)對象

通過arguments.callee屬性實(shí)現(xiàn)匿名函數(shù)的遞歸調(diào)用

(function(count){if(count < 5){console.log(count);arguments.callee(++count);} })(1) //1,2,3,4

Function對象的成員

4.2.4 Boolean

var b = new Boolean(); typeof b; //'object' typeof b.valueOf();// 'boolean'

4.2.5 Number

Number對象的toString()方法有一個(gè)可選的radix參數(shù)（默認(rèn)10）

var n =new Number(255); n.toString(16); // 'ff'

Number()構(gòu)造器的成員

Number對象的成員

4.2.6 String

當(dāng)我們將一個(gè)基本字符串當(dāng)做對象來使用時(shí)，后臺會執(zhí)行相應(yīng)的String對象創(chuàng)建操作

String()構(gòu)造器的成員

String對象的成員

4.2.7 Math

Math對象既不能當(dāng)做一般函數(shù)來使用，也不能用new操作符創(chuàng)建對象，只是一個(gè)包含一系列方法和屬性的內(nèi)建對象

獲取某個(gè)max和min之間的值，公式((max-min)*Math.random())+min

Math對象的成員

4.2.8 Date

Date()構(gòu)造器成員

Date對象的成員

4.2.9 RegExp

var reg = new RegExp('j.*t'); var reg = /j.*t/; //匹配任何以j開頭t結(jié)尾的字符串，且這倆字符之間包含1個(gè)或多個(gè)字符

4.2.9.1 RegExp對象的屬性

• global:如果該值為false（默認(rèn)），相關(guān)搜索在找到第一個(gè)匹配位置時(shí)就會停止，如果為true則會找出所有匹配位置,簡寫為‘g’
• ignoreCase:設(shè)置是否忽略大小寫，默認(rèn)為false,簡寫為'i'
• multiline:設(shè)置是否跨行搜索，默認(rèn)為false,簡寫為'm'
• lastIndex:搜索開始的索引位置，默認(rèn)為0。在對象創(chuàng)建之后可以修改
• source:用于存儲正則表達(dá)式匹配模式

var reg = /j.*t/img;

4.2.9.2 RegExp對象的方法

• test():返回的是一個(gè)布爾值（找到匹配內(nèi)容為true，否則為false）
• exec():返回的是一個(gè)由匹配字符串組成的數(shù)組

/j.*t/i.test('Javascript') //true /j.*t/i.exec('Javascript')[0] //Javascript

4.2.9.3 以正則表達(dá)式為參數(shù)的字符串方法

• match():返回的是一個(gè)包含匹配內(nèi)容的數(shù)組
• search()：返回的是第一個(gè)匹配內(nèi)容所在的位置
• replace()：將匹配的文本替換成指定的字符串
• split()：根據(jù)指定的正則表達(dá)式將目標(biāo)字符串分割成若干數(shù)組元素

var s = new String('HelloJavascriptWorld'); s.match(/j.*a/ig); //['Java'] s.search(/j.*a/i); //5 //當(dāng)某個(gè)匹配對象被找到時(shí)，如果我們想讓相關(guān)的替換字符串中包含匹配的文本，可以使用$&修飾符 s.replace(/[A-Z]/g,'_$&'); //"_Hello_Javascript_World" //如果正則表達(dá)式分了組（即帶括號），那么可以用$1代表匹配分組中的第一組，$2代表第二組 s.replace(/[A-Z]/g,'_$1'); //"_Hello_Javascript_World" var csv = 'one, two,three ,four'; csv.split(/\s*,\s*/) //["one", "two", "three", "four"] // \s*匹配0個(gè)或多個(gè)空格 //以上的4個(gè)方法可以接受的參數(shù)也包括字符串 "test".replace('t','r'); //"rest"

RegExp對象的成員

4.2.10 Error對象

try{//可能會導(dǎo)致錯(cuò)誤的代碼 }catch(e){//在發(fā)生錯(cuò)誤時(shí)處理代碼 }finally{ //可選的//無論如何都會執(zhí)行的代碼 }

4.4 練習(xí)題

c = [1,2,[1,2]]; c.sort(); //[1, [1,2], 2]

4、在String()構(gòu)造器不存在時(shí)，自定義MyString()構(gòu)造器函數(shù)并通過以下測試

function MyString(string){//this.length = this.toString = function(){return string.toString();}this.valueOf = function(){return string.valueOf();}this.reverse = function(){return Array.prototype.reverse.apply(string.split('')).join('');} } var s = new MyString('hello'); s.length; //5 s[0]; //'h' s.toString(); //'hello' s.valueOf(); //'hello' s.chatAt(1); //'e' s.concat(' world!'); //'hello world!' s.slice(0,-1); //'hell' s.split('l'); //['he','','o']

6、在Array()不存在時(shí)，創(chuàng)建MyArray()構(gòu)造器并通過以下測試

var a = new MyArray(1,2,3,'test'); a.length;//4 a.toString();//'1,2,3,test' a[a.length - 1];//'test' a.push('boo');//5 a.pop();//'1,2,3,test' a.join(',');//'1,2,3,test' function MyArray(){this.length = }

第五章、原型

5.1 原型屬性

5.1.4 利用自身屬性重寫原型屬性

如果在一個(gè)對象自身屬性中沒有找到指定的屬性，就可以去原型鏈中查找相關(guān)屬性。但是如果遇上對象自身屬性與原型鏈屬性同名時(shí)，那么對象自身屬性的優(yōu)先級高于原型鏈屬性。

function Gadget(name,color){this.name = name;this.color = color;this.method =function(){return 1;} } Gadget.prototype.price = 10; Gadget.prototype.rating = 3; var newtoy = new Gadget('webcam','back'); for(var prop in newtoy){console.log(prop + '=' + newtoy[prop]); } //name=webcam //color=back //method=function (){return 1;} //price=10 //rating=3

hasOwnProperty()方法用于區(qū)分對象自身屬性(返回true)與原型屬性(返回false)

newtoy.hasOwnProperty('name'); //true newtoy.hasOwnProperty('price'); //false

propertyIsEnumerable()方法對所有非內(nèi)建對象屬性返回true,表示可通過for-in枚舉;

newtoy.propertyIsEnumerable('name'); //true

isPrototypeOf()方法會告訴我們當(dāng)前對象是否是另一個(gè)對象的原型

var monkey = {hair:true,feeds:'bananas',breathes:'air' }; function Human(name){this.name = name; } Human.prototype = monkey; var jesse = new Human('Jesse'); monkey.isPrototypeOf(jesse); //true

5.2 擴(kuò)展內(nèi)建對象

為Array對象添加inArray()方法，用于查詢數(shù)組中是否存在某個(gè)特定的值

if(!Array.prototype.inArray){ //如果想通過原型為某個(gè)對象添加新屬性，請務(wù)必檢查該屬性是否已存在Array.prototype.inArray = function (needle){for(var i = 0;i < this.length; i++){if(this[i] == needle){return true;}}return false;} } var a = ['a','b','c']; a.inArray('d'); //false

為String對象添加reverse()方法，用于反向輸出該字符串

if(!String.prototype.reverse){ //如果想通過原型為某個(gè)對象添加新屬性，請務(wù)必檢查該屬性是否已存在String.prototype.reverse = function(){return Array.prototype.reverse.apply(this.split('')).join('');} } "Jesse".reverse(); //"esseJ" //首先利用this.split('')將目標(biāo)字符串轉(zhuǎn)為數(shù)組，并作為apply()的第二個(gè)參數(shù)，第一個(gè)參數(shù)不傳值時(shí)默認(rèn)為全局對象 //再調(diào)用數(shù)組的reverse()方法生成反向數(shù)組 //最后通過join()方法將數(shù)組轉(zhuǎn)化為字符串

5.2.2 原型陷阱

• 當(dāng)我們對原型對象完全替換時(shí)，可能會觸發(fā)異常
• prototype.constructor屬性不可靠

解決方法:當(dāng)我們重寫某對象的prototype時(shí)，必須重置相應(yīng)的constructor屬性

5.4 練習(xí)題

var shape = {type:"triangle",getType:function(){return this.type;} } function Triangle(a,b,c){this.a = a;this.b = b;this.c = c; } Triangle.prototype = shape; //當(dāng)我們重寫某對象的prototype時(shí)，必須重置相應(yīng)的constructor屬性 Triangle.prototype.constructor = Triangle; Triangle.prototype.getPerimeter = function(){return this.a + this.b + this.c; } var t = new Triangle(1,2,3); for(var prop in t){if(t.hasOwnProperty(prop)){console.log(prop + '=' + t[prop]);} } t.constructor; //Trianle(a,b,c) shape.isPrototypeOf(t); //true t.getPerimeter(); //6 t.getType(); //"triangle"

第六章、繼承

6.1 原型鏈

6.1.2 將共享屬性遷移到原型中

function Shape(){}; Shape.prototype.name = 'shape'; Shape.prototype.toString = function(){return this.name;}; function TwoDShape(){}; TwoDShape.prototype = new Shape(); TwoDShape.prototype.constructor = TwoDShape; //我們需要在對原型對象進(jìn)行擴(kuò)展之前，先完成相關(guān)繼承關(guān)系的構(gòu)建 TwoDShape.prototype.name = '2D shape'; function Triangle(side,height){this.side = side;this.height = height; } Triangle.prototype = new TwoDShape(); Triangle.prototype.constructor = Triangle; Triangle.prototype.name = 'Triangle'; Triangle.prototype.getArea = function(){return this.side*this.height/2; }

6.2 只繼承于原型

function Shape(){}; Shape.prototype.name = 'shape'; Shape.prototype.toString = function(){return this.name;}; function TwoDShape(){}; //TwoDShape.prototype = new Shape(); new Shape()會將Shape的屬性設(shè)定為對象自身屬性，這樣的代碼是不可重用的 TwoDShape.prototype = Shape.prototype; TwoDShape.prototype.constructor = TwoDShape; TwoDShape.prototype.name = '2D shape'; function Triangle(side,height){this.side = side;this.height = height; } Triangle.prototype = TwoDShape.prototype; //這樣固然可以提高效率，但是子對象和父對象都指向同一對象，一旦對原型屬性進(jìn)行修改，繼承的對象相關(guān)屬性也隨之改變 Triangle.prototype.constructor = Triangle; Triangle.prototype.name = 'Triangle'; Triangle.prototype.getArea = function(){return this.side*this.height/2; } var s = new Shape(); s.name;//"Triangle"

6.3 uber--子對象訪問父對象的方式

在構(gòu)建繼承關(guān)系的過程中引入一個(gè)uber屬性，并令其指向其父級原型對象

6.8 深拷貝

當(dāng)對象類型的屬性拷貝時(shí)，實(shí)際上拷貝的只是該對象在內(nèi)存中的位置指針，這一過程就是淺拷貝

//淺拷貝 function extendCopy(p){var c = {};for(var i in p){c[i] = p[i];}c.uber = p;return c; } //深拷貝 function deepCopy(p,c){var c = c || {};for(var i in p){if(typeof p[i] === 'object'){ c[i] = (p[i].constructor == Array) ? [] : {};deepCopy(p[i],c[i]); //在遇到一個(gè)對象引用型的屬性時(shí)，需要再次調(diào)用深拷貝}else{c[i] = p[i];}}return c; } var parent = {numbers:[1,2,3],letters:['a','b','c'],obj:{prop:1},bool:true }; var mydeep = deepCopy(parent); var myshallow = extendCopy(parent); mydeep.numbers.push(4,5,6); //6 mydeep.numbers; //[1, 2, 3, 4, 5, 6] parent.numbers; //[1, 2, 3] myshallow.numbers.push(10); //4 myshallow.numbers; //[1, 2, 3, 10] parent.numbers; //[1, 2, 3, 10] mydeep.numbers; //[1, 2, 3, 4, 5, 6]

6.9 object

基于在對象之間直接構(gòu)建繼承關(guān)系的理念，可以用object()來接收父對象，并返回一個(gè)以該父對象為原型的
新對象。

function object(p){function F(){};F.prototype = p;return new F(); }

6.12 寄生式繼承

var twoD = {name:'2d shape',dimensions:2 } function triangle(s,h){var that = object(twoD);//把twoD對象全屬性拷貝進(jìn)that對象that.name = 'Triangle';that.getArea = function(){return this.side * this.height / 2};that.side = s;that.height = h;return that; }

6.14 本章小結(jié)

實(shí)現(xiàn)繼承的方法大致上分為兩類：

• 基于構(gòu)造器工作模式
• 基于對象工作模式

6.15 案例學(xué)習(xí)：圖形繪制

未完成

第七章、瀏覽器環(huán)境

7.3 BOM

7.3.1 Window對象

window.open('新URL','新窗口名','以逗號分割的功能性列表') window.close(); window.moveTo(x,y); window.moveBy(x,y); window.resizeTo(x,y); window.resizeBy(x,y); window.alert(); window.prompt(); //點(diǎn)擊確認(rèn)返回相應(yīng)文本，點(diǎn)擊取消返回null window.confirm();//點(diǎn)擊確認(rèn)返回true，點(diǎn)擊取消返回false window.setTimeout();//指定多長時(shí)間后執(zhí)行代碼 window.setInterval();//指定每隔多長時(shí)間執(zhí)行代碼

7.3.2 navigation對象

navigation.userAgent是一個(gè)用戶瀏覽器識別的長字符串，但不要過分依賴這種用戶代理字符串，
瀏覽器能力檢測是更好地選擇

• 這種字符串很難追蹤到所有的瀏覽器以及其各種版本
• 這種字符串可以被修改

7.3.3 location對象

localtion對象的完整屬性：

• href
• hash
• host
• hostname
• port
• protocol
• search

location對象的方法：

• reload()重載某頁面
• assign()打開新URL，并在歷史記錄中生成新紀(jì)錄
• replace()與assign()相同，但不會生成新紀(jì)錄

7.3.4 history對象

history.forward();history.back();

7.3.5 screen對象

screen.width(); screen.availwidth();

7.4 DOM

7.4.2 DOM節(jié)點(diǎn)的訪問

hasChildNodes()方法用于判斷一個(gè)節(jié)點(diǎn)是否存在子節(jié)點(diǎn) hasAttributes()方法用于檢查該元素中書否存在屬性 document.documentElement.childNodes.length; //2 //任何節(jié)點(diǎn)都可以通過自身的parentNode來訪問它的父節(jié)點(diǎn) document.documentElement.parentNode; //<html> document.getElementsByTagName(); document.getElementsByName(); document.getElementById(); nextSibling/previousSibling; firstChild/lastChild

7.4.4 新建節(jié)點(diǎn)

createElement(); var myp = document.createElement('p'); createTextNode();//新建文本節(jié)點(diǎn) appendChild(); document.body.appendChild(myp); cloneNode(true)//true深拷貝 false淺拷貝 insertBefore(要插入的節(jié)點(diǎn),參照節(jié)點(diǎn)); replaceChild(要插入的節(jié)點(diǎn),要替換的節(jié)點(diǎn)) removeChild(要移除的節(jié)點(diǎn));

7.5 事件

7.5.3 DOM的事件監(jiān)聽器

addEventListener('事件類型',函數(shù)指針[,false]); removeEventListener('事件類型',函數(shù)指針[,false]); //匿名函數(shù)所定義的監(jiān)聽器是不能被移除的

該方法基于某一節(jié)點(diǎn)對象來調(diào)用，第三個(gè)參數(shù)決定代碼是否采用事件捕捉，可選的，為了適應(yīng)更多的瀏覽器，我們一般將其設(shè)置為false，即采用事件冒泡。

7.6 XMLHttpRequest對象

//創(chuàng)建xhr對象 var xhr; if(window.XMLHttpRequest){xhr = new XMLHttpRequest(); }else{xhr = new ActiveXObject("Microsoft.XMLHTTP") } //設(shè)置一個(gè)能觸發(fā)readystatechange事件的事件監(jiān)聽器,及處理響應(yīng)程序 xhr.onreadystatechange=function(){if (xhr.readyState==4 && xhr.status==200){console.log(xhr.responseText);} } //open(請求類型,請求目標(biāo)URL,是否異步請求) xhr.open('GET','somefile.txt',true); //發(fā)送請求 xhr.send('')

7.8 練習(xí)題

2.3 function include(js){var script = document.createElement('script');script.src = js;document.body.appendChild(script); } include('somescript.js'); 3.1 var myevent = {addListener:function(el,type,fn){if(typeof window.addEventListener === 'function'){myevent.addListener = function(el,type,fn){el.addEventListener(type,fn,false);};}else if(typeof window.attachEvent === 'function'){ //code for IEmyevent.addListener = function(el,type,fn){el.attachEvent('on'+type,fn);};}else{ // code for older browsersmyevent.addListener = function(el,type,fn){el['on' + type] = fn;};}myevent.addListener(el,type,fn);},removeListener : function(el,type,fn){if(typeof window.removeEventListener === 'function'){myevent.removeListener = function(el,type,fn){el.removeEventEventListener(type,fn,false);};}else if(typeof window.detachEvent === 'function'){ //code for IEmyevent.removeListener = function(el,type,fn){el.detachEvent('on'+type,fn);};}else{ // code for older browsersmyevent.removeListener = function(el,type,fn){el['on' + type] = null;};}myevent.removeListener(el,type,fn);},getEvent:function(event){},getTarget:function(event){},stopPropagation:function(event){},preventDefault:function(event){} } 4.1 var ajax ={request:function(url,requestType,queryString){var xhr;if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}else{xhr = new ActiveXObject("Microsoft.XMLHTTP")}xhr.onreadystatechange = function(){if (xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText);}}xhr.open(requestType,url,true);xhr.send('');} } ajax.request('some.txt','get');

第八章、編程模式與設(shè)計(jì)模式

8.1 編程模式

8.1.2 命名空間與初始化分支模式

為了減少命名沖突，最好的辦法是將變量和方法定義在不同的命名空間中，這種方法的實(shí)質(zhì)是只定義一個(gè)全局變量，
并將其他的方法和屬性定義為該變量的屬性。

var mySpace = {}; mySpace.event = {addListener:null,removeListener:null…… } if(typeof window.addEventListener === 'function'){mySpace.event.addListener = function(el,type,fn){el.addEventListener(type,fn,false);};mySpace.event.removeListener = function(el,type,fn){el.removeEventListener(type,fn,false);}; }else if(typeof window.attachEvent === 'function'){ //code for IEmySpace.event.addListener = function(el,type,fn){el.attachEvent('on'+type,fn);};mySpace.event.removeListener = function(el,type,fn){el.detachEvent('on'+type,fn);}; }else{ // code for older browsersmySpace.event.addListener = function(el,type,fn){el['on' + type] = fn;};mySpace.event.removeListener = function(el,type,fn){el['on' + type] = null;}; }

8.1.4 延遲定義模式

var mySpace = {}; mySpace.event = {addListener:function(el,type,fn){if(typeof window.addEventListener === 'function'){mySpace.event.addListener = function(el,type,fn){el.addEventListener(type,fn,false);};}else if(typeof window.attachEvent === 'function'){ //code for IEmySpace.event.addListener = function(el,type,fn){el.attachEvent('on'+type,fn);};}else{ // code for older browsersmySpace.event.addListener = function(el,type,fn){el['on' + type] = fn;};}mySpace.event.addListener(el,type,fn);} };

8.1.5 配置對象

該模式適用于有很多參數(shù)的函數(shù)或方法

用單個(gè)對象來替代多個(gè)參數(shù)有以下幾點(diǎn)優(yōu)勢：

• 不用考慮參數(shù)的順序
• 可以跳過某些參數(shù)的設(shè)置
• 函數(shù)的擴(kuò)展性強(qiáng)
• 代碼可讀性好

var myapp = {}; myapp.dom = {}; myapp.dom.Button = function(text,conf){var type = conf.type || 'submit';var font = conf.font || 'microsoftyahei';//…… } //使用方法如下： var config = {font:'Arial,Verdana,microsoftyahei',color:'#fff' }; new myapp.dom.Button('lalala',config);

8.1.6 私有屬性和方法

8.1.7 特權(quán)函數(shù)

8.1.8 私有函數(shù)的公有化

8.1.9 自執(zhí)行函數(shù)

(function(){// code in here })() //該模式特寫適用于某些腳本加載時(shí)所執(zhí)行的一次性初始化工作

8.1.10 鏈?zhǔn)秸{(diào)用

構(gòu)造器返回的是新建對象的this指針，我們可以使用這些方法所返回的實(shí)例來調(diào)用其他方法

document.body.appendChild(new mySpace.dom.Element('span').setText('hello').setStyle('color','red') );

8.1.11 JSON

var obj = JSON.parse(xhr.responseText);

8.2 設(shè)計(jì)模式

8.2.2 單件模式

8.2.3 工廠模式

8.2.4 裝飾器模式

8.2.5 觀察者模式

轉(zhuǎn)載于:https://www.cnblogs.com/jesse131/p/9312988.html

總結(jié)

以上是生活随笔為你收集整理的《JavaScript面向对象的编程指南》--读书笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。