快捷導(dǎo)航

JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析

更新時(shí)間：2018年07月21日 12:16:05 作者：寒星冷雨

這篇文章主要介紹了JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見(jiàn)實(shí)現(xiàn)方法原理與操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式。分享給大家供大家參考，具體如下：

js是門(mén)靈活的語(yǔ)言，實(shí)現(xiàn)一種功能往往有多種做法,ECMAScript沒(méi)有明確的繼承機(jī)制，而是通過(guò)模仿實(shí)現(xiàn)的，根據(jù)js語(yǔ)言的本身的特性,js實(shí)現(xiàn)繼承有以下通用的幾種方式

1. 使用對(duì)象冒充實(shí)現(xiàn)繼承(該種實(shí)現(xiàn)方式可以實(shí)現(xiàn)多繼承)

實(shí)現(xiàn)原理:讓父類的構(gòu)造函數(shù)成為子類的方法,然后調(diào)用該子類的方法,通過(guò)this關(guān)鍵字給所有的屬性和方法賦值

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方法改變函數(shù)上下文實(shí)現(xiàn)繼承(該種方式不能繼承原型鏈,若想繼承原型鏈，則采用5混合模式)

實(shí)現(xiàn)原理:改變函數(shù)內(nèi)部的函數(shù)上下文this,使它指向傳入函數(shù)的具體對(duì)象

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. 采用Apply方法改變函數(shù)上下文實(shí)現(xiàn)繼承(該種方式不能繼承原型鏈,若想繼承原型鏈，則采用5混合模式)

實(shí)現(xiàn)原理:改變函數(shù)內(nèi)部的函數(shù)上下文this,使它指向傳入函數(shù)的具體對(duì)象

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. 采用原型鏈的方式實(shí)現(xiàn)繼承

實(shí)現(xiàn)原理:使子類原型對(duì)象指向父類的實(shí)例以實(shí)現(xiàn)繼承,即重寫(xiě)類的原型,弊端是不能直接實(shí)現(xiàn)多繼承

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();

5. 采用混合模式實(shí)現(xiàn)繼承

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();

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: