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随即打乱数组实现代码
Dec 03 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
Vue.js 图标选择组件实践详解
Dec 03 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
关于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中基本符号及使用方法
2010/03/23 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
actionscript与javascript的区别
2011/05/25 Javascript
js常用代码段收集
2011/10/28 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
Python字符串的转义字符
2022/04/07 Python