JavaScript继承定义与用法实践分析


Posted in Javascript onMay 28, 2018

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

javascript 继承 , 老生长谈的东西, 大家应该都很熟悉了, 平时工作基本不会直接使用, 这段时间不忙, 所以补习了下相关基础知识 ,自己动手实践, 加深理解:

基类定义如下:

// base class
function Animal(t)
{
   if(typeof t==='string')
    this.type=t;
   else
   {
    if(t)
      this.type=t.toString();
    else
      this.type='Animal'
   }
   this.speak=function(str)
   {
    if(str)
      console.log(this.type+' said '+str);
    else
      throw "please specify what you want to say!";
   }
}

1. 原型继承 (javascript 类库本身基于原型继承)

String, Number , Boolean 这三大原始类型 我们可以很直接的通过prototype 检查到他们继承自Object.

Date, RegExp ,Array 这三应该是间接继承了Object, 他们的prototype属性很特殊 :

Date.prototype =Invalid Date
RegExp.prototype=/(?:)/
Array.prototype=[]

原型继承代码如下: (可以看到Mokey 原型链上的Animal和Object)

// Monkey : Animal 
function Monkey(name,age)
{
   this.name=name;
   this.age=age;
}
Monkey.prototype=new Animal('Monkey');
// Example 01
var m=new Monkey('codeMonkey',10);
    /*
    Monkey:
    age: 10
    name: "codeMonkey"
      __proto__: Animal
      speak: function (str)
      type: "Monkey"
        __proto__: Animal
        constructor: function Animal(t)
          __proto__: Object 
*/
console.log(m.type); // Monkey
console.log(m.name); // codeMonkey
console.log(m.age); // 10
m.speak('hello world') // Monkey said hello world

2. 调用父类构造函数 ( 通过传递子类的this指针 , 将原本是父类的公开成员直接添加到了子类中,从子类原型链中无法看出继承关系)

// Human:Animal 
function Human(id,name)
{
    // call base class's constuctor function
   Animal.call(this,'Human');
   this.id=id;
   this.name=name;
}
var h=new Human(1,'leon');
/*
id: 1
name: "leon"
speak: function (str)
type: "Human"
    __proto__: Human
    constructor: function Human(id,name)
      __proto__: Object
*/
h.speak('hello world'); // Human said hello world 
console.log(h.type); // Human

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

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
JS数组去重常用方法实例小结【4种方法】
May 28 #Javascript
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
javascript少儿编程关于返回值的函数内容
May 27 #Javascript
《javascript少儿编程》location术语总结
May 27 #Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 #Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 #Javascript
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
语义化 H1 标签
2008/01/14 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
JS数组的高级使用方法示例小结
2020/03/14 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
用python实现k近邻算法的示例代码
2018/09/06 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python 堆和优先队列的使用详解
2019/03/05 Python
jupyter notebook实现显示行号
2020/04/13 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
医药类个人求职的自我评价
2014/02/12 职场文书
党组织公开承诺书
2014/03/29 职场文书
我的画教学反思
2014/04/28 职场文书
物流管理专业自荐信
2014/06/23 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
入党心得体会
2019/06/20 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB