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 相关文章推荐
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
数组Array的排序sort方法
Feb 17 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
canvas实现贪食蛇的实践
Feb 15 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
如何将数据从文本导入到mysql
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
销售自荐信
2013/10/22 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
详细谈谈JavaScript中循环之间的差异
2021/08/23 Javascript
Python循环之while无限迭代
2022/04/30 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers