javascript教程之不完整的继承(js原型链)


Posted in Javascript onJanuary 13, 2014

Javascript的继承和标准的oop继承有很大的区别,Javascript的继承是采用原型链的技术,每个类都会将“成员变量”和“成员函数”放到 prototype 上,Js++都过superclass将其链接起来,即 C.prototype.superclass = C.superclass = P.prototype;
当 var c = new C()时,c.__proto__ = C.prototype ;
当 c访问“成员变量”时,如果在__proto__无法获取时,就会到C.prototype查找,如果又不存在,又会到父类的prototype查找,由于只有 __proto__ 是对象创建时分配的(每个对象独立分配),其他都是定义时分配的(每个对象共享),此时,如果访问C.prototype中“成员变量”是对象时,不修改“成员变量”的本身,而是修改“成员变量”对象的成员时,修改的“成员变量”对象的成员就会被所有对象实例共享,这样就违背类设计的初衷。
例如:

'package'.j(function () {
        'class A'.j(function () {
            jpublic({
                v:{a: 1}
            });
            jprivate({
                p:{a:1}
            });
            jprotected({
                x:{a:1}
            });
        });
        'class B extends A'.j(function () {
        });
});
var b1 = new B();
b1.v.a = 5;
b1.x.a = 5;
var b2 = new B();
console.log(b1.v.a) // 输出为 5
console.log(b1.x.a) // 输出为 5
console.log(b2.v.a) // 输出也为 5,并不是预想的 1
console.log(b2.x.a) // 输出为 1
console.log(b2.p.a) // 不可用,会提示 p不存在

如何解决此问题?
A. 将 v 这样的成员“成员变量”(其本身是对象)不在原型链上定义,而是在构造函数中调用,此时,创建对象实例时,就会在对象的__proto__上分配。

Js++提供了类似的方法,只要在jprivate中定义的“成员变量”或“成员函数”都会分配到对象的__proto__上,且只有本实例可用, jprotected中定义的“成员变量”(其本身是对象)也会分配到对象的__proto__上,且只有继承他的可用,

B. 原型链上只定义只读的“成员变量”(其本身是对象)

C.jpublic 定义的“成员变量”(其本身是对象)中的成员,只是只读成员,切记不可赋值,否则会在各个实例中共享。

Javascript 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
document.write的几点使用心得
May 14 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
vue elementUI批量上传文件
Apr 26 Vue.js
javascript函数作用域学习示例(js作用域)
Jan 13 #Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 #Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 #Javascript
js导航栏单击事件背景变换示例代码
Jan 13 #Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 #Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 #Javascript
parentElement,srcElement的使用小结
Jan 13 #Javascript
You might like
PHP PDOStatement::fetch讲解
2019/01/31 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JQuery中serialize() 序列化
2015/03/13 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
django session完成状态保持的方法
2018/11/27 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
linux下进程间通信的方式
2013/01/23 面试题
物业保安员岗位职责
2014/03/14 职场文书
实习生评语
2014/04/26 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
护士2015年终工作总结
2015/04/29 职场文书
Python数据类型最全知识总结
2021/05/31 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
Redis入门教程详解
2021/08/30 Redis
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
pandas进行数据输入和输出的方法详解
2022/03/23 Python
vue递归实现树形组件
2022/07/15 Vue.js