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 克隆数组最简单的方法
Feb 12 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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&&mysql)六
2006/10/09 PHP
小偷PHP+Html+缓存
2006/11/25 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
详解Python locals()的陷阱
2019/03/26 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
如何理解python中数字列表
2020/05/29 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
2014新生大学四年计划书
2014/09/21 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript