文档章节

Javascript原型链和闭包深入解析

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

© 著作权归作者所有

共有 人打赏支持
jackie8tao
粉丝 0
博文 11
码字总数 16864
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

移除或自定义 WordPress 仪表盘欢迎面板

第一次登录 WordPress 后台仪表盘页面,默认都会显示 WordPress 的欢迎面板: 如果我们要移除这个面板,在主题的 functions.php 中添加下面的代码即可: 12 //移除 WordPress 仪表盘欢迎面...

james_laughing
7分钟前
0
0
HashMap实现原理及源码分析

HashMap实现原理及源码分析   哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表,...

DemonsI
10分钟前
0
0
eggjs学习笔记

快速初始化 生成项目(要求最低的node版本8.x) npm i egg-init -gegg-init egg-example --type=simplecd egg-examplenpm i 启动项目 npm run dev 配置 环境配置会覆盖默认配置 config...

别人说我名字很长
13分钟前
1
0
Winform Timer控件时间间隔

sender as System.Timers.Timer).Interval = 23 * 60 * 60 * 1000.0;//将时间间隔改为23小时,23小时后重新发生timer_Elapsed事件。 //60000:时间间隔1分钟,300000:时间间隔5分钟,600000:...

笑丶笑
14分钟前
0
0
在win10系统下怎样快速切换任务视图

切换窗口:Alt + Tab 任务视图:Win + Tab (松开键盘界面不会消失) 切换任务视图:Win + Ctrl +左/右 创建新的虚拟桌面:Win + Ctrl + D 关闭当前虚拟桌面:Win + Ctrl + F4...

SummerGao
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部