JavaScript中子对象访问父对象的方式详解


Posted in Javascript onSeptember 01, 2016

在传统面向对象的编程语言里,都会提供一种子类访问父类的特殊语法,引文我们在实现子类方法往往需要父类方法的额外辅助。在这种情况下,子类通常会调用父类中的同名方法,最终以便完成工作。

javascript虽然没有类似上述的特殊语法,但我们可以造一个啊!

function her(){};
her.prototype.name = 'Anna';
her.prototype.toString = function(){
var const = this.constructor;
return const.uber ? this.const.uber.toString() + ',' + this.name : this.name;
}
function his(){};
var F = function(){};
F.prototype = her.prototype;
his.prototype = new F();
his.prototype.constructor = her;
his.uber = her.prototype;
his.prototype.name ='Jock';
function child(width, height){
this.width = width;
this.height = height;
}
var F = function(){};
F.prototype = his.prototype;
child.prototype = new F();
child.prototype.constructor = child;
child.uber = his.prototype;
child.prototype.name = 'Los';
child.prototype.getArea = function(){
return this.width * this.height;
}

我们在构建关系的过程中,我们引入了一个uber属性,并令其指向父及对象。

在这里,我们更新了以下内容:

1. 将usber属性设置成指向父对象的引用;

2. 对toString()方法进行了更新;

之前的toString()方法只是简单的返回this.name,现在我们给他添加了额外的任务,就是检查this.constructor.usber属性,如果存在就调用该属性的toString()方法。

由于this.constructor本身是一个函数,而this.constructo.usber是指向当前对象父级原型的引用,所以我们调用child实体的toString()方法时,其原型链上的toString()方法都会被调用。

var my = child(1,2);
my.toString() // Anna, Jock, Los

以上所述是小编给大家介绍的JavaScript中子对象访问父对象的方式详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
EL表达式截取字符串的函数说明
Sep 22 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 #Javascript
老生常谈JavaScript 函数表达式
Sep 01 #Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 #Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 #Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 #Javascript
深入理解jQuery3.0的domManip函数
Sep 01 #Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 #Javascript
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python开发编码规范
2006/09/08 Python
python实现拓扑排序的基本教程
2018/03/11 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
python实现图片压缩代码实例
2019/08/12 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
struct与class的区别
2014/02/03 面试题
机修工岗位职责
2013/11/24 职场文书
我的求职择业计划书
2014/04/04 职场文书
七夕情人节促销方案
2014/06/07 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers