JS继承定义与使用方法简单示例


Posted in Javascript onFebruary 19, 2020

本文实例讲述了JS继承定义与使用方法。分享给大家供大家参考,具体如下:

<script>
function Enemy() { 
  this.level = 50; 
  console.log("Enemy constructor"); 
}
Enemy.prototype.attack_play = function(){
  console.log("attack_play");
};
Enemy.prototype.wudiai = 100;
Enemy.wudiai = "1213";
Enemy.gongji = function(){
  console.log("gongji  asasasd "+ Enemy.wudiai);
}
function BossEnemy(){
  Enemy.call(this);
  console.log("Boss constructor");
}
// 写法1
// BossEnemy.prototype = {constructor: BossEnemy,};
// for(var i in Enemy.prototype){
//   BossEnemy.prototype[i] = Enemy.prototype[i];
// }
// 写法2
var a = function (){};
a.prototype = Enemy.prototype;
BossEnemy.prototype = new a();
BossEnemy.prototype.boss_attack = function(){
  console.log("boss_attack");
};
BossEnemy.staticFunc = function(){
  console.log("staticFunc called!");
};
var bos = new BossEnemy();
bos.boss_attack();
bos.attack_play();
BossEnemy.staticFunc();
console.log("==========================");
BossEnemy.prototype.attack_play = function(){
  Enemy.prototype.attack_play.call(this);
  console.log("BossEnemy attack play!");
}
bos.attack_play();
console.log("*****************************");
// 写法三 js6
class BingEnemy extends Enemy{
  constructor(){
    super();
    this.flag = true;
    this.name = "通天教主";
    this.level = 100;
  }
  static staticFunc(){
    console.log("static func called!");
  }
  get BingName(){
    return this.name;
  }
  set BingName(value){
    this.name = value;
  }
};
BingEnemy.haha ="123";
let bing = new BingEnemy();
console.log(bing);
BingEnemy.staticFunc();
bing.attack_play();
console.log(bing.BingName);
bing.BingName = "jade";
console.log(bing.BingName);
//console.log(BingEnemy.wudi);
console.log("============================");
</script>

运行结果:

JS继承定义与使用方法简单示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JavaScript中通过提示框跳转页面的方法
Feb 14 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 #Javascript
vue中实现回车键登录功能
Feb 19 #Javascript
Vue中实现回车键切换焦点的方法
Feb 19 #Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 #Javascript
Vue常用的全选/反选的示例代码
Feb 19 #Javascript
详解node和ES6的模块导出与导入
Feb 19 #Javascript
JS实现分页导航效果
Feb 19 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
php从字符串创建函数的方法
2015/03/16 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
网页设计常用的一些技巧
2006/12/22 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
js的各种数据类型判断的介绍
2019/01/19 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
wxpython布局的实现方法
2019/11/01 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
如何在python中实现线性回归
2020/08/10 Python
python开发入门——列表生成式
2020/09/03 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
在购买印度民族服饰:Soch
2020/09/15 全球购物
六道php面试题附答案
2014/06/05 面试题
港湾网络笔试题
2014/04/19 面试题
聘用意向书范本
2014/04/01 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
毕业论文致谢信
2015/05/14 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
银行岗位培训心得体会
2016/01/09 职场文书