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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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缓存技术的使用说明
2011/08/06 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python解决八皇后问题示例
2018/04/22 Python
Python操作mongodb的9个步骤
2018/06/04 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
高中军训感言600字
2014/03/11 职场文书
军训口号
2014/06/13 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
画展邀请函
2015/01/31 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Python 全局空间和局部空间
2022/04/06 Python