js的三种继承方式详解


Posted in Javascript onJanuary 21, 2017

1.js原型(prototype)实现继承

代码如下

<body> 
<script type="text/javascript"> 
 function Parent(name,age){
   this.name=name;
   this.age=age;
   this.sayHi=function(){
    alert("Hi, my name is "+this.name+", my age is "+this.age);
   }
  }
//Child继承Parent
  function Child(grade){
   this.grade=grade;
   this.sayGrade=function(){
    alert("My grade is "+this.grade);
   }
  }
  Child.prototype=new Parent("小明","10");/////////// 
  var chi=new Child("5");
  chi.sayHi();
  chi.sayGrade();
</script> 
</body>

2.构造函数实现继承 

代码如下:

<body> 
<script type="text/javascript"> 
 function Parent(name,age){
   this.name=name;
   this.age=age;
   this.sayHi=function(){
    alert("Hi, my name is "+this.name+", my age is "+this.age);
   }
  }
//Child继承Parent 
  function Child(name,age,grade){
   this.grade=grade;
   this.sayHi=Parent;///////////
   this.sayHi(name,age);
   this.sayGrade=function(){
    alert("My grade is "+this.grade);
   }
  }
  var chi=new Child("小明","10","5");
  chi.sayHi();
  chi.sayGrade();
</script> 
</body>

3.call , apply实现继承         -----很方便!

代码如下:

<body> 
<script type="text/javascript"> 
 function Parent(name,age){
   this.name=name;
   this.age=age;
   this.sayHi=function(){
    alert("Hi, my name is "+this.name+", my age is "+this.age);
   }
  }
  function Child(name,age,grade){
   this.grade=grade;
   // Parent.call(this,name,age);/////////// 
   // Parent.apply(this,[name,age]);/////////// 都可
   Parent.apply(this,arguments);/////////// 
   this.sayGrade=function(){
    alert("My grade is "+this.grade);
   }
  // this.sayHi=function(){
   //  alert("Hi, my name is "+this.name+", my age is "+this.age+",My grade is "+this.grade);
   // }
  }
  var chi=new Child("小明","10","5");
  chi.sayHi();
  chi.sayGrade();
</script> 
</body>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery读取XML文件内容的方法
Mar 09 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
轮播的简单实现方法
Jul 28 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 #Javascript
微信小程序 自定义对话框实例详解
Jan 20 #Javascript
Vue实例简单方法介绍
Jan 20 #Javascript
微信小程序 Toast自定义实例详解
Jan 20 #Javascript
JavaScript判断浏览器及其版本信息
Jan 20 #Javascript
JS中传递参数的几种不同方法比较
Jan 20 #Javascript
JS出现失效的情况总结
Jan 20 #Javascript
You might like
一个域名查询的程序
2006/10/09 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
jquery中常用的SET和GET
2009/01/13 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
Angular路由简单学习
2016/12/26 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
十个免费的web前端开发工具详细整理
2017/09/18 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
影视动画专业个人的自我评价
2013/12/31 职场文书
公司承诺书格式
2014/05/21 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python