JavaScript子类用Object.getPrototypeOf去调用父类方法解析


Posted in Javascript onDecember 05, 2013

每个function有个prototype属性,称为原型。每个对象也有个原型,Firefox/Safari/Chrome/Opera 中可以通过__proto__来访问,IE6/7/8中没有提供相关接口。

function Person(){ 
    this.method1 = function(){} 
} 
Person.prototype.method2 = function(){} function Man(){} 
Man.prototype = new Person(); 
Man.prototype.m1 = function(){} 
Man.prototype.m2 = function(){} 
var m = new Man(); 
for(var a in m.__proto__){ 
    alert(a); 
}

定义了父类Person,子类Man。new一个Man的对象,打印出所有属性。

ECMAScript V5为Object添加了静态的getPrototypeOf方法( Firefox/Chrome已实现 ),用来获取对象的原型。用它可以模仿Java的super。

function Person(){ 
    this.method1 = function(){alert(1)} 
} 
Person.prototype.method2 = function(){alert(2);} function Man(){ 
    this.m1 = function(){ 
        Object.getPrototypeOf(this).method1(); 
    } 
} 
Man.prototype = new Person();//原型继承 
Man.prototype.m2 = function(){ 
    Object.getPrototypeOf(this).method2(); 
} 
  
var man = new Man(); 
man.m1(); 
man.m2();

子类Man中挂在this上的m1方法中调用父类Person中挂在this上的method1,挂在prototype上的m2方法调用父类prototype上的method2。

以上可以看出对象原型不但包括其构造器prototype上的属性,也包括构造器中this上的属性。当然由于JavaScript中上下文的原因,父类中的this不能在子类中不能很好的自动转换,需要一些技巧完成。

Java中是这样的

package bao1; class Person { 
    private String name; 
    Person(String name) { 
        this.name = name; 
    } 
    public void method1() { 
        System.out.println(this.name); 
    } 
} 
class Man extends Person{ 
    Man(String name) { 
        super(name); 
    }    
    public void m1() { 
        super.method1(); 
    } 
} 
public class Test { 
    public static void main(String[] args) {         
        Man man1 = new Man("Jack"); 
        man1.m1(); 
    } 
}
Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
javascript自定义的addClass()方法
May 28 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 #Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 #Javascript
给事件响应函数传参数的四种方式小结
Dec 05 #Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 #Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 #Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 #Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 #Javascript
You might like
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
如何提高数据访问速度
2016/12/26 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python实现反转部分单向链表
2018/09/27 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python系列 文件操作的代码
2019/10/06 Python
python实现KNN分类算法
2019/10/16 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
UNIX文件系统常用命令
2012/05/25 面试题
开会迟到检讨书
2014/02/03 职场文书
财产公证书
2014/04/10 职场文书
小学一年级学生评语
2014/04/22 职场文书
服务之星事迹材料
2014/05/03 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
社区党支部承诺书
2015/04/29 职场文书
组织委员竞选稿
2015/11/21 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers