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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
Vue数据双向绑定底层实现原理
Nov 22 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
js实现小星星游戏
Mar 23 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 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
js 字符串操作函数
2009/07/25 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
图解Javascript——作用域、作用域链、闭包
2017/03/21 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
tornado+celery的简单使用详解
2019/12/21 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
三年级学生评语大全
2014/12/26 职场文书
办公用品质量保证书
2015/05/11 职场文书
郭明义观后感
2015/06/08 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android