在之前写的进阶系列里面,提到了执行上下文在创建阶段,要创建变量对象.确定作用域链还有确定this的指向,本次将重点讲解一下作用域链. JavaScript代码的执行过程 在讲解作用域链之前,首先了解一下,JavaScript代码的执行过程,包括两个步骤: 编译阶段 JavaScript引擎执行阶段 在编译阶段主要做的是,经过编译器的编译,将代码转化为可执行的代码,其中就包括了作用域规则的确定,而在之前说的执行上下文的创建和执行阶段是发生在JavaScript隐引擎执行阶段,所以作用域链是在执行上…

原网址:https://segmentfault.com/a/1190000002778015 1. 什么是闭包? 来看一些关于闭包的定义: 闭包是指有权访问另一个函数作用域中变量的函数 --<JS高级程序设计第三版> p178 函数对象可以通过作用域链相关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性称为 ‘闭包’ . --<JS权威指南> p183 内部函数可以访问定义它们的外部函数的参数和变量(除了this和arguments). --<JS语言精粹>…

进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟到了吗? 呵呵,不知道这是谁给我灌输的观点.o(>﹏<)o 进阶系列的文章分为两部分,文章前括号里写有: [D3.js 进阶系列] [D3.js 选择集与数据详解] 虽然称之为"进阶",但并不是说一定要看完"入门"才能看.由于本人能力有限,不能很好地整理成由…

转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制直线和曲线时,常需要在某处添加箭头.本文介绍如何在 D3 中给直线和曲线添加箭头. 到目前为止,我们绘制 D3 的图表都是在 SVG 绘制区域内,虽然 D3 也可用 Canvas 或 WebGL 等作图,但 SVG 是最常用的.那么,用 D3 来绘制箭头,先要明白在 SVG 中是怎么绘制的. 1.…

也许很多人像我一样,觉得JS有垃圾回收机制,内存就可以不管了,以至于在全局作用域下定义了很多变量,自以为JS会自动回收,直到最近,看了阮一峰老师,关于javascript内存泄漏的文章时,才发现自己写的代码,存在很严重的内存泄漏问题,再者,因为忽略对内存的学习,导致后面很多进阶概念很模糊,比如深复制与浅复制的区别,比如闭包.作用域链等等. 堆与栈 与C/C++不同,JavaScript语言没有严格意义上,区分堆与栈,所以我们可以理解为,JavaScript所有的数据都是存放在堆内存中. 不过,在…

1.执行环境 JavaScript 代码都是在执行环境中被执行的.执行环境是一个概念,一种机制,用来完成JavaScript运行时在作用域.生命周期等方面的处理,它定义了变量或函数是否有权访问其他数据,决定各自行为.每个执行环境都有一个变量对象(我理解为环境变量对象),在代码执行环境中所有的变量.函数都保存在这个对象中: 全局的执行环境是最外围的执行环境,根据ECMAScript 实现所在的宿主环境同,表示执行环境的对象也不一样,在WEB浏览器中,全局执行环境被认为是Windows对象,因此所有…

CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件.本文将说明在 D3 中怎样读取它们. 1. TSV 表格文件是什么 TSV(Tab Separated Values),制表分隔值,它和 CSV 文件不过分隔符不一致.它的格式例如以下: name age 张三 22 李四 24 2. D3 中读取 TSV 文件 在 D3 中读取 TSV 文件的方法和 CSV 文件是一样的,仅仅要更改一下函数名就可以.方法例如以…

The Scope Chain JavaScript is a lexically scoped language: the scope of a variable can be thought of as the set of source code lines for which the variable is defined. JS 是一个词法作用域语言,可以理解为变量的作用域就是变量所定义的源代码源代码范围处. Global variables are defined throughou…

首先先引用<JavaScript权威指南>里面的一句话来开始我的博客:函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 因此,就出现了如下的几串代码: var a="outside"; function area(){ var a="inside"; function b(){ return a; } return b(); } area(); 结果为:inside 这样的结果并不太出乎意料,因为在执行area()的时…

JS中的执行环境,顾名思义就是变量或函数所执行时的环境.在我的理解中,执行环境和作用域相差不大. 每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个环境栈中.而在函数执行之后, 栈将其环境弹出,把控制权返回给当前的执行环境.简单点来说,就像C语言中的栈,当一个函数被运行时,它总是先运行 最内部的函数(也就是局部函数),再一层一层的向外部执行,就像一个栈一样,后进先出. 当代码在一个环境中执行时,会创建变量对象的一个作用域链.作用域链好像一把梯子,最外层的(全局环境)永远…

刚刚总结完作用域链,我觉得很有必要马上对闭包总结一下,因为,之前也写过自己对闭包的理解,那时候只知道,闭包就是可以访问别的函数变量的函数,就是在函数里面的函数就叫做闭包,可是并没有深入探究,为什么,可以访问别的函数变量呢?直到,学习了JS的作用域链之后,就恍然大悟. 首先,来回顾一下,什么是作用域链吧. 作用域链就是由当前执行环境与上层环境的一系列变量对象组成,保证了当前执行环境对符合访问权限的变量和函数的有序访问. 那么什么是闭包呢? 闭包 关于闭包的定义,我在之前的文章里面已经讲过了,就是能…

在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题. 怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时.假设 xxx.csv 文件使用的是 UTF-8 编码,不会有什么问题. 当然,个人觉得尽量使用 UTF-8 编码,能够在同一编码内使用各国文字. 可是.假设 xxx.csv 文件使用的是 utf-8 编码,使用 Microsoft Excel 打开的时候,可能会出现乱码,由于国内的 Excel 默认使用 GB2312 打开.并且在打开的时候不…

function test(){ console.log(a);//undefined; var a = 1; } test(); 也许你会遇到过上面这样的面试题,你只知道它考的是变量提升,但是具体的原理又知道吗?所以我觉得很有必要搞明白底层的原理,才能加深理解,其实围绕的就是执行上下文的概念. 什么是执行上下文? 当控制器转到可执行的代码时,会进入该代码对应的执行上下文,可以理解为该代码对应的一个执行环境,就叫做执行上下文. 在JavaScript中运行环境有三种,分别是: 全局环境:Java…

在JavaScript中,函数的作用域链是一个很难理解的东西.这是因为JavaScript中函数的作用域链和其他语言比如C.C++中函数的作用域链相差甚远.本文详细解释了JavaScript中与函数的作用域链相关的知识,理解这些知识可以帮助你在处理闭包的时候避免一些可能出现的问题. 在JavaScript中,函数可以让你在一次调用中执行一系列的操作.有多种方式来定义一个函数,如下: 1.函数声明: function maximum(x, y) { if (x > y) return x; els…

在学习闭包之前我们很有必要先了解什么是作用域链 一.作用域链 作用域链是保证对执行环境有权访问的所有变量和函数的有序访问. 这句话其实还是蛮抽象的,但是通过下面一个例子,我们就能清楚的了解到作用域链了. var color="blue"; function changeColor(){ var anotherColor="red"; function swapColors(){ var tempColor=anotherColor; anotherColor=col…

❝ 点赞再看,年薪百万 本文已收录至https://github.com/likekk/-Blog欢迎大家star,共同进步.如果文章有出现错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学习的路线和资源分享. ❞ 前言 距离写上一篇文章已经过去两个月了(上一篇文章是2020年07月17日写的),托更有点严重,一方面是这几个月项目在赶,另一方面是自己近两个月以来变懒了(为自己不想更新文章找借口),国庆假期,公司放八天假. 自己没有去回家,主要是回家有点远,从来这边读书到现在的国庆期间一…

最近在看 JavaScript忍者秘籍 这本书的时候,再加上最近遇到的关于原型.原型链的面试题,所以萌生了要把这些知识梳理一遍的想法,所以以下是我自己对原型.原型链的看法 什么是原型 提到原型,我们可能都会想到与对象有关的东西,但其实,原型是与函数才是密切相关的.每当我们创建一个函数,都会有一个指向该函数的原型对象的指针prototype,然后该原型对象上又有一个指向该函数的指针constructor,在这里,如果我们这个函数是一个构造函数,那么我们每实例化一个对象,该对象都会有一个指向该构造函…

缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.zoom() .scaleExtent([1, 10]) .on("zoom", zoomed); function zoomed() { circles_group.attr("transform", "translate(" + d3.event.…

本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和[进阶 - 第 2.0 章]中,都用到了下面代码: force.on("tick", function(){ }); 这里的 force 是之前代码中定义的布局( Layout ).tick 表示当运动进行中每更新一帧时. 这是力学图中最常使用的事件,用于设定力学图每一帧是怎样更新的.除此…

在入门系列的教程中.我们经常使用 d3.json() 函数来读取 json 格式的文件.json 格式非常强大.但对于普通用户可能不太适合,普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件,由于简单易懂,easy编辑. Microsoft Excel 一般会保存为 xls 格式. OpenOffice Calc 一般会保存为 ods 格式. 这些格式作为表格文件来说都非常强大.但要读取它们是有些麻烦的.D3 中也没有提供这个方案.可是表格…

本文讲解稍微复杂一些的拖拽应用,即拖拽饼图的各部分. 在[入门 - 第 9.1 章]讲解了如何制作饼状图.饼状图的各部分是用具有宽度的弧线来表示的.在与用户进行交互的时候,如果每一部分都能拖拽,是很有趣的. 1.饼状图的绘制 与[入门 - 第 9.1 章]稍有有些不同,我们对饼状图的每一个区域都使用一个 g 标签将其包围起来,以便平移操作. var gAll = svg.append("g") .attr("transform","translate(&q…

直方图用于描写叙述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据. 假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],如今把10~20的数值范围分为5段,即: 10~12, 12~14, 14~16, 16~18, 18~20 那么数组 a 的各数值都落在这几段区域的哪一部分呢?经过计算,能够知道,这5段分别具有的元素个数为: 3, 2, 1, 0 , 2 将这个用图形展示出来的,就是直方图.好了,開始制作吧~ 1. 数据 首先…

在严格版中的默认的this不再是window,而是undefined. 先看两个例子 example one var num = 20; var obj = { num: 30, fn: (function() { this.num *= 3; num += 15; var num = 45; return function() { this.num *= 4; num += 20; console.log(num) } })(num) }; var fn = obj.fn; fn(); //因…

力学图的布局中有非常多參数.本文将逐个说明. D3 中的力学图布局是使用韦尔莱积分法计算的.这是一种用于求解牛顿运动方程的数值方法,被广泛应用于分子动力学模拟以及视频游戏中. 定义布局的代码例如以下: var force = d3.layout.force() 就可以.D3 中提供了 17 个函数用于设定其參数和事件.在全部布局中是最多的,以下将对其进行说明. size() 用于设定力学图的作用范围.用法为 force.size( [ x , y ] ),这个函数用于指定两件事: 重力的重心位置…

在javascript中,this的指向是在执行上下文的创建阶段确定的,其实只要知道不同执行方式下,this的指向分别是是什么,就能很好的掌握this这个让人摸不透的东西. 一.全局执行 全局执行又分为浏览器和node下的执行环境1.浏览器 console.log(this);//window 2.node console.log(this);//global 在浏览器器下全局执行的this指向window,而在node环境下全局执行的this指向global 二.函数执行 函数执行又分为纯粹的…

在javascript中,this的指向是在执行上下文的创建阶段确定的,其实只要知道不同执行方式下,this的指向分别是是什么,就能很好的掌握this这个让人摸不透的东西. 一.全局执行 全局执行又分为浏览器和node下的执行环境 1.浏览器 console.log(this);//window 2.node console.log(this);//global 在浏览器器下全局执行的this指向window,而在node环境下全局执行的this指向global 二.函数执行 函数执行又分为纯粹…

一.作用域(scope) 所谓作用域就是:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的. function scope(){ var foo = "global"; if(window.getComputedStyle){ var a = "I'm if"; console.log("if:"+foo); //if:global } while(1){ var b = "I'm while"; conso…

1.JS无块级作用域 <script> function Main(){ if (1==1){ var name = "alex"; } console.log(name); } Main(); </script>执行结果:{}即块级作用域. alex 2.JS采用函数作为作用域链 <script> function Main(){ var innerValue = "alex"; } Main(); console.log(in…

闭包主要涉及到js的几个其他的特性:作用域链,垃圾(内存)回收机制,函数嵌套,等等 一.作用域链:函数在定义的时候创建的,用于寻找使用到的变量的值的一个索引,而他内部的规则是,把函数自身的本地变量放在最前面,把自身的父级函数中的变量放在其次,把再高一级函数中的变量放在更后面,以此类推直至全局对象为止.当函数中需要查询一个变量的值的时候,js解释器会去作用域链去查找,从最前面的本地变量中先找,如果没有找到对应的变量,则到下一级的链上找,一旦找到了变量,则不再继续.如果找到最后也没找到需要的变量,则…

字面意思,作用域是指变量和函数的作用范围,换言之,作用域决定了变量和函数的可见性和有效时间.javascript作用域是用函数来区分,与其他语言的大括号不同. for (var i=0; i<5; i++){ var mystring = "平底斜"; console.log(i); } alert(mystring);//弹出"平底斜" 这段代码在javascript中运行正常,在其他语言中就会报错.这是因为javascript的作用域是基于函数,而不是大括…