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 相关文章推荐
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 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 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
vuejs指令详解
2017/02/07 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python time库基本使用方法分析
2019/12/13 Python
Python龙贝格法求积分实例
2020/02/29 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
企业厂务公开实施方案
2014/03/26 职场文书
企业文化演讲稿
2014/05/20 职场文书
单位授权委托书范文
2014/08/02 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
python process模块的使用简介
2021/05/14 Python
Python代码实现双链表
2022/05/25 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技