首页 > 开发 > JS > 正文

JS实现面向对象继承的5种方式分析

2024-05-06 16:45:17
字体:
来源:转载
供稿:网友

本文实例讲述了JS实现面向对象继承的5种方式。分享给大家供大家参考,具体如下:

js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式

1. 使用对象冒充实现继承(该种实现方式可以实现多继承)

实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值

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,使它指向传入函数的具体对象

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方法改变函数上下文实现继承(该种方式不能继承原型链,若想继承原型链,则采用5混合模式)

实现原理:改变函数内部的函数上下文this,使它指向传入函数的具体对象

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. 采用原型链的方式实现继承

实现原理:使子类原型对象指向父类的实例以实现继承,即重写类的原型,弊端是不能直接实现多继承

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. 采用混合模式实现继承

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

 

希望本文所述对大家JavaScript程序设计有所帮助。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表