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 ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
Vue实现日历小插件
Jun 26 Javascript
vue2.x 对象劫持的原理实现
Apr 19 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
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
JsChart组件使用详解
2018/03/04 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
python简单程序读取串口信息的方法
2015/03/13 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
如何定义TensorFlow输入节点
2020/01/23 Python
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
家庭困难证明
2014/10/12 职场文书
放假通知
2015/04/14 职场文书
公司保密管理制度
2015/08/04 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
详解Go与PHP的语法对比
2021/05/29 PHP
Python类方法总结讲解
2021/07/26 Python