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 相关文章推荐
jquery 学习笔记一
Apr 07 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
javascript运动详解
Jul 06 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
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编程语言开发动态WAP页面
2006/10/09 PHP
php实现rc4加密算法代码
2012/04/25 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
什么是测试驱动开发(TDD)
2012/02/15 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
大学自主招生推荐信
2014/05/10 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
辞职信怎么写?
2019/05/21 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技