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