深入浅析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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
详解参数传递四种形式
Jul 21 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 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
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python随机数分布random测试
2018/08/27 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
使用python实现学生信息管理系统
2021/02/25 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
关于元旦的广播稿
2014/02/16 职场文书
读书活动总结范文
2014/04/26 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
司机个人年终总结
2015/03/03 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
Golang map映射的用法
2022/04/22 Golang