物件導向之筆記三-------------- 原型鏈

標籤：引用   on()   效能   string   asc   nbsp   cto   struct   表達   

1. 複習 -> 繼承

    原型式繼承     function Person() {} Person.prototype = 父物件; var p = new Person(); p 繼承自 父物件 混入 ( mix, extend ) function extend( o1, o2 ) { for ( var k in o2 ) { o1[ k ] = o2[ k ]; } } 注意命名規則: 1> 一般 將一個對象混入另一個對象, 使用 mix 2> 如果是當前對象的方法. 是將另一個對象混入當前對象一般使用 extend

2. 對象的原型鏈 -> 凡是對象都有原型 -> 建構函式 Person 建立的對象 p 有原型 Person.prototype

   -> Person.prototype 是對象. 它有原型嗎? -> 問題:

    1) 原型是什麼? 2) 原型既然是對象, 那麼如何是個頭?    

   -> 結論

    1) Person.prototype 是 執行個體 p 的原型對象, 使用 __proto__ 可以訪問對象的原型對象 2) Person.prototype 的 原型對象是 Person.prototype.__proto__ 3) Person.prototype.__proto__ 裡的 constructor 是 Object. 所以 Person.prototype.__proto__ 就是 Object.prototype 4) Object.prototype.__proto__ 是 null. 因此表明 Object.prototype 就是頂級.

   -> 鏈式

    p --> Person.prototype( p.__proto__ ) --> Object.prototype --> null

   -> 系統內建的原型鏈

    [] --> Array.prototype --> Object.prototype --> null /./ --> RegExp.prototype --> Object.prototype --> null ... ...

3. 繪製數組的原型結構 var arr = []; // 等價 var arr = new Array();

   arr --> Array.prototype --> Object.prototype --> null

4. 練習: 根據下面代碼繪製對象的原型鏈結構 1) function Person( name, age, gender ) {

        this.name = name;     this.age = age;     this.gender = gender; } function Student () {} Student.prototype = new Person( ‘張三‘, 19, ‘男‘ ); var stu = new Student();

2)  function Person() {} var p1 = new Person(); var p2 = new Person();

1. {} 對象的原型鏈結構 在 js 中 對象 一般都有字面量

    123, ‘123‘

   數組: [] Regex對象: /./ 函數: function () {} ...

   對象也有字面量: {} {} --> Object.prototype --> null

   注意: {} 與 new Object() 含義相同

1. 動態函數 Function -> 動態函數就是在啟動並執行過程中, 將一段字串作為代碼運行.

    由於字串可以隨意的拼接. 因此得到動態執行. （ 動態產生代碼  然後再去執行它）

   -> 定義動態函數, 並執行

    -> 使用 Function 建構函式, 建立函數.     Function 是一個建構函式！！！. new Function 會得到 **一個函數**（函數也是一個對象） -> 文法 new Function( arg0, arg1, ..., argN, body ) Function 的所有的參數（都是字串）, 除了最後一個以外, 都是產生的函數的參數 最後一個參數是 函數體

   // 案例1: 求兩個數位和 -> function getSum ( num1, num2 ) {

    **return num1 + num2;**

   }**

   動態函數 --> var getSum2 = new Function ( ‘num1‘, ‘num2‘, ‘return num1 + num2;‘ );

       調用動態函數建立的函數  getSum2(100,200)

   注意：這裡面的參數都是字串!

   函數的相關的一些參數 arguments 凡是函數調用, 都會預設含有一個 arguments 對象. 可以將其看做為 "數組". 裡面儲存著調用時傳入的所有參數. 可以使用數組的索引訪問這些參數.

    例如: 寫一個函數, 在參數中寫任意個參數, 最後求其和     function sum () { // 所有的參數都會儲存到 arguments 中 var sum = 0; for ( var i = 0; i < arguments.length; i++ ) { sum += arguments[ i ]; } return sum; } 案例: extend( o ) => 將 o 混入到當前對象 this 中 extend( o1, o2 ) => 將 o2 混入到 o1 中

   函數名.length, 即函數的 length 屬性. 表示 定義函數時, 參數的個數

   如果定義函數的時候, 定義了參數. 但是調用的時候又沒有傳遞該參數. 那麼該參數在函數內就是 undefined

   函數.name 返回的是函數名

2. 函數的引用 callee 與 caller js 中函數也是一個對象 -> callee 在函數的內部, 它表示 當前函數 的引用arguement.callee（）; (遞迴函式用法) -> caller 表示調用函數 函數名.caller

3. eval 函數 eval 函數與 Function 功能類似. eval 可以直接將字串作為代碼來執行. 文法:

    eval( 語句字串 )

   注意, 它與當前代碼處於同一個範圍

4. 使用 ajax 獲得 json 格式的字串後, 轉換成對象

5. 在 js 中 函數 是 Function 的執行個體

   function Person() {} var p = new Person(); p 是 建構函式 Person 的執行個體

   在 該角度去看, 函數就是對象, Function 就是建構函式

   得到 構造-執行個體-原型 三角形

   function Person() {} 為例

6. 給定一個任意的對象, 將其原型鏈包括對象和函數的結構完整的分析處理

7. instanceof 運算子 -> a of b -> b 的 a -> instance of ? -> 錯覺: 判斷某一個對象是否為某一個建構函式所建立出來的

1. 通過原型鏈的學習, 可以重新定義 js 的繼承

   js 的繼承: 就是利用對象的動態特性新增成員, 或直接替換對象的方式修改原型鏈

           結構. 使得當前對象的原型鏈上的對象具有某些成員. 那麼我的當前對象        就可以使用這些成員了.

   p -> Person.prototype -> Object.prototype -> null p -> Person.prototype -> {} -> Object.prototype -> null

   過多的依賴原型鏈繼承, 會損耗 效能 如果必須使用原型鏈繼承, 最好提供一些快速存取的方法

物件導向之筆記三-------------- 原型鏈