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 validate在ie8下的bug解决方法
Nov 13 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
微信小程序 天气预报开发实例代码源码
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
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
详解webpack-dev-server的简单使用
2018/04/02 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python连接oracle数据库实例
2014/10/17 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
django 模型字段设置默认值代码
2020/07/15 Python
python爬取招聘要求等信息实例
2020/11/20 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
自我鉴定思想方面
2013/10/07 职场文书
可口可乐广告词
2014/03/20 职场文书
会计工作检讨书
2015/02/19 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python