js 原型链与继承
var A = function(){ this.name="xiaoming"; }
A.prototype.age=9;
var a = new A();
console.log(a.age); //9
图中长方形代表实例对象a,圆形代表原型,三角形代表构造函数。由图可知:
a.__proto__ === A.prototype; //true
A.prototype.constructor===A; //true
A.prototype.__proto__===Object.prototype; //true
Object.prototype.__proto__===null; //true
复制代码
实例和原型之间是通过__proto__属性连接,且是单向的,从实例指向原型;原型和构造函数之间连接是双向的,通过constructor和prototype连接,具体见图;原型链上的属性是所有实例共享的,看下面的例子:
var A = function(){
this.name="xiaoming";
}
var a = new A();
A.prototype.age=9;
var b = new A();
console.log(a.age); //9
console.log(b.age); //9
复制代码
a、b都可以访问A原型链上的属性age。
Function和Object比较特殊,他们既是对象又是函数,两者内部同时含有proto和prototype属性,可看下面代码:
Object.__proto__ === Function.prototype //true
Object.__proto__ === Function.__proto__//true
Object.prototype === Function.prototype.__proto__ // true
Function instanceof Object //true
Object instanceof Function //true
复制代码
至此,原型链的知识差不多可以理解了,后面介绍继承的几种方式。
原型链继承
既然可以访问原型链的所有属性,那么就可以用原型链的原理实现继承。原型链继承用new的方式(实现A继承B):
A.prototype=new B();关于new可以看下我另一篇文章this那些事。
代码:
function B(){
this.nameB='B';
}
B.prototype.nameProto="PROTO";
function A(){
this.nameA="A";
}
A.prototype=new B(); //原型链继承:A继承B
var a=new A();
console.log(a);
复制代码
打印结果:
上段代码A继承B,通过A构造函数new的示例a不仅可以继承B(可访问nameB),而且可以继承B原型上的属性(nameProto),且是所有实例共享的。
好处:可以继承原型链的属性。
缺点:无法实现多继承,A继承了B,就无法再继承C。
构造继承
构造继承就是利用构造函数继承,即改变this指向的方式(call/apply/bind)执行一次构造函数B,具体可我另一篇文章this那些事。废话不多说,上例子:
function B(){
this.nameB='B';
}
B.prototype.nameProto="PROTO";
function A(){
B.call(this); //A继承B,只举了call的例子,apply、bind类似
this.nameA="A";
}
var a=new A();
console.log(a);
复制代码
打印结果:
根据a的打印结果,我们看到nameB和nameA是同一层级,虽然实现了A继承B,但是通过a的结构看不出来,而且无法继承B原型链上的属性nameProto,不过它的好处是可以多继承,可以通过C.call(this)继承C。
好处:可以多继承。
缺点:无法继承原型链上的属性。
组合继承
组合继承就是为了解决原型链继承无法多继承、构造继承无法继承原型链上的属性的问题而诞生的,将两种方式结合。
function B(){
this.nameB='B';
}
B.prototype.nameProto="PROTO";
function A(){
B.call(this); //构造继承
this.nameA="A";
}
A.prototype=new B(); //原型链继承:A继承B
var a=new A();
console.log(a);
复制代码
打印结果:
观察a的打印结果,似乎真的解决了上述两个问题,它也引入了一个新的问题:nameB属性有两个,这样造成了资源浪费(存储占用内存)。
原型式继承
先看下面的示例:
function objectCreate(obj){
function F(){};
F.prototype = obj;
return new F();
}
var a=objectCreate(A.prototype);
闭包,函数内部引用外部变量,可以进行数据保持,防止变量污染。 内存泄露:浏览器主要的垃圾回收机制是利用标记清除法,计数法用的不多。 哪些变量不会被清除,1 : 全局变量不会被清除,因为全局变量不确定什么时候会使用,一旦清除。影响很大。 2 局部变量,如果没有形成闭包会在使用结束后清除,如果形成闭包,变量不会被释放,因为可能会被引用。
js 原型链与继承的更多相关文章
- js原型链与继承(初体验)
js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询 ...
- 深入理解JS原型链与继承
我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天 ...
- JS原型链与继承别再被问倒了
原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实 ...
- js 原型链和继承(转)
在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...
- 小谈js原型链和继承
原型(prototype)在js中可是担当着举足轻重的作用,原型的实现则是在原型链的基础上,理解原型链的原理后,对原型的使用会更加自如,也能体会到js语言的魅力. 本文章会涉及的内容 原型及原型对象 ...
- 【转】js原型链与继承
原文链接:https://blog.csdn.net/u012468376/article/details/53127929 一.继承的概念 继承是所有的面向对象的语言最重要的特征之一.大部分的o ...
- js原型链和继承
在了解js原型链之前构造函数.原型对象.对象实例这几种概念必须要明白. 1. 创建对象有几种方法 //原型链指向objectvar o1={name:'o1'}; var o11=new Object ...
- js原型链、继承、this指向等老生常谈却依然不熟的知识点——记录解析
开始记录学习过程—— 很详细的解析过程——https://juejin.im/post/5c72a1766fb9a049ea3993e6 借鉴阅读——https://github.com/KieSun ...
- js原型链+继承 浅析
名称: prototype--原型对象 __proto__--属性 原型链与继承网上搜索定义,看起来挺绕的 .先说继承: 所有的对象实例都可以共享原型对象包含的属性和方法 例如一个实例A ...
随机推荐
- Spring Cloud(Dalston.SR5)--Config 集群配置中心
Spring Cloud Config 是一个全新的项目,用来为分布式系统中的基础设施和微服务应用提供集中化的外部配置支持,他分为服务端和客户端两个部分.服务端也称为分布式配置中心,是一个独立的微服务 ...
- css零碎知识点小结
1.单行文字溢出显示省略号: div{ width: 200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 2 ...
- iOS ReactiveCocoa的使用
一.ReactiveCocoa简介 reactiveCocoa简称RAC,它是一个三方框架,很多人把它叫做函数响应式编程框架,因为它具有函数式编程和响应式编程的特性. 由于该框架的编程思想,使得它具有 ...
- html5 + vue
偶然与巧合 舞动了蝶翼 谁的心头风起 前赴而后继 万千人追寻 荒漠唯一菩提 似擦肩相遇 或擦肩而去 命运犹如险棋 无数时间线 无数可能性 终于交织向你
- ETL讲解(很详细!!!)
ETL讲解(很详细!!!) ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要 ...
- html 设置input框的记忆功能(联想内容)
autocomplete=“on/off” 1.默认情况下,autocomplete的值是on.你可以将其设置为off. 2.autocomplete属性可以放在input 元素上,也可以放在form ...
- 学习笔记:SASS
SASS: http://www.sass.hk/sass-course.html SASS 2015-10-10 http://sass.bootcss.com/docs/sass-referen ...
- libevent安装后缺少libevent_openssl.so
最近要使用阿里的rocketmq,需要依赖libevent,所以下了个源码自己编译安装,安装过程按照readme来的: 1 ./configure 2 make 3 make install 但是安装 ...
- c# post 接收传来的文件
private void UploadFile() { // //......其他代码 // HttpFileCollection files = HttpContext.Current.Reques ...
- windows系统下将nginx作为系统服务启动
1. 准备工作 下载安装nginx,并记住安装目录 官网下载 下载winsw,下载地址 2. winsw设置 将winsw可执行程序复制到nginx安装目录下,并重命名为nginx-service 新 ...