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 ajax同步异步的执行最终解决方案
Apr 26 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
用PHP生成html分页列表的代码
2007/03/18 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
javascript中this的四种用法
2015/05/11 Javascript
异步JavaScript编程中的Promise使用方法
2015/07/28 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
了解JavaScript函数中的默认参数
2019/05/30 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
C#面试常见问题
2013/02/25 面试题
护理职业生涯规划书
2014/01/24 职场文书
销售主管岗位职责
2014/02/08 职场文书
应聘英语教师求职信
2014/04/24 职场文书
宣传普通话标语
2014/06/27 职场文书
小学生作文批改评语
2014/12/25 职场文书