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 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
Bootstrap表单布局
Jul 19 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
js加强的经典分页实例
2013/03/15 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
vue+element UI实现树形表格
2020/12/29 Vue.js
详解Python如何生成词云的方法
2018/06/01 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
高一英语教学反思
2014/01/22 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
校友回访母校寄语
2015/02/26 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js
python数字图像处理:图像简单滤波
2022/06/28 Python