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 drag拖动代码
Dec 09 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
关于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输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
vue元素实现动画过渡效果
2017/07/01 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
python将ip地址转换成整数的方法
2015/03/17 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python得到电脑的开机时间方法
2018/10/15 Python
Python WEB应用部署的实现方法
2019/01/02 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python中如何写类
2020/06/29 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
小学教师事迹材料
2014/01/13 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript