js继承中,原型属性的继承探究
最近研究了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__的定义和解释:
即:对象具有属性__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继承中,原型属性的继承探究的更多相关文章
- js oop中的三种继承方法
JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方 ...
- 遍历js对象中的属性
可以使用js自带的for in.也可以使用Ext JS中的方法来遍历js对象中的属性 代码如下: /** 遍历对象 */ var person = {name:'张泰松',age:28}; //js方 ...
- WPF 中依赖属性的继承(Inherits)
WPF中依赖属性的值是是可以设置为可继承(Inherits)的,这种模式下,父节点的依赖属性会将其值传递给子节点.例如,数据绑定中经常使用的DataContextProperty: var host ...
- js---17继承中方法属性的重写
function F(){}; var f = new F(); f.name = "cf"; f.hasOwnProperty("name");//true ...
- C++继承中的属性
class A { public: int a; A() { } void print() { cout<<a; } }; class B:public A { public: int a ...
- 怎样判断JS对象中的属性
// 如何在不访问属性值的情况下判断对象中是否存在这个属性 var obj = { a: 2 }; Object.defineProperty( obj, 'b', // 让 b 不可枚举 { enu ...
- Python多类继承中,子类默认继承哪个父类的构造函数__init__
[1]python中如果子类有自己的构造函数,不会自动调用父类的构造函数,如果需要用到父类的构造函数,则需要在子类的构造函数中显式的调用. [2]如果子类没有自己的构造函数,则会直接从父类继承构造函数 ...
- [转]js对象中取属性值(.)和[ ]的区别
原文地址:https://www.jianshu.com/p/6a76530e4f8f 今天在写js的过程中遇到这么一个问题,取一个对象的属性值,通过obj.keys怎么都取不出来,但是用obj[ke ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
随机推荐
- Android VideoView播放网络视频简介(转)
最近项目中用到了很多视频播放的地方,不管是聊天发送的视频消息,还是类似内涵段子的视频列表,都会涉及这些知识,不过网上的知识都很零散,一会找缓存方法,一会找预览图片的方法,一会找视频动态修改尺寸的方法, ...
- java判断时间为上午,中午,下午,晚上,凌晨
public static void main(String[] args) { Date date = new Date(); SimpleDateFormat df = new SimpleDat ...
- python-django缓存
三 Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的 ...
- WDA基础十四:ALV字段属性配置表
ALV配置表管理 一.字段属性配置表 对于可编辑的ALV不用这个,尽可能多的设置一些控制: 单元格类型:默认A,特殊选择 ZLYE_TYPE E A 1 ...
- tomcat压缩版配置
下载Jdk并安装 配置Java环境变量 因为需要用services.bat安装,services.bat中 rem Make sure prerequisite environment variabl ...
- Nginx+Tomcat集群配置
Nginx+Tomcat集群配置 一台虚拟机作为Nginx服务 两太虚拟机配置Tomcat+jdk环境 Nginx测试 启动: cd usr/local/nginx/sbin ./nginx ---& ...
- 四、持久层框架(Hibernate)
一.一级缓存与二级缓存 1.一级缓存:Hibernate默认是开启一级缓存的,一级缓存存放在session里,一个Session做一次查询操作,会把这个操作的结果放在一级缓存中,如果短时间内这个ses ...
- Django之WSGI 和MVC/MTV
一.什么是WSGI? WEB框架的本质是一个socket服务端接收用户请求,加工数据返回给客户端(Django),但是Django没有自带socket需要使用 别人的 socket配合Django才能 ...
- ASP.NET MVC命名空间时引起错误的解决方法
使用VS2012新建了一个Asp.net mvc5的项目,并把项目的命名空间名称更改了(Src更改为UXXXXX),然后就导致了以下错误 刚开始以后是项目的属性中的命名空间没有更改过来的问题,但我在重 ...
- 在Windows系统下搭建ELK日志分析平台
简介: ELK由ElasticSearch.Logstash和Kiabana三个开源工具组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索 ...