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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
jQuery插件slider实现拖动滑块选取价格范围
Apr 30 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 Javascript
关于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/01 无线电
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
Python threading多线程编程实例
2014/09/18 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
实习单位接收函模板
2014/01/10 职场文书
军训 自我鉴定
2014/02/03 职场文书
服装创业计划书范文
2014/02/05 职场文书
高一学生期末评语
2014/04/25 职场文书
我爱我校演讲稿
2014/05/21 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
python常见的占位符总结及用法
2021/07/02 Python