深入浅析javascript继承体系


Posted in Javascript onOctober 23, 2017

最近做web项目,接触了jquery等框架,虽然使用方便,但是还是想学习下Javascript,今天分享下最近对js原型继承的理解,不足之处欢迎指正。

一、构造器的原型属性与原型对象

刚接触js时通常依样画瓢,用函数new一个实例,也不知道其原因,只听说js中函数即对象。原来js中没有采用Java等语言中的类继承体系,而是使用原型对象(prototype)实现继承体系,具体说是利用“构造器”实现类的功能。

首先解释下原型继承中的两个重要概念:原型属性、原型对象(实例)。

就js对象系统而言,创建的每个函数(构造器)都有一个prototype原型属性,同时,通过构造器创建的每个对象实例也包含一个_proto_属性,prototype和_proto_属性是一个指针,指向原型对象。普通函数与构造函数的唯一区别就是,其原型属性prototype是不是一个有意义的值。

原型属性prototype所指向的原型是一个对象实例(Object instance)。具体如下图所示,若构造器Animal()有一个原型对象B,则由该构造器创建的实例都必然复制于B。即:Animal()的实例a1的_proto_属性也会指向原型对象B。因此,实例a1能够继承B的所有属性、方法和其他性质。

深入浅析javascript继承体系

图1 js对象实例化实现

二、空的对象

在javascript中,“空的对象”是整个原型继承体系的根基,是所有对象的基础。介绍“空的对象”之前,必须先介绍下“空对象(null)”。

空对象null

null不是“空的对象”,作为javascript中的一个保留字,其含义是:

(1)属于对象类型

(2)对象是空值

作为一个对象类型,可以使用for…in去列举它,但是作为一个空值,null没有任何方法和属性(包括constructor、_proto_等属性),因此列举不到任何内容。如下例所示:

var num=0;
for(var propertyName in null)

{

num++;

}

Alert(num);//显示值为0

最重要的一点是null没有原型,它并不是自Object()构造器(或其子类)实例化而来,对其进行instanceof 运算会返回false。

2.“空的对象”

“空的对象”是指一个标准的、通过Object()构造的对象实例。例如:

obj=new Object();或 obj={};

“空的对象”具有“对象”的一切特性,因此可以存取toString()、valueof等预定义的属性和方法。

3.“空的对象”与null的关系

如下图2中红线所示路径,当通过”Object.prototype._proto_”获取Object原型对象的-proto-属性时,将会得到”null”,由于null对象没有任何属性,也就是说”Object {}”

原型对象就是原型链的终点了。

深入浅析javascript继承体系

图2 js类继承体系

三、Javascript继承的实现以及原型链维护

(1)继承的实现

第一节说过javascript中类继承是通过修改构造函数的原型属性prototype实现的。如下代码所示:

function Animal() {
this.name = 'Animal';
};
function Dog() {
};
Dog.prototype = new Animal();
var d = new Dog();
console.log(d.name);//'Animal'

通过创建一个Animal类型的实例并将其赋值给构造函数Dog()的prototype属性,从而实现类型继承,即Animal是Dog的父类。这样Dog类型的实例d也能访问Animal类型的name属性。

(2)原型链

JS对象继承体系中有两种原型链:“内部原型链”和“构造器原型链”。如图3所示,黑色箭头指示路径是通过构造函数的prototype属性保持的“构造器原型链”。红色箭头指示路径是通过对象实例的_proto_属性保持的“内部原型链”。

深入浅析javascript继承体系

图3 原型链

(3)原型链维护

图3说明构造器通过显示的prototype构建了一个原型链,而对象实例也通过_ proto _属性构建了一个原型链。由于_ proto _是一个不可访问的内部属性(Chrome中可以查看对象_ proto _属性的值,但不可以修改),因此无法从子类(Dog)的实例dog1开始访问整个原型链。因此,我们需要从图3中的“内部原型链”和“构造器原型链”中找到一个连接点,使得实例不能访问obj._proto_的情况下通过构造器访问内部原型链(将两种原型链串联起来)。

若要从子类的实例开始访问整个原型链,需要使用实例的constructor属性维护原型链。

其实,JavaScript已经为构造器维护了原型属性,根据如下测试代码,当我们自定义一个构造器时,其原型对象是一个Object()类型的实例,但是其原型对象的constructor属性默认总是指向构造器自身,而非指向其父类Object。如图4中构造器实例中蓝色框中的constructor属性,该constructor属性继承自原型对象,因此可以得出一个自定义的构造器产生的实例,其constructor属性默认总是指向该构造器。

function Animal() {
};
var a = new Animal();
console.log(Animal.prototype);//Object(){}
console.log(Animal.prototype.constructor === Animal);//true//true

深入浅析javascript继承体系

图4

因此,在_proto_属性不可访问时,可通过a1.constructor.prototype获取实例a1的原型对象。然而,当我们自定义一个构造函数Dog(),并且手动指定其prototype属性值为Animal,即指定Dog的父类为Animal。此时访问d1.constructor值为Animal,而不是Dog;由图5可以看出,Dog的原型对象和dog分别由Animal()和Dog()两个不同的构造器产生,然而他们的constructor属性指向了相同的构造器(Animal),这样就与使用constructor属性串联两种原型链的设想冲突了。

深入浅析javascript继承体系

图5

是构造器出问题还是原型出了问题?图5可以看出,原型继承要求的“复制行为”已经正确实现,能够从子类实例中访问原型对象属性,问题是在给子类构造器Dog()赋予一个原型对象时应该“修正”该原型对象的构造属性值(constructor)。ECMAScript 3标准提供的方法是:保持原型的构造器属性,在子类构造器中初始化其实例对象的构造属性。代码如下: 

function Dog () {
//初始化constructor属性

 this.constructor=Dog; //或 this.constructor=arguments.callee;

};

Dog.prototype = new Animal();//赋予原型对象,实现继承

深入浅析javascript继承体系

图6

对constructor属性“修正”后效果如图6所示,在子类构造器Dog中初始化其实例对象的constructor属性后,Dog的实例对象的constructor都指向Dog,而Dog的原型对象的constructor仍然指向父类型构造器Animal。这样就可以实现利用constructor属性串联起原型链,可以从子类实例开始回溯整个原型链。

总结

以上所述是小编给大家介绍的javascript继承体系的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
JS获取一个未知DIV高度的方法
Aug 09 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
Vue.js组件通信的几种姿势
Oct 23 #Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 #Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 #Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 #Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 #Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 #Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
vue中轮训器的使用
2019/01/27 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
Python 打印中文字符的三种方法
2018/08/14 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
用Python 执行cmd命令
2020/12/18 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
消防安全汇报材料
2014/02/08 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
运动会新闻稿
2015/07/17 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript