當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

《JavaScript面向对象的编程指南》--读书笔记

發布時間：2024/4/17 javascript 47 豆豆

生活随笔收集整理的這篇文章主要介紹了《JavaScript面向对象的编程指南》--读书笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一章、引言

1.5 面向對象的程序設計常用概念

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

類：實際上就是對象的設計藍圖或制作配方。類更多的是一種模板，而對象就是在這些模版的基礎上被創建出來的。

封裝：主要闡述對象中包含的內容。通常包括：

相關數據（用于存儲屬性）
基于這些數據所能做的事（所能調用的方法）

聚合：將幾個現有對象合并成一個新對象的過程
繼承：實現代碼重用
多態：不同對象通過相同的方法調用來實現各自行為的能力

第二章、基本數據類型、數組、循環及條件表達式

2.3基本數據類型

2.3.2 指數表示法

2e+3表示在數字2后面加3個0，即2000

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

2.3.4 惰性求值

Javascript引擎在一個邏輯表達式中遇到一個非布爾類型操作數，
那么該操作數的值就會成為該表達式返回的結果。

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

2.9 練習題

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

第三章、函數

3.1 函數

3.1.2 函數參數

函數內部都有一個內建的arguments數組，能返回函數所接收的所有參數

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 函數的作用域

var a = 123; function f(){alert(a); //undefined 這是因為函數域優先于全局域var a = 1;alert(a); //1 } f();

3.4.2 回調函數

當我們將函數B傳遞給函數A，并由A來執行B時，B就成了一個回調函數

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){ //回調函數return a+1; } A(a,b,c,B)

3.4.4 自調函數

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

使用自調函數的好處是不會產生任何全局變量，缺點是無法重復執行，這使得匿名自調函數最合適于執行一些一次性的或者初始化的任務

3.4.5 私有函數

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

使用私有函數的好處：

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

3.4.7 能重寫自己的函數

這對于要執行某些一次性初始化工作的函數非常有用

3.5 閉包

3.5.1 作用域鏈

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

3.5.2 詞法作用域

在javascript中每個函數都有一個屬于自己的詞法作用域，也就是說每個函數
在被定義時（而非執行時）都會創建一個屬于自己的環境（即作用域）

function f1(){var a = 1;f2();} function f2(){return a;} //f2()被定義時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()是全局函數，我們可以將它的返回值賦值給另一個全局變量，
從而生成一個可以訪問f()私有空間的新全局函數

3.5.3.3 相關定義與閉包#3

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

3.5.3.4 循環中的閉包

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

我們在這里創建了3個閉包，它們都指向一個共同的局部變量i，
但是閉包不會記錄它們的值，他們所擁有的只是一個i的引用，
因此只能返回i的當前值(循環結束時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 練習題

1.十六進制值轉為顏色函數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 從數組到對象

用[]定義數組的方法我們稱之為數組文本標識法
用{}定義對象的方法我們稱之為對象文本標識法

4.1.2 哈希表、關聯型數組

在javascript中我們用數組表示索引型數組，用對象表示關聯型數組

4.1.3 訪問對象屬性

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

中括號表示法：hero['name']
點號表示法：hero.name

4.1.7 構造器函數

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

使用構造器函數的好處是能利用同一個構造器函數通過傳參從而創建出不同的對象。

4.1.8 全局對象

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

4.1.9 構造器屬性

構造器屬性實際上是一個指向用于創建該對象的構造器函數的引用

hero.contructor //Hero

通過instanceof操作符，我們可以測試一個對象是不是由某個指定的構造器函數所創建的

hero instanceof Hero; //true

4.1.12 傳遞對象

引用類型，因為其值大小不固定，因此棧內存中存放的只是該對象的訪問地址，（即該對象的引用）
堆內存為這個值分配空間。因此我們在引用上所做的任何改動，都會影響到他所引用的源對象。

4.2 內建對象

4.2.1 Object

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

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

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

Object構造器的成員:

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

4.2.2 Array

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

值得關注的數組的屬性與方法

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

Array對象的成員:

4.2.3 Function

函數實際上也是一種對象，函數對象的內建構造器是Function()

定義函數的三種方式：

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

4.2.3.1 Function對象的屬性:

prototype屬性詳見第五章
length:用于記錄該函數所擁有的參數數量
caller:返回一個調用該函數對象的外層函數引用

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

4.2.3.2 Function對象的方法

Function對象繼承自Object對象，默認擁有Object對象的所有方法

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

call()方法：

如果我們調用call方法時需要傳遞更多的參數，可以在后面依次加入他們

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

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

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

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

4.2.3.3 重新認識arguments對象

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

arguments對象的callee屬性，該屬性返回的是當前被調用的函數對象

通過arguments.callee屬性實現匿名函數的遞歸調用

(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()方法有一個可選的radix參數（默認10）

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

Number()構造器的成員

Number對象的成員

4.2.6 String

當我們將一個基本字符串當做對象來使用時，后臺會執行相應的String對象創建操作

String()構造器的成員

String對象的成員

4.2.7 Math

Math對象既不能當做一般函數來使用，也不能用new操作符創建對象，只是一個包含一系列方法和屬性的內建對象

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

Math對象的成員

4.2.8 Date

Date()構造器成員

Date對象的成員

4.2.9 RegExp

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

4.2.9.1 RegExp對象的屬性

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

var reg = /j.*t/img;

4.2.9.2 RegExp對象的方法

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

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

4.2.9.3 以正則表達式為參數的字符串方法

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

var s = new String('HelloJavascriptWorld'); s.match(/j.*a/ig); //['Java'] s.search(/j.*a/i); //5 //當某個匹配對象被找到時，如果我們想讓相關的替換字符串中包含匹配的文本，可以使用$&修飾符 s.replace(/[A-Z]/g,'_$&'); //"_Hello_Javascript_World" //如果正則表達式分了組（即帶括號），那么可以用$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個或多個空格 //以上的4個方法可以接受的參數也包括字符串 "test".replace('t','r'); //"rest"

RegExp對象的成員

4.2.10 Error對象

try{//可能會導致錯誤的代碼 }catch(e){//在發生錯誤時處理代碼 }finally{ //可選的//無論如何都會執行的代碼 }

4.4 練習題

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

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

6、在Array()不存在時，創建MyArray()構造器并通過以下測試

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 利用自身屬性重寫原型屬性

如果在一個對象自身屬性中沒有找到指定的屬性，就可以去原型鏈中查找相關屬性。但是如果遇上對象自身屬性與原型鏈屬性同名時，那么對象自身屬性的優先級高于原型鏈屬性。

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

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

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

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

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

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 擴展內建對象

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

if(!Array.prototype.inArray){ //如果想通過原型為某個對象添加新屬性，請務必檢查該屬性是否已存在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){ //如果想通過原型為某個對象添加新屬性，請務必檢查該屬性是否已存在String.prototype.reverse = function(){return Array.prototype.reverse.apply(this.split('')).join('');} } "Jesse".reverse(); //"esseJ" //首先利用this.split('')將目標字符串轉為數組，并作為apply()的第二個參數，第一個參數不傳值時默認為全局對象 //再調用數組的reverse()方法生成反向數組 //最后通過join()方法將數組轉化為字符串

5.2.2 原型陷阱

當我們對原型對象完全替換時，可能會觸發異常
prototype.constructor屬性不可靠

解決方法:當我們重寫某對象的prototype時，必須重置相應的constructor屬性

5.4 練習題

第六章、繼承

6.1 原型鏈

6.1.1 原型鏈示例

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

6.2 只繼承于原型

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

在構建繼承關系的過程中引入一個uber屬性，并令其指向其父級原型對象

6.8 深拷貝

當對象類型的屬性拷貝時，實際上拷貝的只是該對象在內存中的位置指針，這一過程就是淺拷貝

//淺拷貝 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]); //在遇到一個對象引用型的屬性時，需要再次調用深拷貝}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

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

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

6.12 寄生式繼承

6.14 本章小結

實現繼承的方法大致上分為兩類：

基于構造器工作模式
基于對象工作模式

6.15 案例學習：圖形繪制

未完成

第七章、瀏覽器環境

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(); //點擊確認返回相應文本，點擊取消返回null window.confirm();//點擊確認返回true，點擊取消返回false window.setTimeout();//指定多長時間后執行代碼 window.setInterval();//指定每隔多長時間執行代碼

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

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

7.3.3 location對象

localtion對象的完整屬性：

href
hash
host
hostname
port
protocol
search

location對象的方法：

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

7.3.4 history對象

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

7.3.5 screen對象

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

7.4 DOM

7.4.2 DOM節點的訪問

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

7.4.4 新建節點

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

7.5 事件

7.5.3 DOM的事件監聽器

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

該方法基于某一節點對象來調用，第三個參數決定代碼是否采用事件捕捉，可選的，為了適應更多的瀏覽器，我們一般將其設置為false，即采用事件冒泡。

7.6 XMLHttpRequest對象

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

7.8 練習題

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');

第八章、編程模式與設計模式

8.1 編程模式

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

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

8.1.4 延遲定義模式

8.1.5 配置對象

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

用單個對象來替代多個參數有以下幾點優勢：

不用考慮參數的順序
可以跳過某些參數的設置
函數的擴展性強
代碼可讀性好

8.1.6 私有屬性和方法

8.1.7 特權函數

8.1.8 私有函數的公有化

8.1.9 自執行函數

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

8.1.10 鏈式調用

構造器返回的是新建對象的this指針，我們可以使用這些方法所返回的實例來調用其他方法

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 設計模式

8.2.2 單件模式

8.2.3 工廠模式

8.2.4 裝飾器模式

8.2.5 觀察者模式

轉載于:https://www.cnblogs.com/jesse131/p/9312988.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： jzoj_3385_黑魔法师之门
下一篇： spring boot：创建一个简单的w