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 相关文章推荐
js内置对象 学习笔记
Aug 01 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
浅谈React Event实现原理
Sep 20 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
VUE中使用MUI方法
Feb 12 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
小谈php正则提取图片地址
2014/03/27 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
javascript折半查找详解
2015/01/26 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
使用python加密自己的密码
2015/08/04 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
django删除表重建的实现方法
2019/08/28 Python
python实现单链表的方法示例
2019/09/03 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
小学生操行评语大全
2014/04/22 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
考试后的感想
2015/08/07 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android