JS原型和繼承

標籤：

//Js所有的函數都有一個prototype屬性    function aa() {    }    console.info(aa.prototype);    //這個prototype屬性引用了一個對象，即原型，初始化時是一個Null 物件，也就是沒有一個成員（即原型屬性和原型方法）。    var i = 0;    for (i in aa.prototype) {        console.info(i);        i++;    }    alert("member: " + i);//alert出原型所有屬性和方法個數。 0個屬性和方法        function AA() {        }    AA.prototype.name = ‘leyi‘;    AA.prototype.fn = function () {        return ‘hello world!‘    };    var bb = new AA();    //執行個體化對象沒有原型對象,他可以通過__proto__來取得原型鏈上的原型屬性和原型方法    console.info(bb.prototype)//undefined    console.info(bb.__proto__) //指向AA.prototype    //那麼擷取bb的屬性和方法就可以通過原型鏈擷取AA原型上的方法屬性    console.info(bb.name === bb.__proto__.name);//leyi    console.info(bb.fn() === bb.__proto__.fn());//hello world!    //bb的的構造器函數就是AA.prototype.constructor    console.info(bb.constructor === AA.prototype.constructor)//true    //bb的的構造器函數的原型就是AA.prototype    console.info(bb.constructor.prototype === AA.prototype)//true        //繼承        //一、通過對象冒充實現繼承    function X(width, height) {        this.width = width;        this.height = height;    }        function Y(w, h) {        this.fn = X;//讓父類的建構函式成為子類的方法        this.fn(w, h);//執行該方法,繼承了X方法的width,height屬性        delete this.fn; //刪掉該方法        this.draw = function () {            console.info(this.width + ‘---‘ + this.height);//列印繼承來的兩個屬性        }    }    new Y(100, 200).draw();//100---200        //二、通過call apply實現繼承，原理跟上面差不多    function XX(width, height) {        this.width = width;        this.height = height;    }        function YY(w, h) {        XX.call(this, w, h);//or XX.apply(this,[w,h]);        this.draw = function () {            console.info(this.width + ‘---‘ + this.height);//列印繼承來的兩個屬性        }    }    new YY(300, 400).draw();//300---400            //三、通過原型鏈實現繼承    function XXX(width, height) {        this.fn = function () {            console.info(‘haha‘)        }    }        function YYY() {        this.draw = function () {            this.fn();        }    }    YYY.prototype = new XXX();    var yyy = new YYY()    console.info(yyy.constructor)//這裡有點小問題,yyy構造器函數指向了XXX    //YYY.prototype是YYY的原型，yyy.constructor.prototype是XXX的原型    console.info(yyy.constructor.prototype === YYY.prototype)//false    //修正指向    YYY.prototype.constructor = YYY//將YYY原型的構造器設定指向為YYY建構函式    console.info(yyy.constructor.prototype === YYY.prototype)//true    console.info(yyy.constructor)//YYY    yyy.draw();        //混合式繼承    function XXXX(width, height) {        this.width = width;        this.height = height;    }    XXXX.prototype.halo = ‘halo!‘        function YYYY(w, h) {        XXXX.call(this, w, h);        this.draw = function () {            console.info(this.width + ‘---‘ + this.height);        }    }    YYYY.prototype = new XXXX();    YYYY.prototype.constructor = YYYY;    new YYYY(666, 666).draw();//666---666    console.info(new YYYY().halo)//halo!        var cst = new YYYY()    console.info(cst.constructor.prototype === YYYY.prototype)//true    console.info(cst.constructor)//YYYY

 

參考：

http://www.cnblogs.com/ljchow/archive/2010/06/08/1753526.html  

http://javapolo.iteye.com/blog/1996871

JS原型和繼承