浅析2种JavaScript继承方式

 更新时间:2015年12月04日 08:30:38   作者:我的头很光  
这篇文章主要介绍了2种JavaScript主要继承方式,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式,感兴趣的小伙伴们可以参考一下

js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。
1.原型(prototype):

function Body(name,age){// 创建一个Body类
  this.name = name;// 赋予基础属性name、age
  this.age = age;
}
Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
  console.log(this.name);
}
var a = new Body('wutao','10');//创建一个Body的实例对象

function Another(){}
Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
var b = new Another();//创建Another子类的实例
Another.prototype.sex ="mail";//定义子类的属性及方法
Another.prototype.saySex = function(){
  console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 实例b拥有父类Body的方法sayName
b.saySex();//mail 实例b拥有自己定义的方法saySex

2.借用构造函数(call&apply),也可以理解为组合式继承
call:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
b.sayFunc();//wwwwww-22

apply:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello
b.sayFunc();//ttt-222

 js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。

以上就是关于JavaScript继承方式的详细介绍,希望对大家的学习有所帮助。

相关文章

  • js计算时间差代码【包括计算,天,时,分,秒】

    js计算时间差代码【包括计算,天,时,分,秒】

    下面小编就为大家带来一篇js计算时间差代码【包括计算,天,时,分,秒】。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • JavaScript语句可以不以;结尾的烦恼

    JavaScript语句可以不以;结尾的烦恼

    JavaScript语句可以不以;结尾的烦恼...
    2007-03-03
  • 详解微信小程序文件下载--视频和图片

    详解微信小程序文件下载--视频和图片

    这篇文章主要介绍了微信小程序文件下载视频和图片,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 使用开源工具制作网页验证码的方法

    使用开源工具制作网页验证码的方法

    这篇文章主要介绍了使用开源工具制作网页验证码的方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • 巧用Javascript的逻辑运算符

    巧用Javascript的逻辑运算符

    本篇文章主要介绍了Javascript逻辑运算符"或"的巧用实例,希望对大家有所帮助,下面就随小编一起来看看吧
    2016-12-12
  • 详解JVM系列之内存模型

    详解JVM系列之内存模型

    JVM是一种用于计算设备的规范,它是一个虚构出来的机器,是通过在实际的计算机上仿真模拟各种功能实现的。JVM的内存区域可以被分为:线程、栈、堆、静态方法区。本文将介绍JVM的内存模型,感兴趣的小伙伴,可以参考下
    2021-06-06
  • JsRender实用入门教程

    JsRender实用入门教程

    这篇文章主要介绍了JsRender实用入门实例,包含了tag else使用、循环嵌套访问父级数据等知识点,并提供了完整的实例下载,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • JavaScript中判断为整数的多种方式及保留两位小数的方法

    JavaScript中判断为整数的多种方式及保留两位小数的方法

    这篇文章主要介绍了JavaScript中判断为整数的多种方式,以及保留两位小数的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • JavaScript Array对象基本方法详解

    JavaScript Array对象基本方法详解

    这篇文章主要介绍了JavaScript Array对象基本方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js编写简易的计算器

    js编写简易的计算器

    这篇文章主要为大家详细介绍了js编写简易的计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07

最新评论