js继承实现方法详解


Posted in Javascript onDecember 16, 2016

本文实例讲述了js继承实现方法。分享给大家供大家参考,具体如下:

var animal=function(name){ //构造函数
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){ //prototype主要作用:给类增加一个新的属性或函数
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var dog=new animal("小黑");  //实例化
dog.sayhello();
dog.shout();
dog.game();

一、原型继承

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){   //重写父类的函数
  alert(this.name+"汪汪叫!");
  }
}
Dog.prototype=Cat.prototype=new animal();
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();
var cat=new Cat("小白");
cat.sayhello();
cat.shout();
cat.game();

animal是父类(或超类),要继承于谁,谁就是父类(超类)

改进:专门写个函数,用来实现继承

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
Function.prototype.extends=function(superclass){      //extends是保留关键字,不能拿出来单独使用,如var extends=function(){},而这里可以使用是因为他做为函数的属性添加上去
  this.prototype=new superclass();
};
animal.prototype.shout=function(){
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){
  alert(this.name+"汪汪叫!");
  }
}
Dog.extends(animal);
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();
var dog=new Dog("小白");
dog.sayhello();
dog.shout();
dog.game();

二、call,apply继承(不完全继承)

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+"正在叫!");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍!");
};
var Dog=function(name){
  animal.call(this,name);
}
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();

输出:hi我是小黑

TypeError: dog.shout is not a function

通过call(apply)的方式,只能改变其this指向,通过prototype添加进去的方法,他是无法直接继承的

总结:call,apply这种方式的继承适用于没有prototype的类或者不需要继承prototype所添加属性或函数的类,因为call和apply函数只是实现了方法的替换,而没有对对象的属性和函数进行复制操作

原型继承,则可以继承所有的属性和函数

继承的属性,只有删除原有属性,才会输出继承的属性

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
JavaScript 面向对象的 私有成员和公开成员
May 13 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
Bootstrap插件全集
Jul 18 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
详解jQuery简单的表格应用
Dec 16 #Javascript
JS中parseInt()和map()用法分析
Dec 16 #Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 #Javascript
JS数字千分位格式化实现方法总结
Dec 16 #Javascript
jquery插件锦集【推荐】
Dec 16 #Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 #Javascript
JS实现字符串转驼峰格式的方法
Dec 16 #Javascript
You might like
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python collections模块实例讲解
2014/04/07 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
环境科学毕业生自荐信
2013/11/21 职场文书
顶岗实习计划书
2014/01/10 职场文书
淘宝好评语句大全
2014/12/31 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
个性与发展自我评价
2015/03/06 职场文书
党员进社区活动总结
2015/05/07 职场文书
工作证明书
2015/06/15 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang