js 繼承方式

    js是門靈活的語言,實現一種功能每每有多種作法,ECMAScript沒有明確的繼承機制,而是經過模仿實現的,根據js語言的自己的特性,js實現繼承有如下通用的幾種方式
1.使用對象冒充實現繼承(該種實現方式能夠實現多繼承)
實現原理:讓父類的構造函數成爲子類的方法,而後調用該子類的方法,經過this關鍵字給全部的屬性和方法賦值app

function Parent(firstname)  
{  
    this.fname=firstname;  
    this.age=40;  
    this.sayAge=function()  
    {  
        console.log(this.age);  
    }  
}  
function Child(firstname)  
{  
    this.parent=Parent;  
    this.parent(firstname);  
    delete this.parent;  
    this.saySomeThing=function()  
    {  
        console.log(this.fname);  
        this.sayAge();  
    }  
}  
var mychild=new  Child("李");  
mychild.saySomeThing();


2.採用call方法改變函數上下文實現繼承(該種方式不能繼承原型鏈,若想繼承原型鏈,則採用5混合模式)
實現原理:改變函數內部的函數上下文this,使它指向傳入函數的具體對象函數

3.採用Apply方法改變函數上下文實現繼承(該種方式不能繼承原型鏈,若想繼承原型鏈,則採用5混合模式)
實現原理:改變函數內部的函數上下文this,使它指向傳入函數的具體對象this

2:
function Parent(firstname)
{
    this.fname=firstname;
    this.age=40;
    this.sayAge=function()
    {
        console.log(this.age);
    }
}
function Child(firstname)
{

    this.saySomeThing=function()
    {
        console.log(this.fname);
        this.sayAge();
    }
   this.getName=function()
   {
       return firstname;
   }

}
var child=new Child("張");
Parent.call(child,child.getName());
child.saySomeThing();

----------------------------------------------------------------
3:

function Parent(firstname)
{
    this.fname=firstname;
    this.age=40;
    this.sayAge=function()
    {
        console.log(this.age);
    }
}
function Child(firstname)
{

    this.saySomeThing=function()
    {
        console.log(this.fname);
        this.sayAge();
    }
    this.getName=function()
    {
        return firstname;
    }

}
var child=new Child("張");
Parent.apply(child,[child.getName()]);
child.saySomeThing();


4.採用原型鏈的方式實現繼承
實現原理:使子類原型對象指向父類的實例以實現繼承,即重寫類的原型,弊端是不能直接實現多繼承prototype



5.採用混合模式實現繼承code

function Parent()
{

    this.sayAge=function()
    {
        console.log(this.age);
    }
}
function Child(firstname)
{
    this.fname=firstname;
    this.age=40;
    this.saySomeThing=function()
    {
        console.log(this.fname);
        this.sayAge();
    }
}

Child.prototype=new  Parent();
var child=new Child("張");
child.saySomeThing();
-----------------------------------------------------------------

function Parent()
{

    this.sayAge=function()
    {
        console.log(this.age);
    }
}

Parent.prototype.sayParent=function()
{
   alert("this is parentmethod!!!");
}

function Child(firstname)
{
    Parent.call(this);
    this.fname=firstname;
    this.age=40;
    this.saySomeThing=function()
    {
        console.log(this.fname);
        this.sayAge();
    }
}

Child.prototype=new  Parent();
var child=new Child("張");
child.saySomeThing();
child.sayParent();
相關文章
相關標籤/搜索