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计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
vue实现自定义多选按钮
Jul 16 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实现补齐关闭的HTML标签
2016/03/22 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
javascript整除实现代码
2010/11/23 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
对python的输出和输出格式详解
2018/12/08 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
python调用staf自动化框架的方法
2018/12/26 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python适配器模式代码实现解析
2019/08/02 Python
python3 map函数和filter函数详解
2019/08/26 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python lambda的使用详解
2021/02/26 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
单位领导证婚词
2014/01/14 职场文书
德语专业求职信
2014/03/12 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
mysql如何查询连续记录
2022/05/11 MySQL
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL