2007/12/31

JS OO programming筆記

原本我們都是使用JS framework的包裝,但在這兩篇說明javascript對OO的支援方式的文章中,我們可以看到最原始的javascript

Part I: Inheritance http://www.webreference.com/js/column79/

Part II: Methods http://www.webreference.com/js/column80/

OO的基本特性 inheritance, encapsulation, polymorphism

提供 objects, prototypes, implicit inheritance,沒有classes, instances

prototyping 是瞭解inheritance的核心概念

以js定義function,在function中定義methods

保護 private field data element

context, scope, context switching

***********************

OO的特色 encapsulation 封裝(data and methods), inheritance 繼承, and polymorphism 多型, class, superclass, subclass, override

js 不直接支援inheritance,有兩種方法

1. 用function來實作

function superClass() {

this.bye = superBye;


this.hello = superHello;


}

function subClass() {

// 這兩行用來定義superclass


this.inheritFrom = superClass;


this.inheritFrom();


// override bye這個 method


this.bye = subBye;


}

2. 用prototype

function superClass() {

this.bye = superBye;


this.hello = superHello;


}

function subClass() {

this.bye = subBye;


}

// 這裡用prototype指定 superclass

subClass.prototype = new superClass;

************

object1.prototype.isPrototypeOf(0bject2); 判斷object2裡面是否有object1為prototype

netscape: 以 __proto__ 紀錄 prototype物件

************

用__proto__來模擬 instanceOf

//for NS only

function instanceOf(object, constructorFunction) {

while (object != null) {

if (object == constructorFunction.prototype)

{return true}

object = object.__proto__;

}

return false;

}

************

Object object supports the constructor property

************

js 支援三種object: native, host, and user-defined

native: js 語言支援的物件,包含 Object, Math, and Number

host: browser在載入頁面時產生的物件,包含 document, window, and frames

user-defined: 自訂物件,case-sensitive

The Object object is the base object for all native and user-defined objects. All objects inherit from this superclass.

Object的內容

1. property: constructor

2. methods: isPrototypeOf, hasOwnProperty, toLocaleString, toSource, toString, valueOf

propertyIsEnumerable

*****************

列印 物件property

for (property in ken) {

alert(property);


}

*****************

產生物件

function Employee() {

var registerA = "Initial Value";

function setRegisterA(param) {

registerA = param;

}

this.setRegisterA = setRegisterA;

this.dept = "HR";

this.manager = "John Johnson";

}

***************

定義function的三種方法

1.

function first(param) {

alert(param + " method to define a function");


}

2.

second = function(param)

{alert(param + " method to define a function")};


3.

third = new Function("param",

"alert(param + ' method to define a function')");


****************

Functions in javascript can modify global variables from the outer context.

定義method的時候,就會希望是使用private data member,第三種方法(用Function)會產生錯誤,

所以只能用第一與第二種建立function的方法

function myGlobal() {

var global = 5;


function first(param) {


global += 10;


alert(param + " method shows global to be " + global);


}


this.first = first;


this.second = function(param) {global += 10;


alert(param + " method shows global to be " + global)};


this.third = new Function("param", " global += 10;


alert(param + ' method shows global to be ' + global)");


}

var x = new myGlobal();

***********************

定義Context

有三種context: Global code, Eval code, and Function code

當browser進入一個新的context的時候,就會建立新物件(variable object),保存新context的變數與function,當browser跳出此context的時候,variable object就會被刪除

global code: 在functions外面執行的codes

eval code: 是透過eval function執行的code

function code: 是在function定義中的code

當browser切換context的時候,就會決定新的scope,進而決定可以存取哪些variables, objects與functions

************

判斷scope

global code的scope包含了兩種物件: global object and variable object

global object就是window這個variable物件,也可以用this來代表window,ex: window.location也可以寫成this.location

eval code的scope等同於calling code的scope,包含global and variable object

function code的scope包含

(1) calling code's execution context的variable objects,包含該function被呼叫時,所定義的所有的variables

(2) outer function的variable object

(3) global object,也就是window

(4) arguments object,包含了所有參數

通常this就代表window,但在object method中,this就是這個method所屬的object

ex:

function ObjectConstructor() {

// 這裡的this就不是window


alert(this.location);


}

// 物件

function createObj() {

// method


var newObject = new ObjectConstructor();


}

***********

強制建立object 的方法

function Employee(a) {

if (!(this instanceof Employee)) return new Employee(a); // 如果這行沒寫的話就會error


this.name = a;


}

function init(){

John = Employee("Johnson"); // 沒有寫 new


alert(John.name);


}

*********

在subclasses之間共用private data

function Shape() {

var area = 50;


this.setArea = function(a) {area = a;};


this.getArea = function() {return area;};


}

function Square() {

}

Square.prototype = new Shape();

var shape1 = new Square();

var shape2 = new Square();

shape1.setArea(100);

****************

保護private data的兩種方法

1. 用call()

function Shape() {

var area = 50;


this.setArea = function(a) {area = a;};


this.getArea = function() {return area;};


}

function SquareB() {

Shape.call(this);


}

var shape1B = new SquareB();

var shape2B = new SquareB();

shape1B.setArea(100);

//shape2B's 的area變數就不會被影響還是50

2. call a constructor from within a constructor

function Shape() {

var area = 50;


this.setArea = function(a) {area = a;};


this.getArea = function() {return area;};


}

function SquareA() {

this.Shape = Shape;


this.Shape();


}

var shape1A = new SquareA();

var shape2A = new SquareA();

shape1A.setArea(100);

//shape2B's 的area變數就不會被影響還是50