《JavaScript面向對象編程指南》 學習筆記

JavaScript面向對象編程指南 PDF書簽版 http://www.linuxidc.com/Linux/2016-04/130052.htm

第一章、引言

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

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

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

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

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

聚合：將幾個現有對象合並成一個新對象的過程

繼承：實現代碼重用

多態：不同對象通過相同的方法調用來實現各自行為的能力

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

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.2 函數參數

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

functionsumOnSteroids(){
    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;
functionf(){
    alert(a);   //undefined  這是因為函數域優先於全局域
    var a = 1;
    alert(a);  //1
}
f();

3.4.2 回調函數

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

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

3.4.4 自調函數

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

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

3.4.5 私有函數

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

使用私有函數的好處：

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

3.4.7 能重寫自己的函數

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

functiona(){
    alert('A');      //第一次調用該函數時該語句會被執行
    a = function(){  //第一次調用時a被賦予新函數
        alert('B');  //第二次調用該函數時該語句會被執行
    };
}
var a = function(){
    functionsomeSetup(){
        var setup = 'done'
    }
    functionactualWork(){
        alert('work')
    }
    someSetup();
    return actualWork;
}();

3.5 閉包

3.5.1 作用域鏈

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

3.5.2 詞法作用域

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

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

3.5.3 利用閉包突破作用域鏈

3.5.3.1 閉包#1

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

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

3.5.3.3 相關定義與閉包#3

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

3.5.3.4 循環中的閉包

functionf(){
    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).

functionf(){
    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()

functiongetRGB(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 構造器函數

functionHero(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:返回一個調用該函數對象的外層函數引用

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

4.2.3.2 Function對象的方法

Function對象繼承自Object對象，默認擁有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"
  //當say()被調用時其中的this就被自動設置成myObj對象的引用

  如果我們調用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對象

1. 在函數中通過arguments訪問傳遞給函數的所有參數
2. arguments對象的callee屬性，該屬性返回的是當前被調用的函數對象

3. 通過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對象的成員

更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2016-04/130053p2.htm