文档章节

Javascript原型链和闭包深入解析

陶小陶
 陶小陶
发布于 2018/08/11 02:54
字数 988
阅读 160
收藏 1

Javascript语法核心

Javascript目前可以说是Web前段开发标配脚本语言,相关标准已经发展到ES6,不过该标准并未得到大部分浏览器的支持,并且在该标准之前的很多项目都是基于ES5.x标准。文本所介绍的JavaScript语法即为ES5.x标准所定义的,也是目前浏览器完美支持的标准。
对于任何计算机语言的标配,控制结构、变量、函数等相关概念,这里不会做相关介绍。本文主要解决的是,JavaScript中最让人费解的两个概念,原型链闭包

原型链

对于原型链,个人认为一句话可以概括,即“原型链是以对象的构造函数形成的单向链表”。从中我们可以发现JavaScript中的对象间继承是在建立在对象的构造函数对象(函数的prototype属性或对象的__proto__属性)基础之上的,对象和其构造函数对象间存在连接。在这里我没有使用构造函数这一名称,而是在其后面加上了对象二字,主要是为了强调,JavaScript中对象的构造函数本身就是对象这一事实。JavaScript通过这一方法,巧妙的解决了私有和公有这一问题。
下面看几段代码,更好的感受JavaScript中的原型链。


Object.bar = "bar";
Object.prototype.foo = "foo";

function BaseClass(){
    this.type = "base";
    this.age = 100;
}
BaseClass.prototype.name = "baseclass";
var p0 = new BaseClass();
console.log(p0.type);
console.log(p0.name);
console.log(p0.foo);
console.log(p0.bar);

function DerivedClass(){
    this.type = "derived";
}
DerivedClass.prototype = BaseClass.prototype;
var p1 = new DerivedClass();
console.log(p1.type);
console.log(p1.name);

DerivedClass.prototype = new BaseClass();
var p2 = new DerivedClass();
console.log(p2.age);

function OtherClass(){
    var obj = function(){};
    obj.prototype = new BaseClass();
    return new obj();
}

var p3 = OtherClass();
var p4 = OtherClass();
var p5 = new OtherClass();
var p3p = Object.getPrototypeOf(p3);
var p4p = Object.getPrototypeOf(p4);
p3p.name = "p3";
p4p.name = "p4";

console.log(p3.name);
console.log(p4.name);
console.log(p5.name);

能够正确的说出各个console.log的输出值,基本上对JavaScript中的原型链完全理解了。对于在原型链基础上形成的各种各样的面向对象的不同表达方式,本质上还是脱离不了prototypeproto

闭包

闭包是JavaScript中很重要的概念,该词翻译自closure,英文为关闭的意思。想理解闭包的本质还是要从closure原意理解。下面先看一段代码:


var x = 10;

function closure1(fn) {
    var x = 5;
    fn();
}

function closure2(){
    var x = 15;
    return function(){
        console.log(x);
    };
}

closure1(function(){
    console.log(x);
});
closure2()();

closure1中console打印出的值为10,而不是5,closure2中console打印出的位15,而不是10。一般的语言上述两个函数可能输出的都是10,但是JavaScript中却不同。导致这一现象的主要原因就是闭包,闭包在JavaScript中表达的含义可以理解为函数作用于闭合,也就是说函数真正作用的作用于是在其定义的时候的作用于,这也就是为什么上述两个代码返回值分别是10和15的原因。closure1的回调函数绑定的是全局的x,closure2返回的函数绑定是是局部的x。

小结

虽然ES6标准中,JavaScript通过新的关键字和语法的引入解决了很多和我们常用的面向对象语言中不同的机制,但在大范围被支持和使用之前,大家还是应对ES5.x标准达到深入理解才好。对于JavaScript中其它的一些特性,虽然比较奇葩,但都比较容易理解,本文并没有做相关介绍,若有不清楚的可以参考MDN学习。

© 著作权归作者所有

陶小陶
粉丝 2
博文 53
码字总数 54885
作品 0
深圳
程序员
私信 提问
每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentian Fundebug经授权转载,版权归原作者所有...

Fundebug
2018/10/30
0
0
JavaScript开发者应懂的33个概念

简介 这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备,但在未来学习(JavaScript)中,可以作为一篇指南。 本篇文章是参照 @leonardomso 创立,英文版项目地址在这里。 ...

大灰狼的小绵羊哥哥
2018/10/22
0
0
《前端面试手记》之JavaScript基础知识梳理(下)

👇 内容速览 👇 实现ES5继承的4种方法 原型和原型链 作用域和作用域链 Event Loop 执行上下文 闭包的理解和分析 🔍查看全部教程 / 阅读原文🔍 ES5继承 题目:ES5中常用继承方法。 方...

godbmw
04/03
0
0
从闭包函数的变量自增的角度 - 解析js垃圾回收机制

前言 感觉每一道都可以深入研究下去,单独写一篇文章,包括不限于闭包,原型链,从url输入到页面展示过程,页面优化,react和vue的价值等等。 代码实现 原理 因为times变量一直被引用,没有被...

燕儿199606
2018/06/20
0
0
高性能Javascript:高效的数据访问

经典计算机科学的一个问题是,数据应当存放在什么地方,以实现最佳的读写效率。数据存储是否得当,关系到代码运行期间数据被检索到的速度。在Javascript中,此问题相对简单,因为数据表现方式...

netmouse
2014/11/18
182
0

没有更多内容

加载失败,请刷新页面

加载更多

用 4G 工作是什么体验

七月开始,因为工作原因,在公司附近租了个住处,方便工作。离公司近了,感觉就是不一样,之前每天 5:30 就要起床赶地铁,现在可以睡到自然醒,一看才 7 点,悠闲的起床洗漱,踱步到公司,都...

zzxworld
24分钟前
4
0
sonar报错volatile

问题发生 原先代码如下: //认证授权码private static volatile String AUTHORIZATION_CODE = "init"; git push 之后,sonar认为这是个bug检测报告截图如下: 分析排查 解释说明: Markin...

开源小菜鸟2333
28分钟前
3
0
《Java实践指南》--读后

闲读《Java实践指南》... 1.lvy 某些项目中能够看到ivy.xml。早期使用ant的项目中,常常用ivy.xml来下载项目依赖。 2.ant 作为java程序员,应该都知道ant,虽然可能用过的人不多。为什么ant...

RippleChan
30分钟前
3
0
前端:固定表格(table)表头的实现方式

在写插件 bootstrap table 的时候,当数据过多的时候,需要对表格的 thead 进行固定,然后滚动表格的 tbody 。但是在实际的操作上,花了很多的时间在这个问题上,到现在也没有找到完美的解决...

前端老手
31分钟前
5
0
第五章 spring-connet之AnnotationConfigUtils

前言 AnnotatedBeanDefinitionReader是AnnctionConfig相关上下文与AnnotationConfigUtils的桥梁。还有一个作用是解析class成为BeanDefinitionHolder,注册到容器里面。AnnotationConfigUtils...

鸟菜啊
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部