文档章节

Javascript原型链和闭包深入解析

陶小陶
 陶小陶
发布于 08/11 02:54
字数 988
阅读 63
收藏 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学习。

© 著作权归作者所有

共有 人打赏支持
陶小陶
粉丝 1
博文 30
码字总数 43885
作品 0
深圳
程序员
私信 提问
每个JavaScript工程师都应懂的33个概念

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

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

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

大灰狼的小绵羊哥哥
10/22
0
0
从闭包函数的变量自增的角度 - 解析js垃圾回收机制

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

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

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

netmouse
2014/11/18
0
0
《你不知道的JavaScript》系列分享专栏

《你不知道的JavaScript》系列分享专栏 你不知道的JavaScript”系列就是要让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途 《你不知道的JavaScrip...

开元中国2015
12/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

spring学习笔记(二)spring 事件的使用

spring 中的事件 spring事件通过订阅发布 可以解耦操作 可以同步 可以异步 步骤 编写事件 通过继承org.springframework.context.ApplicationEvent 来编写事件 public ApplicationEvent(Obj...

NotFound403
15分钟前
1
0
特斯拉车主成功破解了自己Model 3汽车

据汽车博客Electrek消息,一位特斯拉车主成功破解了自己Model 3汽车,还在此基础上运行了Ubuntu。 这位叫trsohmers的网友表示,“功劳大多要归到Ingineerix的头上,他花了数月才找到初始的那...

linuxCool
29分钟前
1
0
Gitbook : random errors when using gitbook plugin on running "gitbook serve"

在执行gitbook serve时,会有不定的失败错误 参考问题 :#1309 解决方案: 更新gitbook版本,这个问题似乎是3版本的问题 , 官方也不打算在这个版本解决了。 更新 到最新版本后, 不再出现问...

ol_O_O_lo
44分钟前
1
0
提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字

提灯照暗,向内自省——《中国文化的深层结构》读书笔记3800字: 作者:王健茜;断断续续一个多月才读完了《中国文化的深层结构》,这并不是一本难懂的书,之所以读得慢,源于对书中观点的思...

原创小博客
46分钟前
1
0
高德地图-行政区域接口

1、获取全国各省信息 https://restapi.amap.com/v3/config/district?extensions=all&key=应用Key&s=rsv3&output=json 2、获取下级行政区域信息 https://restapi.amap.com/v3/config/distric......

voole
58分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部