melo 唐

1.建立單個自訂物件

var employee = {

firstName = ‘Melo’,

lastName = ‘Tang’,

getName : function() {

return this.lastName +’,’+this.firstName;

}

};

2.建立自訂物件的多個instances

function Employee(firstName,lastName){

this.firstName = firstName;

this.lastName = lastName;

this.getName = function(){

return this.lastName +’,’+this.firstName;

}

}

利用上述function建立多個Employee class instances

var e1 = new Employee(‘Melo’,’Tang’);

var e2 = new Employee(‘Melo2’,’Tang2’);

e1.getName();

e2.firstName;

3.Prototype

JS是一個Prototype的語言,我們自己定義之變數全都繼承prototype。

每個JS物件都繼承prototype的屬性以及方法。

ex.el 繼承 employee 而 employee 又繼承 object 稱為 prototype chain,

       所以我們便可以得知所有的prototype之根源就是object。

hasOwnProperty:確認是否為自定義物件內的屬性 or Object的屬性

var test = {thing : 1};

test.hasOwnProperty{‘thing’}; // true

test.hasOwnProperty{‘value’}; // false

4.增加Prototype的方法

ex.1

function Employee(firstName,lastName){

this.firstName = firstName;

this.lastName = lastName;

this.getName = function(){

return this.lastName +’,’+this.firstName;

}

}

Employee.prototype.getNameBackwards = function(){

return this.lastName +’,’+this.firstName+’change’;

}

下次使用時就會改變回傳值:

e1.getNameBackwards();

注意:在class內本來為匿名方法,但用prototypev修該後有了function名子getNameBackwards()以及改變回傳內容。

ex.2 修改JS內建的物件定義

if(typeof string.prototype.trim == ‘undefined’){

String.prototype.trim = function(){

return this.replace(/^\s+|\s+$/g , ’’); //取除字串頭以及尾的空白

}

}

5.Closures

定義:可以將Closures當成是有記憶的一次性function call。

下列情形下可能用到:

• 在一個函數定義另一個函數

• 內部函數引用於存在外部函數之變數(包含參數)

• 內部函數在外部函數停止後被呼叫

ex.1

function(){

var i = 1;

window.onload = function() {

alert(i); // 2 not 1

}

i = 2;

}) ();

為何為2,因為呼叫內層函數時候外層函數已經把 i 改成2之後才去做內層

ex.2

$(function () {

 function buildACat() {  

     //buildACat()執行順序

     //buildACat:Step 1

   var catName = "Mr. Tibbles";

     //buildACat:Step 3

   function catFactory() {

     alert(catName);

   }  

//buildACat:Step 2

   catFactory();    }

 $('#buildcat').click(function() {

   buildACat();

 });

});

ex.3

$(function() {

 function buildACat() {

   var catName = "Tuffy";

   function catFactory() {

     alert(catName);

   }

   return catFactory;//回傳buildACat function的reference

 }

 $('#buildcat').click(function() {

   var myNewCat = buildACat(); //calling the buildACat function get the reference

   myNewCat(); //用這個reference呼叫buildACat(),印出Tuffy,重點在於Tuffy被外部函數呼叫還活著,代表存在Memory中

 });

});