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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
js实现二级联动简单实例
Jan 11 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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
文章推荐系统(二)
2006/10/09 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
php链式操作的实现方式分析
2019/08/12 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
Selenium的使用详解
2018/10/19 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python安装requests库的实例代码
2019/06/25 Python
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
师德师风的心得体会
2014/09/02 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
外出考察学习心得体会
2016/01/18 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS