zoukankan      html  css  js  c++  java

  • JavaScript Object Basichttp://www.josephjiang.com/presentation/OOJS/objectbasic.html

    傳統的物件導向語言不容易撰寫，像 VB.NET, C#, JAVA。如物件的撰寫必須放在另外的檔案（*.vb, *.cs）、必須使用 Class 這個關鍵字、不能用很簡單的方式去新增物件或指定物件。而 JavaScript 有上述物件導向語言的特性。不一樣的是，它的物件導向非常容易使用( Objects are soft )，可以使用很簡單的方法去新增子物件 ( Simple Assignment )。

    由於 JavaScript 物件導向的撰寫模式很有彈性，對於物件階層你可以採用不同的寫法與想法 ( No Deep hierachies, Use Shallow Hierachies)

    JavaScript - 世界上被誤解最深的程式語言

    Douglas Crockford 在 The JavaScript Programming Language 提到 JavaScript，是世界上被誤解最深的程式語言，被誤解的原因如下：

    • The Name

      許多人會將 JavaScript 當成是 Java 的子程式、也有人會因為 script 這個字眼，而認為它不是一個真正的程式語言。

    • Moving Target

      第一版的 JavaScript 非常的粗糙，沒有例外處理、內部函式、以及繼承的概念。到現在的版本已經是一個物件導向的程式語言。即使如此，因為之前的粗糙，讓許多人有既定的印象。

      ECMA 組織不斷地在擴張 JavaScript 的功能性及完整性，原意是好的。但是就是版本太多，容易讓人產生混淆。

    • Design Errors

      JavaScript 跟其他語言一樣，有許多設計上的錯誤，例如 + 號同時代表了字串的串接及數值的相加、或者是 with 的使用、Regular Expression 的寫法、保留字的使用太過嚴格，這些設計上的錯誤都讓人在開發過程中產生疑惑。但是 ECMA 組織似乎沒有要修正這些問題的意思。

    • Bad Implementations

      因為早期的撰寫方式的不正確、為此語言帶來錯誤的影響。首頁建置百寶箱

    • Amateurs

      業餘愛好者，通常喜歡撰寫 JavaScript 的人都是不具有程式語言背景的，寫出來的東西自然就給人奇差無比的觀感。

    • Bad Books

      書籍或文件觀念不正確

    • Substandard Standard

      不夠標準的標準，The official specification for the language is published by ECMA. The specification is of extremely poor quality. It is difficult to read and very difficult to understand. This has been a contributor to the Bad Book problem because authors have been unable to use the standard document to improve their own understanding of the language. ECMA and the TC39 committee should be deeply embarrassed.

    JavaScript 物件的特性

    • 沒有 Class (類別)，但可以使用 Class 的概念

    • 物件中包含了一個或多個 Name-Value 所配對的子物件
    • Name 可以是任何的 String、Value 則可以是除了 undefined 以外的任何「值」
    • 可以以點運算子 ( dot notation ) 的方式存取一個物件底下的任何子物件，也可以以索引值、索引名稱的方式存取

    JavaScript 物件的類型

    Types

    JavaScript 是由 Object 所組成。Array 是物件、Function 是物件、Objects 是物件。

    在 JavaScript 的原生資料型態 (Primitive Data Type) 中，只有下列五種類型的「值」( Value ) 不被視為物件：

    • Numbers ( 數值 )
    • Strings ( 字串值 )
    • Booleans ( 布林值 )
    • null ( 空值 )
    • undefined ( 未定義值 )

    其它的所有東西，都算是物件的一種

    開始使用物件

    宣告與新增物件

    1 var oObject = new Object();  
    2 //上一段有提到「字串值」不算是物件的一種，但這邊所宣告的是字串物件，不要混淆了喔！  
    3 var oStringObject = new String();  
    view plain | print | copy to clipboard | ?

    在沒有參數使用時，可以將括號給拿掉。

    摧毀 / 不再參考物件

    1 var oObject = new Object();  
    2 ...  
    3 //最後要設為 null  
    4 oObject = null;  
    view plain | print | copy to clipboard | ?

    現今瀏覽器的 Script Engine 都有配備 Garbage Collector 的機制，當不再使用時，就會把物件參考回收。上述的範例是一個良好的習慣、實例中比較少看到。

    Array

    陣列的介紹

    如前面所述的，陣列也是物件的一種，我們可以把陣列想像成是「物件的特別型態」。

    前面提到物件可以用 Dot Notation 的方式存取、也可以用索引的方式存取。但是對於陣列而言，僅能使用索引的方式存取。

    存取 Object

    1 var oCar = new Object();  
    2 oCar.brand = 'Ford';  
    3 oCar.model = 'Focus';  
    4 var sModel = oCar.model;  
    view plain | print | copy to clipboard | ?

    存取 Array

    1 var aCar = new Array();  
    2 aCar['brand'] = 'Ford';  
    3 aCar[1] = 'Focus';  
    4 var sModel = aCar['brand'];  
    view plain | print | copy to clipboard | ?

    在沒有參數使用時，可以將括號給拿掉。

    使用陣列的方式

    最單純的宣告方式：

    1 var aValue = new Array();  
    view plain | print | copy to clipboard | ?

    你也可以帶一個參數，代表陣列的長度

    1 var aValue = new Array(20)  
    view plain | print | copy to clipboard | ?

    一個個指定值

    1 var aColor = new Array();  
    2 aColor[0] = 'red';  
    3 aColor[1] = 'green';  
    4 aColor[2] = 'blue';  
    view plain | print | copy to clipboard | ?

    在宣告時直接帶參數

    1 var aColor = new Array('red','green','blue');  
    2 alert(aColor[1]);   //輸出 'green'  
    view plain | print | copy to clipboard | ?

    .length 屬性、求取陣列的總長度

    1 var aColor = new Array('red','green','blue');  
    2 alert(aColor.length);   //輸出 3  
    view plain | print | copy to clipboard | ?

    宣告也可以直接使用中括號

    1 var aColor = ['red','green','blue'];  
    2 alert(aColor.length); //輸出 3  
    3 aColor[25] = 'purple';  
    4 alert(aColor.length); //輸出 26  
    view plain | print | copy to clipboard | ?

    join() 方法合併為字串

    1 var aColor = ['red','green','blue'];  
    2 alert(aColor.join('&&')); //輸出 red&&green&&blue  
    view plain | print | copy to clipboard | ?

    push() 方法，新增一個 array item, 類似碗盤堆疊的概念

    1 var aColor = [];  
    2 aColor.push('red');  
    3 aColor.push('green');  
    4 aColor.push('yellow');  
    5 alert(aColor.join(',')); //輸出 red,green,yellow  
    6 var sItem = aColor.pop();  
    7 alert(sItem); //輸出 yellow  
    8 alert(aColor.join(',')); //輸出 red,green  
    view plain | print | copy to clipboard | ?

    pop() 方法，會把最後一個 Array Item 移除

    1 var aColor = ['red','green','yellow'];  
    2 var sItem = aColor.pop();  
    3 alert(sItem); //輸出 yellow  
    4 alert(aColor.join(',')); //輸出 red,green  
    view plain | print | copy to clipboard | ?

    shift() 方法, 跟 Perl 一樣把第一個 Item 從陣列中抽出來

    1 var aColor = ['red','green','yellow'];  
    2 var sItem = aColor.shift();  
    3 alert(sItem); //輸出 red  
    4 alert(aColor.join(',')); //輸出 green,yellow  
    view plain | print | copy to clipboard | ?

    unshift() 方法, 則是塞 Item 到第一個

    1 var aColor = ['red','green','yellow'];  
    2 aColor.unshift('black');  
    3 alert(aColor.join(',')); //輸出 black,red,green,yellow  
    view plain | print | copy to clipboard | ?

    sort() 跟 reverse() 指是替陣列做個排序

    1 var aColor = ['red','black','green','yellow'];  
    2 aColor.sort();  
    3 alert(aColor.join(',')); //輸出 black,green,red,yellow  
    4 aColor.reverse();  
    5 alert(aColor.join(',')); //輸出 yellow,red,green,black  
    view plain | print | copy to clipboard | ?

    Scope

    Scope 的介紹

    任何一種程式語言都有 Scope 的概念, 代表的是某塊特定區域只能存取特定的變數

    sort() 跟 reverse() 指是替陣列做個排序

    1 var sMessage = 'Hello';  
    2  
    3 function setSomething() {  
    4     var sColor = 'red';  
    5     sMessage = 'Hello World!';  
    6 }  
    7  
    8 setSomething();  
    9  
    10 alert(sMessage); // 輸出 ?  
    11 alert(sColor); // 輸出 ?  
    view plain | print | copy to clipboard | ?

    原始碼中共有 sMessage 及 sColor 兩個變數, 在整個 Js 的 Scope 中可存取到 sMessage 這個變數, 但是無法存取到 setSomething 函式裡面的 sColor, 因為 Scope 不相同

    this 關鍵字

    this 永遠都是指呼叫 function 的那個 object

    1 var oCar = new Object;  
    2 oCar.color = 'red';  
    3 oCar.showColor = function() {  
    4     alert(this.color)  
    5 }  
    view plain | print | copy to clipboard | ?

    這邊的 this 指的就是 oCar 物件

    Public / Private / Priviledged Members

    Public Member

    在物件的階層中 ( 如 Object.ChildObject.GrandChildObject )，所有的成員都是 Public Members，所有其它的 Function 可以針對這些 Member 做存取、修改、刪除, 或者是新增成員。

    Object Literal

    1 // 假設本來就有 People.Joseph 這個物件  
    2 var oJoseph = People.Joseph;  
    3 // 即使本來沒有 weight, height 的屬性也可以去 assign => Public Variables  
    4 oJoseph.weight = 72;  
    5 oJoseph.height = 178;  
    6 // 當然可以去新增方法 = > Public Method  
    7 oJoseph.cry = function() {  
    8     alert('嗚～ Producer 欺負我!');  
    9 };  
    view plain | print | copy to clipboard | ?

    Function Literal

    在 JavaScript 中可以把 Function 當成是物件導向語言中的 Class 或 Component，所以 Function 就是我們的 Constructor

    1 // Constructor 建構式  
    2 function Car(sBrand,sModel,sPrice,sYear) {  
    3     this.brand = sParam;  
    4     this.model = sModel;  
    5     this.price = sPrice;  
    6     this.year = sYear;  
    7 };  
    8  
    9 // 在之後建立的物件都會有 newMethod 這個方法  
    10 Car.prototype.newMethod = function() {  
    11     //do something here  
    12 };  
    13  
    14 // 利用 Car 這個 Constructor 建立一個新物件 : 在記憶體中新增一個區塊  
    15 var oCar = new Car('Ford','Focus','629000','2006');  
    16 // 所以我們可以針對這個新物件去取得，oCar.model 即是一個 Puclic Member  
    17 alert(oCar.model); //output 'focus'  
    18 // 也可以去寫入  
    19 oCar.model = 'Activa';  
    20 alert(oCar.model); //output 'Activa'  
    21 // 也可以去刪除  
    22 oCar.price = null;  
    23 // 還可以新增方法  
    24 oCar.init = function() {  
    25     alert('新車出廠');  
    26 }  
    view plain | print | copy to clipboard | ?

    Private Members

    如果你不希望 Class / Constructor 的屬性或方法被存取，只要不要用 this 的關鍵字即可

    1 // Constructor 建構式  
    2 function Car(sBrand,sModel,sPrice,sYear) {  
    3     // brand, model, price, year 都是 public member  
    4     this.brand = sParam;  
    5     // brand 及 oldMethod 不會被外界給存取，就是 private member  
    6     var brand = 'BMW';  
    7     var oldMethod = function() {  
    8         // do something here...  
    9     };  
    10 };  
    view plain | print | copy to clipboard | ?

    關於 var 宣告

    在 JavaScript 宣告變數是 Loose Type 的，可以不用 var 就新增一個變數。

    但如果不使用 var，就會讓這個新增的變數變成全域變數。

    1 function hello(msg) {  
    2     //沒有使用 var 這個關鍵字做宣告  
    3     sMessage = msg;  
    4 };  
    5 // 執行...  
    6 hello('hello world');  
    7 alert(sMessage);  // output 'hello world'  
    view plain | print | copy to clipboard | ?

    我們並沒有在全域宣告 sMessage 這個變數，但是我們有在 function 內用到 sMessage 這個變數，由於沒有用 var 做宣告，以致於 sMessage 變成全域的變數，在執行 hello() 方法之後，sMessage 這個全域變數也產生了，所以接下來的 alert(sMessage) 才會有東西。

    上面的例子讓變數的控制變得很困難，請一律在新增變數時加上 var，以避免問題。

    1 function hello(msg) {  
    2     //這次我們加上了 var 關鍵字  
    3     var sMessage = msg;  
    4 };  
    5 hello('hello world');  
    6 alert(sMessage); // output undefined  
    view plain | print | copy to clipboard | ?

    Closures

    Closure 表示內部 Function 可以存取其外部的變數、參數、與方法，Closure 是 JavaScript 非常重要的一個特色。

    1 // Constructor 建構式  
    2 function Car(sBrand,sModel,sPrice,sYear) {  
    3     this.brand = sParam;  
    4     // 外部宣告了 brand  
    5     var brand = 'BMW';  
    6     // 內部函式 oldMethod  
    7     var oldMethod = function() {  
    8         // 幸虧有 Closure, 可以取得外部 brand 的值  
    9         alert(brand); // output 'BMW'  
    10         // 小心地使用 this，最好連用都不用！  
    11         alert(this.brand); // output ?  
    12     };  
    13 };  
  • 相关阅读:
    定时器
    表单事件
    闭包，string类，Array类
    构造函数，原型链补充
    Elasticsearch安装（6.4.3版）
    快速配置ssh免密登录
    idea远程debug SpringBoot项目
    java获取一个对象的内存大小
    nginx代理其他网站
    外呼系统实现平均分配策略的实现方式之一
  • 原文地址：https://www.cnblogs.com/si812cn/p/1626298.html
Copyright © 2011-2022 走看看