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 相关文章推荐
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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
PHP遍历数组的几种方法
2012/03/22 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
JavaScript定义类的几种方式总结
2014/01/06 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python通过zabbix api获取主机
2018/09/17 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
实现Python与STM32通信方式
2019/12/18 Python
劳动实践课感言
2014/02/01 职场文书
社会发展项目建议书
2014/08/25 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
《观察物体》教学反思
2016/02/17 职场文书
文书工作总结(范文)
2019/07/11 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技