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实现控制台控件的代码
Sep 04 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
javascript实现获取服务器时间
May 19 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
jQuery实现高级检索功能
May 28 jQuery
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 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批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PDO::inTransaction讲解
2019/01/28 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python实现快速排序的方法详解
2019/10/25 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
千元咖啡店的创业计划书范文
2013/12/29 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
工伤赔偿协议书
2014/04/15 职场文书
2014年党支部承诺书
2014/05/30 职场文书
年终晚会活动方案
2014/08/21 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
销售员自我评价
2015/03/11 职场文书
区域销售大会开幕词
2016/03/04 职场文书