js继承实现方法详解

发布时间 - 2026-01-10 21:53:08    点击率:

本文实例讲述了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程序设计有所帮助。


# js  # 继承  # javascript中的3种继承实现方法  # JavaScript的9种继承实现方式归纳  # js对象的构造和继承实现代码  # javascript 继承实现方法  # Javascript 继承实现例子  # Javascript 类的继承实现代码  # js的OOP继承实现(必看篇)  # 我是  # 是因为  # 相关内容  # 他是  # 不需要  # 才会  # 遍历  # 适用于  # 数据结构  # 给大家  # 重写  # 可以使用  # 拿出来  # 不完全  # 则可  # 更多关于  # 他做  # 所述  # 程序设计  # 谁就 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何续费美橙建站之星域名及服务?  如何选择PHP开源工具快速搭建网站?  java中使用zxing批量生成二维码立牌  JavaScript实现Fly Bird小游戏  JS实现鼠标移上去显示图片或微信二维码  如何快速生成可下载的建站源码工具?  Laravel怎么防止CSRF攻击_Laravel CSRF保护中间件原理与实践  微信小程序 五星评分(包括半颗星评分)实例代码  如何快速搭建高效服务器建站系统?  Java垃圾回收器的方法和原理总结  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  魔方云NAT建站如何实现端口转发?  UC浏览器如何切换小说阅读源_UC浏览器阅读源切换【方法】  专业商城网站制作公司有哪些,pi商城官网是哪个?  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站?  Laravel中的withCount方法怎么高效统计关联模型数量  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  android nfc常用标签读取总结  Python文件流缓冲机制_IO性能解析【教程】  公司网站制作需要多少钱,找人做公司网站需要多少钱?  如何在阿里云部署织梦网站?  微信小程序制作网站有哪些,微信小程序需要做网站吗?  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  googleplay官方入口在哪里_Google Play官方商店快速入口指南  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  如何快速生成ASP一键建站模板并优化安全性?  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  使用C语言编写圣诞表白程序  简单实现jsp分页  Python文件异常处理策略_健壮性说明【指导】  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  香港服务器网站推广:SEO优化与外贸独立站搭建策略  javascript中的try catch异常捕获机制用法分析  Laravel集合Collection怎么用_Laravel集合常用函数详解  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  简历在线制作网站免费版,如何创建个人简历?  Laravel怎么连接多个数据库_Laravel多数据库连接配置  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  如何用y主机助手快速搭建网站?  网站建设保证美观性,需要考虑的几点问题!  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  购物网站制作费用多少,开办网上购物网站,需要办理哪些手续?  如何快速完成中国万网建站详细流程?  如何快速查询域名建站关键信息?  如何用免费手机建站系统零基础打造专业网站?  Python自动化办公教程_ExcelWordPDF批量处理案例  长沙做网站要多少钱,长沙国安网络怎么样?  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  如何用wdcp快速搭建高效网站?