Javascript 进阶作用域作用域链

一直觉得Js很强大，由于长期不写js代码，最近刚好温故温故。

1、Javascript没有代码块作用域的概念，局部作用域是针对函数来说的。

[javascript] view plaincopy

function fun()
{
for( var i = 0 ; i < 10 ; i++)
{}
//如果在Java中i此时应当属于未声明的变量，但是Js中i的作用域依然存在
console.log(i);//10
if(true)
{
var b = "helloworld";
}
console.log(b);//helloworld
}
fun();

2、如果不使用var声明的变量，默认为全局变量

[javascript] view plaincopy

function fun02()
{
a = "helloworld";
var b = "welcome";
}
fun02();
console.log(a); // helloworld
console.log(b); // b is not defined

3、Js中的作用域链

先看个简单的例子：只有一个函数对象，函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

[javascript] view plaincopy

var a = "hello";
function fun04()
{
a = "world";
var b ="welcome";
}

作用域链的图：

注：图中省略了，Global Scope中的window，document等，每个函数对象中的arguments，this等均未画出。

[javascript] view plaincopy

function fun03()
{
var a = 10;
return function(){
a*= 2 ;
return a ;
};
}
var f = fun03();
f();
var x = f();
console.log(x); //40
var g = fun03();
var y = g();
console.log(y); //20

观察上面代码，存在fun03，f，g三个函数对象。

下面是作用域链的图：

注：每个函数对象一个作用域链，这里直接画在了一起；对于变量的查找，先从链的0开始找。

函数对象 f 在代码中执行了2 次，所以a*2*2 = 40 ；函数对象 g 在代码中执行了1次，所以 a *2 = 20 ;

4、闭包

上面的例子可以看到，在fun03执行完成后，a的实例并没有被销毁，这就是闭包。个人对闭包的理解是：函数执行完成后，函数中的变量没有被销毁，被它返回的子函数所引用。

下面以一个特别经典的例子，同时使用作用域链解析：

[javascript] view plaincopy

window.onload = function()
{
var elements = document.getElementsByTagName("li");
for(var i = 0; i < elements.length ; i ++)
{
elements[i].onclick = function()
{
alert(i);
}
}
}

相信上面的代码肯定大家都写过，本意是点击每个li，打印出它们的索引，可是事实上打印出的都是elements.length。这是为什么呢？

看下上面的简易的作用域链（省略了很多部分，主要是理解），此时每个onclick函数的i，指向的都是 onload 中的i 此时的 i = element.length.

下面看解决方案：

[javascript] view plaincopy

window.onload = function ()
{
var elements = document.getElementsByTagName("li");
for (var i = 0; i < elements.length; i++)
{
(function (n)
{
elements[n].onclick = function ()
{
alert(n);
}
})(i);
}
}

在onclick函数的外层，包了一层立即执行的函数，所以此时的n指向的 n 是立即执行的，所有都是1~elements.length 。

Javascript 进阶作用域作用域链相关推荐

JS进阶学习(作用域、函数进阶、解构赋值、原型链)
文章目录 1.面相对象编程介绍 2.ES6中的类和对象 3.类的继承 ES6中的类和对象三个注意点作用域局部作用域全局作用域作用域链 JS垃圾回收机制(GC) JS垃圾回收机制-算法说明闭 ...
深入理解JavaScript的变量作用域
在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数 ...
JavaScript中的作用域,闭包和上下文
深入理解JavaScript中的作用域和上下文很多语言当中都会有作用域的概念,它会给我们带来便利,偶尔也会有烦恼,只有清楚地理解和掌握了它,才能更好地为我所用,今天就带来这么一篇文章供大家参考. 介 ...
JavaScript之词法作用域和动态作用域
作用域作用域是指程序源代码中定义变量的区域. 作用域规定了如何查找变量,也就是确定当前执行代码对变量的访问权限. JavaScript 采用词法作用域(lexical scoping),也就是静态作 ...
javascript中关于作用域和闭包
列表项目前言学习了javascript已经很久了,关于这个语言中的这两个特性也是早已耳熟能详,但是在实际的使用的过程中或者是遇到相关的问题的时候,还是不能很好的解决. 因此我觉得很有必要深入的学习 ...
JavaScript的变量作用域深入理解（转）
在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整 ...
深入理解JavaScript的变量作用域(转)
在学习JavaScript的变量作用域之前,我们应当明确几点: a.JavaScript的变量作用域是基于其特有的作用域链的. b.JavaScript没有块级作用域. c.函数中声明的变量在整个函数 ...
JavaScript入门(part10)--作用域
学习笔记,仅供参考,有错必纠参考自:pink老师教案文章目录 JavaScript入门作用域作用域概述全局作用域局部作用域变量的作用域全局变量局部变量全局变量和局部变量的区别作用 ...
JavaScript 函数（作用域以及闭包）
JavaScript 函数(作用域以及闭包) ・执行环境及作用域执行环境定义了变量或函数有权访问的其他数据. 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量或函数都保存在这个对象中, ...
javascript(面向对象，作用域，闭包，设计模式等)
javascript(面向对象,作用域,闭包,设计模式等) 1. 常用js类定义的方法有哪些? 参考答案:主要有构造函数原型和对象创建两种方法.原型法是通用老方法,对象创建是ES5推荐使用的方法.目前 ...

Javascript 进阶作用域作用域链

Javascript 进阶作用域作用域链相关推荐

最新文章

热门文章

Javascript 进阶 作用域 作用域链

Javascript 进阶 作用域 作用域链相关推荐

最新文章

热门文章

Javascript 进阶作用域作用域链

Javascript 进阶作用域作用域链相关推荐