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 多行滚动代码(附详细解释)
Jun 17 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
JS常用跨域方法实现原理解析
Dec 09 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
php实现分页工具类分享
2014/01/09 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
Javascript - HTML的request类
2007/01/09 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
Python中的各种装饰器详解
2015/04/11 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
python IP地址转整数
2020/11/20 Python
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
招商银行工作证明
2015/06/17 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书