javascript 5種方式實現繼承

//繼承第一種方式:對象冒充

    function Parent(username){
        this.username = username;//this由指向Parent改爲指向Child
        this.sayHello=function(){
            alert(this.username);
        }
    }

    function Child(username,password){
        //下面的3行代碼是最關鍵的
        this.method = Parent;//指向函數的引用
        this.method(username);//調用構造函數
        delete this.method;

        //Parent(username) //wrong  syntax error
        //new Parent(username) //wrong  this keyword still points to Parent

        this.password = password;
        this.sayWord=function(){
            alert(this.password);
        }
    }

    var parent = new Parent("zhangsan");
    var child  = new Child('lisi','234');
    parent.sayHello();
    child.sayHello();
    child.sayWord();

    //繼承第二種方式 call方法
    //call方法是Function對象中的方法,因此我們定義的每個函數都擁有該方法
    //可以通過函數名來調用call方法

    function Parent(username){
        this.username = username;//this由指向Parent改爲指向Child
        this.sayHello=function(){
            alert(this.username);
        }
    }

    function Child(username,password){
        Parent.call(this,username);//
        this.password = password;
        this.sayWord=function(){
            alert(this.password);
        }
    }

    var parent = new Parent("zhangsan");
    var child  = new Child('lisi','234');
    parent.sayHello();
    child.sayHello();
    child.sayWord();
    

    //繼承第三種方式 apply方法
    function Parent(username){
        this.username = username;//this由指向Parent改爲指向Child
        this.sayHello=function(){
            alert(this.username);
        }
    }

    function Child(username,password){
        Parent.apply(this,new Array(username));//數組
        this.password = password;
        this.sayWord=function(){
            alert(this.password);
        }
    }

    var parent = new Parent("zhangsan123");
    var child  = new Child('lisi','234567');
    parent.sayHello();
    child.sayHello();
    child.sayWord();

    //繼承第四種方式 原型鏈(prototype chain)
    //無法傳遞屬性參數值
    function Parent(){

    }
    Parent.prototype.hello="hello";
    Parent.prototype.sayHello = function(){
        alert(this.hello);
    }

    function Child(){

    }

    Child.prototype = new Parent();
    Child.prototype.world="world";
    Child.prototype.sayWorld=function(){
        alert(this.world);
    }

    var parent = new Parent();
    parent.sayHello();
    var child = new Child();
    child.sayHello();
    child.sayWorld();

    //繼承第五種方式 混合方式(最推薦)
    function Parent(hello){
        this.hello=hello;
    }
    Parent.prototype.sayHello=function(){
        alert(this.hello);
    }
    function Child(world){
        Parent.call(this,world);
        this.world = world;
    }
    Child.prototype = new Parent();
    Child.prototype.sayWorld=function(){
        alert(this.world);
    }
    var parent = new Parent("hello");
    parent.sayHello();
    var child = new Child("world");
    child.sayHello();
    child.sayWorld();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章