深入浅析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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
vue2中使用less简易教程
Mar 27 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php单例模式示例分享
2015/02/12 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python itertools模块详解
2015/05/09 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
jupyter notebook清除输出方式
2020/04/10 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
幼儿园教师备课制度
2014/01/12 职场文书
公司委托书格式范文
2014/04/04 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
2014年检验科工作总结
2014/11/22 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
比较node.js和Deno
2021/04/27 Javascript
Django如何与Ajax交互
2021/04/29 Python
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android