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 源码分析笔记(2) 变量列表
May 28 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
form自动提交实例讲解
2017/07/10 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
优秀医生事迹材料
2014/02/12 职场文书
团员自我评价范文
2015/03/10 职场文书
情感电台广播稿
2015/08/18 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫