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 相关文章推荐
javascript面向对象入门基础详细介绍
Sep 05 Javascript
js控制frameSet示例
Sep 10 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
vue-cli如何快速构建vue项目
Apr 26 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 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
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python的argparse库使用详解
2018/10/09 Python
python xpath获取页面注释的方法
2019/01/14 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python如何快速生成时间戳
2020/07/21 Python
django下创建多个app并设置urls方法
2020/08/02 Python
编程输出如下图形
2013/11/24 面试题
《影子》教学反思
2014/02/21 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
开展读书活动总结
2014/06/30 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
政协工作总结2015
2015/05/20 职场文书
企业培训简报范文
2015/07/20 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
护理工作心得体会
2016/01/22 职场文书
会计入职心得体会
2016/01/22 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python