最近研究了js的继承,看了幻天芒的文章http://www.cnblogs.com/humin/p/4556820.html#3947420,明白了最好是使用apply或call方法来实现继承。

已知,call可以将function里的属性(所谓构造属性)赋给子类;但是对于call能不能将function的prototype内容(所谓的原型属性)一同复制,有疑惑,实验之后发现是不行的。看下面的代码:

g()是f()的原型中的方法。

c是f子类e的一个实例,ff是f的一个实例。

ff.g()系统不报错,正常运行,c.g()系统是报错不识别,不认为其是一个函数。

结论:e没有继承父类f的原型属性。

function f(){
this.a ="a";
this.b = function(){
console.log("b");
}
/*
this.g = function(){
console.log("this is g in f().");
}
*/
}
f.prototype.g = function(){
console.log("this is g in prototype.");
} function e(){
f.call(this);
}
var c = new e();
console.log(c.a); //弹出a
c.b(); //弹出b var ff = new f();
ff.g();//this is g in prototype.
c.g();//c.g is not a function

  

如果要实现对f的完全继承,还需要复制其原型链中的内容。参考以下代码:

function f(){
this.a ="a";
this.b = function(){
console.log("b");
}
}
f.prototype.g = function(){
console.log("this is g in prototype.");
} function e(){
f.call(this);
//f.prototype.call(this);
} (
function(){
var Super = function(){};
Super.prototype = f.prototype;
e.prototype = new Super();
}
)(); e.prototype.constructor = e; //重新修复下构造函数
var c = new e();
console.log(c.a); //弹出a
c.b(); //弹出b var ff = new f();
ff.g();//this is g in prototype
c.g();//this is g in prototype

总结,f.call(this);只能将f的实例属性赋给e,原型属性需要使用别的方法复制过去。

另外,我又在chrome下最后使用代码:

console.log(c);

 打印了一下实例c。看到如下内容:

a,b都好理解。a是父类f的一个实例属性,b是父类f的一个实例方法。e都继承了下来。可是问题来了:

__proto__是什么呢?

e继承的父类f的原型方法g()去哪里了呢?

回答以上问题,先看一看js对于__proto__的定义和解释:

在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。
即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

来源:https://www.zhihu.com/question/34183746/answer/58155878

现在我们来分析,实例c是e对象生成的,e的构造函数的原型(即e.prototype)是f。再点开来看:

__proto__.constructor = e(); 这个不就是我们设置的吗----》e.prototype.constructor = e;  __proto__.__proto__.g  = function 这个是构造函数原型的构造函数的原型,即f的构造函数原型,即f的原型链。g不就是f原型链中的方法吗。 所以,e继承的父类f的原型方法g()在这里。原来,使用c.g()时候,程序会一直沿着__proto__往前面的原型找。

js继承中,原型属性的继承探究的更多相关文章

  1. js oop中的三种继承方法

    JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...

  2. 遍历js对象中的属性

    可以使用js自带的for in.也可以使用Ext JS中的方法来遍历js对象中的属性 代码如下: /** 遍历对象 */ var person = {name:'张泰松',age:28}; //js方 ...

  3. WPF 中依赖属性的继承(Inherits)

    WPF中依赖属性的值是是可以设置为可继承(Inherits)的,这种模式下,父节点的依赖属性会将其值传递给子节点.例如,数据绑定中经常使用的DataContextProperty: var host ...

  4. js---17继承中方法属性的重写

    function F(){}; var f = new F(); f.name = "cf"; f.hasOwnProperty("name");//true ...

  5. C++继承中的属性

    class A { public: int a; A() { } void print() { cout<<a; } }; class B:public A { public: int a ...

  6. 怎样判断JS对象中的属性

    // 如何在不访问属性值的情况下判断对象中是否存在这个属性 var obj = { a: 2 }; Object.defineProperty( obj, 'b', // 让 b 不可枚举 { enu ...

  7. Python多类继承中,子类默认继承哪个父类的构造函数__init__

    [1]python中如果子类有自己的构造函数,不会自动调用父类的构造函数,如果需要用到父类的构造函数,则需要在子类的构造函数中显式的调用. [2]如果子类没有自己的构造函数,则会直接从父类继承构造函数 ...

  8. [转]js对象中取属性值(.)和[ ]的区别

    原文地址:https://www.jianshu.com/p/6a76530e4f8f 今天在写js的过程中遇到这么一个问题,取一个对象的属性值,通过obj.keys怎么都取不出来,但是用obj[ke ...

  9. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

随机推荐

  1. 报错 hint: Updates were rejected because the remote contains work that you do 解决方法

    1. git pull origin master --allow-unrelated-histories 2.git pull origin master 3.git init 4.git remo ...

  2. Android(二)——frida安装教程

    pc端下载:pip install frida 之后就是在手机端或者模拟器下载对应版本的server 在手机或者模拟器上查看cpu版本型号,就根据这个来下载server system/build.pr ...

  3. (三)使用链式数据实现包(java)

    目标: 1) 描述数据的链式组织方式 2) 描述如何在链式节点链的开头添加新节点 3) 描述如何删除链式节点链的首节点 4) 描述如何在链式节点链中找到某个数据 5) 使用链式节点链实现ADT包 6) ...

  4. PostgreSQL进程和内存结构

    PostgreSQL数据库启动时,会先启动一个叫做Postmaster的主进程,还会fork一些辅助子进程,这些辅助子进程各自负责一部分功能,辅助子进程分类如下: $ ps -ef | grep po ...

  5. Directory /home/hdfs/name is in an inconsistent state: storage directory does not exist or is not a

    2018-06-11 17:50:36,896 WARN org.apache.hadoop.hdfs.server.namenode.FSNamesystem: Encountered except ...

  6. 微信小程序: rpx与px,rem相互转换

    官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx,则1rem=750/20rpx. 微信官方建议视觉稿以iPhone 6为标准:在 iPhone6 上,屏幕宽度为375px,共有750个物理像 ...

  7. Vue中 computed 和 methods的区别

    涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...

  8. WebSphere禁用SSLv3和RC4算法教程

    WebSphere经常会报“SSL 3.0 POODLE攻击信息泄露”和"SSL/TLS 受诫礼(BAR-MITZVAH)攻击"两个漏洞,前者建议禁用SSL算法后者建议禁用RC4算 ...

  9. zabbix3.4.7版本饼图显示问题

    问题描述 最近使用zabbix3.4.7版本,发现监控Linux的主机关联系统自带的Template OS Linux模版之后,磁盘空间饼图显示有问题,出现空白,如图所示 查看之后,确定为自带的Lem ...

  10. zookeeper集群环境搭建(纯zookeeper)

    1.首先在三台机子上放上zookeeper的解压包,解压. 然后的话zookeeper是依赖于jdk的,那么也应该安装jdk,这里不详细说明了. mv zookeeper-3.4.5 zookeepe ...