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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
js中settimeout方法加参数
Feb 28 Javascript
Underscore源码分析
Dec 30 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
javascript时间差插件分享
Jul 18 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
关于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
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
PHP 无限级分类
2017/05/04 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python为什么要安装到c盘
2020/07/20 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
介绍一下write命令
2012/09/24 面试题
化工专业应届生求职信
2013/11/08 职场文书
家长学校实施方案
2014/03/15 职场文书
先进集体申报材料
2014/12/25 职场文书
公务员年终个人总结
2015/02/12 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js