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 相关文章推荐
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
关于Js中new操作符的作用详解
Feb 21 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
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
实用函数4
2007/11/08 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python3计算三角形的面积代码
2017/12/18 Python
python3转换code128条形码的方法
2019/04/17 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
大学毕业感言一句话
2014/02/06 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
中国入世承诺
2014/04/01 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
生活部的活动方案
2014/08/19 职场文书
同学聚会通知书
2015/04/20 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python