Javascript 物件導向學習1 Function function Object

Javascript. 程式設計也有一段時間了，但還是有很多基礎概念似懂非懂，抽空整理一下，理解不對的大家糾正一下。

1: Function 和 function

Code
    alert(Function);
    //function Function() {
    //  [native code]
    //}
    alert(typeof Function); //function
    alert(Function instanceof Object); // true
   
    function fun() { };
    alert(typeof fun); //function
    alert(fun.constructor == Function); //true
    alert(fun instanceof Function); //true
    alert(fun instanceof Object); //true

  Function系統內建的function，使用者定義的 function 都由它建立。並且他們都是"繼承"於Object的.

2: function 和 Object

Code
    function Class(){};

    alert(typeof Class); //function
    alert(Class.constructor == Function); //true
    alert(Class instanceof Function); //true
    alert(Class instanceof Object); //true
    alert(typeof Class.prototype); //object

    var c1 = new Class();
    alert(typeof c1);  //object
    alert(c1.constructor == Class); //true
    alert(c1 instanceof Class); //true
    alert(c1 instanceof Function); //false
    alert(c1 instanceof Object); //true
    alert(typeof c1.__proto__); //ie下為undefined firefox為object
    alert(c1.__proto__ == Class.prototype); //ie下為flase firefox為true

    function 是 Function 的一個例項，是繼承與Object的，在具有Object物件的特徵之外，還具有
    1) 可以進行 new 操作，來模擬一些物件導向的功能， new 操作返回的是一個 object 物件。它是建構函式和Object物件的例項。
    2) new Class() 操作的三個步驟
        a) var c1 = new Object 物件
        b) 新建的 c1 複製 原來 function Class 的所有屬性和方法
        c) c1.__proto__ = Class.prototype
    3) 在c1中，把this 指向c1
    //ie 中 看不到__proto__,不過應該有相應的隱藏值

    3: 關於javascript中instanceof
    在 http://www.cnblogs.com/bmrxntfj/archive/2008/07/17/829833.html 看到一個例子，很有意思
   
Code
    function class1() { };
    function class2() { };
    class2.prototype = new class1();
    function class3() { };
    class3.prototype = new class2();
    function class4() { };
    class4.prototype = new class3();
    function class5() { };
    class5.prototype = new class4();
       
    var bj = new class4();
       
    //測試正常的繼承關係   
    alert(obj instanceof class5); //false
    alert(obj instanceof class4); //true
    alert(obj instanceof class3); //true
    alert(obj instanceof class2); //true
    alert(obj instanceof class1); //true

    class3.prototype = new class5(); //改變繼承關係

    //測試改變後的繼承關係
    alert(obj instanceof class5); //false
    alert(obj instanceof class4); //true
    alert(obj instanceof class3); //false
    alert(obj instanceof class2); //true  仍然是true
    alert(obj instanceof class1); //true  仍然是true

 

用下面程式碼進行測試 只在firefox 中有效

 

Code
    var _proto = obj.__proto__;

    while (_proto) {
            if (_proto == class1.prototype) {
                alert("class1");
            }
            else if (_proto == class2.prototype) {
                alert("class2");
            }
            else if (_proto == class3.prototype) {
                alert("class3");
            }
            else if (_proto == class4.prototype) {
                alert("class4");
            }
            else if (_proto == class5.prototype) {
                alert("class5");
            }
            else if (_proto == Object.prototype) {
                alert("Object");
            } else {
                alert("unknow");
                alert(_proto.constructor);
            }
            _proto = _proto.__proto__;
     }

    正常繼承關係
    class4->class3->class2->class1->Object

    改變後繼承關係
    class4->unknow->class2->class1->Object

    instanceof 是在 _proto_鏈上的節點逐個進行比較，如果找到相等的節點，則返回true，否則返回false。

    對於 unknow 物件 它的 _proto.constructor 顯示為 "function class1() {}"
    不過好像除Object， class4~class1的 _proto.constructor 都為 "function class1() {}"
    對於這個還是不太明白，對於這一點確實有點不好理解，知道的的同學指點一下。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-564909/，如需轉載，請註明出處，否則將追究法律責任。