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

 更新时间:2020年02月19日 12:18:11   作者:jadeshu  
这篇文章主要介绍了JS继承定义与使用方法,结合完整实例形式分析了JavaScript继承的基本定义、用法及操作注意事项,需要的朋友可以参考下

本文实例讲述了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>

运行结果:

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

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

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

相关文章

  • javascript图片预加载完整实例

    javascript图片预加载完整实例

    这篇文章主要介绍了javascript图片预加载实现方法,以完整实例形式分析了JavaScript图片预加载显示的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • el-date-picker 限制开始时间和结束时间的代码实现

    el-date-picker 限制开始时间和结束时间的代码实现

    在Vue.js中使用Element UI库的el-date-picker组件时,可以通过设置picker-options来限制开始时间和结束时间的选择范围,下面通过例子介绍el-date-picker 限制开始时间和结束时间的实现,感兴趣的朋友一起看看吧
    2024-08-08
  • JS 非图片动态loading效果实现代码

    JS 非图片动态loading效果实现代码

    功能说明:譬如在按某个button时,显示消息"Loading”,然后每隔一秒后后面加上".",至一定数量的"."时如:"Loading...",再重置此消息为"Loading",继续动态显示,直至按钮事件处理完成。
    2010-04-04
  • javascript类型系统_正则表达式RegExp类型详解

    javascript类型系统_正则表达式RegExp类型详解

    下面小编就为大家带来一篇javascript类型系统_正则表达式RegExp类型详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 写给小白看的JavaScript异步

    写给小白看的JavaScript异步

    写给小白看的JavaScript异步,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • webpack 处理CSS资源的实现

    webpack 处理CSS资源的实现

    这篇文章主要介绍了webpack 处理CSS资源的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • JavaScript 实现普通数组数据转化为树形数据结构的步骤说明

    JavaScript 实现普通数组数据转化为树形数据结构的步骤说明

    在 JavaScript 中,将普通数组数据转化为树形结构的数据是一个常见的任务,特别是在处理层级数据(例如分类、组织结构等)时,本文展示如何将一个扁平的数组转化为树形数据结构,感兴趣的朋友一起看看吧
    2024-12-12
  • js获取客户端外网ip的简单实例

    js获取客户端外网ip的简单实例

    这篇文章主要介绍了js获取客户端外网ip的简单实例,有需要的朋友可以参考一下
    2013-11-11
  • 一文吃透JS树状结构的数据处理(增删改查)

    一文吃透JS树状结构的数据处理(增删改查)

    在开发后台管理系统时,常常会涉及到各种树状结构的数据处理逻辑,例如:增,删,改,查等。而树状结构的处理就没有数组那么的直观。本文为大家总结了JS树状结构的数据处理的方法,需要的可以参考下
    2022-07-07
  • javascript单页面手势滑屏切换原理详解

    javascript单页面手势滑屏切换原理详解

    这篇文章主要为大家详细介绍了javascript单页面手势滑屏切换原理,感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论