文档章节

Javascript原型链和闭包深入解析

陶小陶
 陶小陶
发布于 08/11 02:54
字数 988
阅读 38
收藏 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
博文 28
码字总数 41431
作品 0
深圳
程序员
从闭包函数的变量自增的角度 - 解析js垃圾回收机制

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

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

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

netmouse
2014/11/18
0
0
深入理解Javascript闭包(closure)

最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Jav...

武汉赢卓通讯
2013/07/21
0
1
深入理解Javascript闭包(closure)

最近在网上查阅了不少Javascript闭包(closure)相关的资料,写的大多是非常的学术和专业。对于初学者来说别说理解闭包了,就连文字叙述都很难看懂。撰写此文的目的就是用最通俗的文字揭开Jav...

奔小康
2011/06/16
0
1
在Javascript中闭包(Closure)

转至百度百科 在Javascript中闭包(Closure) 一、什么是闭包? “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是...

宋志刚
2011/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

白话SpringCloud | 第十章:路由网关(Zuul)进阶:过滤器、异常处理

前言 简单介绍了关于Zuul的一些简单使用以及一些路由规则的简单说明。而对于一个统一网关而言,需要处理各种各类的请求,对不同的url进行拦截,或者对调用服务的异常进行二次处理等等。今天,...

oKong
9分钟前
1
0
详解nohup和& 区别

详解nohup和& 区别 2017年11月29日 16:57:38 King-Long 阅读数:7266 版权声明:本文为博主原创文章,欢迎转载。 https://blog.csdn.net/u011095110/article/details/78666833 nohup 一、【解...

linjin200
21分钟前
2
0
Character的static方法

基本类型char的包装类是Character,使用的比较多,大家是比较熟悉的。 我只是觉得里面有很多static方法,平时不怎么用,学习一下怎么实现的,或许日后就用到了。 static int compare(char x,...

woshixin
21分钟前
1
0
正则介绍_sed

10月17日任务 9.4/9.5 sed sed工具 匹配打印 -n 只打印匹配行,不然其他行也会打印出来 p 打印(配合-n使用) [root@centos7 tmp]# sed -n '/root/'p passwd root:x:0:0:root:/root:/bin/ba...

robertt15
21分钟前
1
0
轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码

轻松解码类似eval(function(p,a,c,k,e,d){}))的JavaScript代码 2013年05月22日 15:18:05 秋实先生 阅读数:14826 这里解码百度访问统计代码构造函数为示例: 百度访问统计代码JavaScript源码:...

_纵横捭阖_
30分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部