javascript类继承机制的原理分析


Posted in Javascript onSeptember 12, 2009

目前 javascript的实现继承方式并不是通过“extend”关键字来实现的,而是通过 constructor function和prototype属性来实现继承。首先我们创建一个animal 类

js 代码

var animal = function (){ //这就是constructor function 了 this .name = 'pipi'; 
this .age = 10; 
this .height = 0; 
} 
//建立一个动物的实例 
var a1 = new animal ();

构造函数与其他普通函数区别在于,1.构造函数里有 this关键字,2.调用构造函数是使用的new关键字。通过new运算符调用构造函数 animal 后,系统就会返回一个对象,这个对象就相当于
var a1 = { name:'pipi' ,age:10,height:0 } 
//或者 
var a1 = new Object(); 
a1.name='pipi'; 
a1.age = 10; 
a1.height = 0;

等同这样的方式来产生js对象。
到这里我们知道如何在js中定义一个类了,接下来我们展示如何写一个cat
var cat = function (){ 
this .play = function (){ 
alert('cat play') 
} 
} 
cat .prototype = new animal (); 
//prototype 属性指向一个对象 
var c1 = new cat();

到这里,cat就继承了 animal 对象,类cat的一个实例对象c1拥有属性name,age,height,和方法play了。
那么 prototype起到了一个什么样的作用呢?
prototype就好比一个指针,它指向一个object,这个object就称为子类对象的原型。当cat的对象被创建的时候,由于cat的构造函数拥有prototype属性,那么cat的实例就会间接指向这个原型对象了(说成间接的是因为每个object都有一个 constructor 属性指向它的构造函数)。
那么问题来了,“当我们修改对象 c1 的name属性的时候,会不会修改它prototype的name属性值呢?”,答案是否定的。
接下来详细解析:
1.访问name属性: 首先当我们第一次访问c1.name的属性的时候,我们会得到值“pipi”,这个和我们预料中的一样。但是计算过程你未必知道。
它计算的过程是这样的:第一步:检查c1对象中是否有name属性,找到的话就返回值,没有就跳到第二步,显然没有找到,因为cat的构造函数中没有定义。第二步:当第一步没有找时,去间接访问 prototype对象所指向的object,如果在 prototype对象中 找到的name属性的话,就返回找到的属性值。如果还是没有找到的话,再去递归地寻找 prototype对象的 prototype对象(去找它的爷爷) ,一直到找到name属性或者没有prototype对象为止。如果到最后还是没有找到name属性的话就返回undefined。
2.设定name属性:当我们设定c1对象的name属性时,及调用 c1.name= ' new name'; 这个过程就简单多了。首先检查是否对象已有该属性,若已存在则修改当前值,若不存在则为该对象新增一个属性并设定当前值。值得一提的是,在设定值的过程中没有去访问 prototype属性。
为了加深理解,我们再看一个 read-write-read 的过程,第一次read的时候,由于自己的对象没有name属性,那么就会返回的原型对象的name属性的值。第二步,写入name的值,同样没发现本身对象有name属性,那么就在本身对象上新建一个name属性,然后赋值。第三步,再次读取name属性,由于在第二步中已经新建了name属性,此时就返回在第二步中设定的值。值得一提的是,在这三步中没有改变原型对象的值。
好了,到此详细分析了 javascript对象是如果实现继承的,其实和其他的面向对象语言不一样的是,javascript的继承机制是对象的原型继承而不是类型继承。
呵呵,欢迎看完,有不对的地方欢迎大家讨论!
Javascript 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
javascript 类定义的4种方法
Sep 12 #Javascript
一个简单的javascript类定义例子
Sep 12 #Javascript
一个简单的JavaScript 日期计算算法
Sep 11 #Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 #Javascript
javascript 一些用法小结
Sep 11 #Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 #Javascript
jquery 简单导航实现代码
Sep 11 #Javascript
You might like
php&java(三)
2006/10/09 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
js实现抽奖效果
2017/03/27 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python操作MySQL简单实现方法
2015/01/26 Python
Python中%r和%s的详解及区别
2017/03/16 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
单链表反转python实现代码示例
2018/02/08 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
企业后勤岗位职责
2014/02/28 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
Python实现简单的猜单词
2021/06/15 Python