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开源框架-jQuery使用手册(1)
Mar 10 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
5款Javascript颜色选择器
Oct 25 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 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&mysql(六)
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
python批量生成本地ip地址的方法
2015/03/23 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
解释一下抽象方法和抽象类
2016/08/27 面试题
大专生自荐信
2013/10/04 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
财务主管的岗位职责
2013/12/30 职场文书
超市5.1促销活动
2014/01/15 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
如何写好建议书
2014/03/13 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
新闻学专业求职信
2014/07/28 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
死亡证明书样本说明
2014/10/18 职场文书
库房管理员岗位职责
2015/02/12 职场文书
关于迟到的检讨书
2015/05/06 职场文书
培根随笔读书笔记
2015/07/01 职场文书
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript