Java Script 學習筆記

JS編程習慣類：

　　1. 命名

　　　　

著名的變量命名規則

只是由於變量名的語法正確，並不意味着就該使用它們。變量還應遵照如下某條著名的命名規則：

Camel 標記法

首字母是小寫的，接下來的字母都以大寫字符開頭。例如：

var myTestValue = 0, mySecondValue = "hi";

Pascal 標記法

首字母是大寫的，接下來的字母都以大寫字符開頭。例如：

var MyTestValue = 0, MySecondValue = "hi";

匈牙利類型標記法

在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，以下所示「

var iMyTestValue = 0, sMySecondValue = "hi";

本教程採用了這些前綴，以使示例代碼更易閱讀：

類型	前綴	示例
數組	a	aValues
布爾型	b	bFound
浮點型（數字）	f	fValue
函數	fn	fnMethod
整型（數字）	i	iValue
對象	o	oType
正則表達式	re	rePattern
字符串	s	sValue
變型（能夠是任何類型）	v	vValue

 

2. 語言的關鍵字

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

3. 語言的保留字

保留字在某種意思上是爲未來的關鍵字而保留的單詞。所以保留字不能被用做變量名或函數名。

ECMA-262 第三版中保留字的完整列表以下：

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

4. 字符字面量：

下面列出了 ECMAScript 的字符字面量：

字面量	含義
\n	換行
\t	製表符
\b	空格
\r	回車
\f	換頁符
\\	反斜槓
\'	單引號
\"	雙引號
\0nnn	八進制代碼 nnn 表示的字符（n 是 0 到 7 中的一個八進制數字）
\xnn	十六進制代碼 nn 表示的字符（n 是 0 到 F 中的一個十六進制數字）
\unnnn	十六進制代碼 nnnn 表示的 Unicode 字符（n 是 0 到 F 中的一個十六進制數字）

5. Java script中推薦的構造對象的方式.

　　

混合的構造函數/原型方式（最流行之一）

聯合使用構造函數和原型方式，就可像用其餘程序設計語言同樣建立對象。這種概念很是簡單，即用構造函數定義對象的全部非函數屬性，用原型方式定義對象的函數屬性（方法）。結果是，全部函數都只建立一次，而每一個對象都具備本身的對象屬性實例。

咱們重寫了前面的例子，代碼以下：

   //構造函數內部只聲明屬性。

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
}

//外部經過成員函數複製給原型。
Car.prototype.showColor = function() {
  alert(this.color);
};

var oCar1 = new Car("red",4,23);
var oCar2 = new Car("blue",3,25);

oCar1.drivers.push("Bill");

alert(oCar1.drivers);	//輸出 "Mike,John,Bill"
alert(oCar2.drivers);	//輸出 "Mike,John"

    針對5的構造方式進行的改良，目的僅是讓代碼好看點：

   動態原型方法 （第二流行的方法）

function Car(sColor,iDoors,iMpg) {
  this.color = sColor;
  this.doors = iDoors;
  this.mpg = iMpg;
  this.drivers = new Array("Mike","John");
  
  if () {
    Car.prototype.showColor = function() {
      alert(this.color);
    };
	
    
  }
}

6. Java Script 類的繼承幾種流行方式typeof Car._initialized == "undefined"Car._initialized = true;

    對象冒充

function ClassB(sColor, sName) {
    this.newMethod = ClassA;
    this.newMethod(sColor);
    delete this.newMethod;

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

對象冒充能夠實現多重繼承

function ClassZ() {
    this.newMethod = ClassX;
    this.newMethod();
    delete this.newMethod;

    this.newMethod = ClassY;
    this.newMethod();
    delete this.newMethod;
}

這裏存在一個弊端，若是存在兩個類 ClassX 和 ClassY 具備同名的屬性或方法，ClassY 具備高優先級。由於它從後面的類繼承。除這點小問題以外，用對象冒充實現多重繼承機制垂手可得。

因爲這種繼承方法的流行，ECMAScript 的第三版爲 Function 對象加入了兩個方法，即 call() 和 apply()。

//用 call
function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.call(this, sColor);

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

//用apply()

function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

原型鏈（prototype chaining）

原型鏈（prototype chaining）

繼承這種形式在 ECMAScript 中本來是用於原型鏈的。上一章介紹了定義類的原型方式。原型鏈擴展了這種方式，以一種有趣的方式實現繼承機制。

在上一章學過，prototype 對象是個模板，要實例化的對象都以這個模板爲基礎。總而言之，prototype 對象的任何屬性和方法都被傳遞給那個類的全部實例。原型鏈利用這種功能來實現繼承機制。

若是用原型方式重定義前面例子中的類，它們將變爲下列形式：

function ClassA() {
}

ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};

function ClassB() {
}


ClassB.prototype = new ClassA();

原型方式的神奇之處在於突出顯示的藍色代碼行。這裏，把 ClassB 的 prototype 屬性設置成 ClassA 的實例。這頗有意思，由於想要 ClassA 的全部屬性和方法，但又不想逐個將它們 ClassB 的 prototype 屬性。還有比把 ClassA 的實例賦予 prototype 屬性更好的方法嗎？

注意：調用 ClassA 的構造函數，沒有給它傳遞參數。這在原型鏈中是標準作法。要確保構造函數沒有任何參數。

與對象冒充類似，子類的全部屬性和方法都必須出如今 prototype 屬性被賦值後，由於在它以前賦值的全部方法都會被刪除。爲何？由於 prototype 屬性被替換成了新對象，添加了新方法的原始對象將被銷燬。因此，爲 ClassB 類添加 name 屬性和 sayName() 方法的代碼以下：

function ClassB() {
}

ClassB.prototype = new ClassA();

ClassB.prototype.name = "";
ClassB.prototype.sayName = function () {
    alert(this.name);
};

可經過運行下面的例子測試這段代碼：

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

TIY

此外，在原型鏈中，instanceof 運算符的運行方式也很獨特。對 ClassB 的全部實例，instanceof 爲 ClassA 和 ClassB 都返回 true。例如：

var objB = new ClassB();
alert(objB instanceof ClassA);	//輸出 "true"
alert(objB instanceof ClassB);	//輸出 "true"

在 ECMAScript 的弱類型世界中，這是極其有用的工具，不過使用對象冒充時不能使用它。

原型鏈的弊端是不支持多重繼承。記住，原型鏈會用另外一類型的對象重寫類的 prototype 屬性。

混合方式

這種繼承方式使用構造函數定義類，並不是使用任何原型。對象冒充的主要問題是必須使用構造函數方式，這不是最好的選擇。不過若是使用原型鏈，就沒法使用帶參數的構造函數了。開發者如何選擇呢？答案很簡單，二者都用。

在前一章，咱們曾經講解過建立類的最好方式是用構造函數定義屬性，用原型定義方法。這種方式一樣適用於繼承機制，用對象冒充繼承構造函數的屬性，用原型鏈繼承 prototype 對象的方法。用這兩種方式重寫前面的例子，代碼以下：

function ClassA(sColor) {
    this.color = sColor;
}

ClassA.prototype.sayColor = function () {
    alert(this.color);
};

function ClassB(sColor, sName) {
    
    this.name = sName;
}



ClassB.prototype.sayName = function () {
    alert(this.name);
};
ClassA.call(this, sColor);ClassB.prototype = new ClassA();

在此例子中，繼承機制由兩行突出顯示的藍色代碼實現。在第一行突出顯示的代碼中，在 ClassB 構造函數中，用對象冒充繼承 ClassA 類的 sColor 屬性。在第二行突出顯示的代碼中，用原型鏈繼承 ClassA 類的方法。因爲這種混合方式使用了原型鏈，因此 instanceof 運算符仍能正確運行。

下面的例子測試了這段代碼：

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();	//輸出 "blue"
objB.sayColor();	//輸出 "red"
objB.sayName();	//輸出 "John"