关于JavaScript作用域你想知道的一切
Javacript 中有一系列作用域的概念。对于新的JS的开发人员无法理解这些概念,甚至一些经验丰富的开发者也未必能。这篇文章主要目的帮助理解JavaScript中的一些概念如:scope,closure, this, namespace, function scope, global scope, lexical scope and public/private scope. 希望从这篇文章中能回答如下的问题:
- 什么是作用域(scope)?
- 什么是全局(Global)和局部(Local)作用域?
- 什么是命名空间和作用域的区别?
- 什么是this关键字且作用域对其的影响?
- 什么是函数作用域、词汇作用域?
- 什么是闭包?
- 什么是公有和私有作用域?
- 如何理解和创建上述内容?
1、什么是作用域( Scope)?
在JavaScript中,作用域通常是指代码的上下文(context)。能够定义全局或者局部作用域。理解JavaScript的作用域是编写强健的代码和成为一个好的开发者的前提。你需要掌握在那里获取变量和函数,在那里能够能够改变你的代码上下文的作用域以及如何能够编写快速和可读性强以及便于调试的代码。
想象作用域非常简单,我们在作用域A还是作用域B?
2、什么是全局作用域( Global Scope)?
在写第一行JavaScript代码之前,我们处在全局作用域中。此时我们定义一个变量,通常都是全局变量。
// global scopevar name = 'Todd';
全局作用域即是你的好友又是你的噩梦。学习控制作用域很简单,学会后使用全局变量就不会遇到问题(通常为命名空间冲突)。经常会听到大伙说 “全局作用域不好”,但是从没有认真想过为什么。不是全局作用域不好,而是使用问题。在创建跨作用域Modules/APIs的时候,我们必须在不引起问题的情况下使用它们。
jQuery('.myClass');
...我们正在全局作用域中获取jQuery,我们可以把这种引用称为命名空间。命名空间通常是指作用域中可以交换word,但是其通常引用更高级别的作用域。在上面的例子中,jQuery 在全局作用域中,也称为命名空间。jQuery 作为命名空间定义在全局作用域中,其作为jQuery库的命令空间,库中的所有内容成为命名空间的子项(descendent )。
2、什么是局部作用域( Local Scope)?
局部作用域通常位于全局作用域后。一般来说,存在一个全局作用域,每个函数定义了自己的局部作用域。任何定义于其他函数内部的函数都有一个局部作用域,该局部作用域链接到外部函数。
如果定义了一个函数并在里面创建变量,那么这些变量就是局部变量。例如:
// Scope A: Global scope out here var myFunction = function () { // Scope B: Local scope in here};
任何的局部作用变量对全局变量来说是不可见的。除非对外暴露。如在新的作用域内定义了函数和变量,他们为当前新作用域内的变量,不能够在当前作用域外被访问到。下面为一个简单的说明示例:
var myFunction = function () { var name = 'Todd'; console.log(name); // Todd}; // Uncaught ReferenceError: name is not defined console.log(name);
变量name为局部变量,没有暴露给父作用域,因此出现not defined。
3、函数作用域
JavaScript 中函数域为最小域范围。for与while循环或者if和switch都不能构建作用域。规则就是,新函数新域。一个创建域的简单示例如下:
// Scope A var myFunction = function () { // Scope B var myOtherFunction = function () {// Scope C};};
非常方便的创建新的域和本地变量、函数和对象。
4、词汇作用域( Lexical Scope)
当遇到一个函数嵌套到另一函数中,内部函数能够访问外部函数的作用域,那么这种方式叫做词汇作用域(Lexical Socpe)或者闭包,也称为成为静态作用域。最能说明该问题的示例如下:
// Scope A var myFunction = function () { // Scope B var name = 'Todd'; // defined in Scope B var myOtherFunction = function () { // Scope C: `name` is accessible here!}; };
这里只是简单的定义了myOtherFunction,并没有调用。这种调用顺序也会影响变量的输出。这里我在另一控制台中再定义和调用一个函数。
var myFunction = function () { var name = 'Todd'; var myOtherFunction = function () { console.log('My name is ' + name); }; console.log(name); myOtherFunction(); // call function }; // Will then log out:// `Todd` // `My name is Todd`
词汇作用域用起来比较方便,任何父作用域中定义的变量、对象和函数在其域作用链中都可以使用。例如:
var name = 'Todd'; var scope1 = function () { // name is available here var scope2 = function () {// name is available here too var scope3 = function () {// name is also available here!}; }; };
唯一需要注意的事情是词汇域不后项起作用,下面的方式词汇域是不起作用的:
// name = undefined var scope1 = function () { // name = undefined var scope2 = function () {// name = undefined var scope3 = function () {var name = 'Todd'; // locally scoped}; }; };
能返回对name的引用,但是永远也无法返回变量本身。
5、作用域链
函数的作用域由作用域链构成。我们知道,每个函数可以定义嵌套的作用域,任何内嵌函数都有一个局部作用域连接外部函数。这种嵌套关系我们可以称为链。域一般由代码中的位置决定。当解释(resolving)一个变量,通常从作用域链的最里层开始,向外搜索,直到发现要寻找的变量、对象或者函数。
6、闭包(Closures)
闭包和词法域( Lexical Scope)很像。返回函数引用,这种实际应用,是一个可以用来解释闭包工作原理的好例子。在我们的域内部,我们可以返回对象,能够被父域使用。
var sayHello = function (name) { var text = 'Hello, ' + name; return function () { console.log(text);}; };
这里我们使用的闭包,使得我们的sayHello内部域无法被公共域访问到。单独调用函数并不作任何操作,因为其单纯的返回一个函数。
sayHello('Todd'); // nothing happens, no errors, just silence...
函数返回一个函数,也就意味着需要先赋值再调用:
var helloTodd = sayHello('Todd'); helloTodd(); // will call the closure and log 'Hello, Todd'
好吧,欺骗大家感情了。在实际情况中可能会遇到如下调用闭包的函数,这样也是行的通的。
sayHello2('Bob')(); // calls the returned function without assignment
Angular js 在$compile方法中使用上面的技术,可以将当前引用域传入到闭包中
$compile(template)(scope);
意味着我们能够猜出他们的代码(简化)应该如下:
var $compile = function (template) { // some magic stuff here// scope is out of scope, though... return function (scope) {// access to `template` and `scope` to do magic with too}; };
闭包并不一定需要返回函数。单纯在中间词汇域量的范围外简单访问变量就创造了一个闭包。
7、作用域和this关键字
根据函数被触发的方式不一样,每个作用域可以绑定一个不同的this值。我们经常使用this,但是我们并不是都了解其具体指代什么。 this默认是执行最外层的全局对象,windows对象。我们能够很容易的列举出不同触发函数绑定this的值也不同:
var myFunction = function () { console.log(this); // this = global, [object Window]}; myFunction(); var myObject = {}; myObject.myMethod = function () { console.log(this); // this = Object { myObject }}; var nav = document.querySelector('.nav'); // <nav class="nav"> var toggleNav = function () { console.log(this); // this = <nav> element}; nav.addEventListener('click', toggleNav, false);
在处理this值的时候,也会遇到问题。下面的例子中,即使在相同的函数内部,作用域和this值也会不同。
var nav = document.querySelector('.nav'); // <nav class="nav"> var toggleNav = function () { console.log(this); // <nav> element setTimeout(function () { console.log(this); // [object Window]}, 1000); }; nav.addEventListener('click', toggleNav, false);
发生了什么?我们创建了一个新的作用域且没有在event handler中触发,所以其得到预期的windows对象。如果想this值不受新创建的作用域的影响,我们能够采取一些做法。以前可能也你也见过,我们使用that创建一个对this的缓存引用并词汇绑定:
var nav = document.querySelector('.nav'); // <nav class="nav"> var toggleNav = function () { var that = this; console.log(that); // <nav> element setTimeout(function () { console.log(that); // <nav> element}, 1000); }; nav.addEventListener('click', toggleNav, false);
这是使用this的一个小技巧,能够解决新创建的作用域问题。
8、使用.call(), .apply() 和.bind()改变作用域
有时候,需要根据实际的需求来变化代码的作用域。一个简单的例子,如在循环中如何改变作用域:
var links = document.querySelectorAll('nav li'); for (var i = 0; i < links.length; i++) { console.log(this); // [object Window]}
这里的this并没有指向我们的元素,因为我们没有触发或者改变作用域。我们来看看如何改变作用域(看起来我们是改变作用域,其实我们是改变调用函数执行的上下文)。
9、.call() and .apply()
.call()和.apply()方法非常友好,其允许给一个函数传作用域来绑定正确的this值。对上面的例子我们通过如下改变,可以使this为当前数组里的每个元素。
var links = document.querySelectorAll('nav li'); for (var i = 0; i < links.length; i++) { (function () { console.log(this); }).call(links[i]);}
能够看到刚将数组循环的当前元素通过links[i]传递进去,这改变了函数的作用域,因此this的值变为当前循环的元素。这个时候,如果需要我们可以使用this。我们既可以使用.call()又可以使用.apply()来改变域。但是这两者使用还是有区别的,其中.call(scope, arg1, arg2, arg3)输入单个参数,而.apply(scope, [arg1, arg2])输入数组作为参数。
非常重要,需要注意的事情是.call() or .apply()实际已经已经取代了如下调用函数的方式调用了函数。
myFunction(); // invoke myFunction
可以使用.call()来链式调用:
myFunction.call(scope); // invoke myFunction using .call()
10、.bind()
和上面不一样的是,.bind()并不触发函数,它仅仅是在函数触发前绑定值。非常遗憾的是其只在 ECMASCript 5中才引入。我们都知道,不能像下面一样传递参数给函数引用:
// works nav.addEventListener('click', toggleNav, false); // will invoke the function immediately nav.addEventListener('click', toggleNav(arg1, arg2), false);
通过在内部创建一个新的函数,我们能够修复这个问题(译注:函数被立即执行):
nav.addEventListener('click', function () { toggleNav(arg1, arg2);}, false);
但是这样的话,我们再次创建了一个没用的函数,如果这是在循环中绑定事件监听,会影响代码性能。这个时候.bind()就派上用场了,在不需要调用的时候就可以传递参数。
nav.addEventListener('click', toggleNav.bind(scope, arg1, arg2), false);
函数并没被触发,scope可以被改变,且参数在等着传递。
11、私有和公开作用域
在许多的编程语言中,存在public和private的作用域,但是在javascript中并不存在。但是在JavaScript中通过闭包来模拟public和private的作用域。
使用JavaScript的设计模式,如Module模式为例。一个创建private的简单方式将函数内嵌到另一个函数中。如我们上面掌握的,函数决定scope,通过scope排除全局的scope:
(function () {// private scope inside here})();
然后在我们的应用中添加一些函数:
(function () { var myFunction = function () {// do some stuff here}; })();
这时当我们调用函数的时候,会超出范围。
(function () {var myFunction = function () { // do some stuff here}; })(); myFunction(); // Uncaught ReferenceError: myFunction is not defined
成功的创建了一个私有作用域。那么怎么让函公有呢?有一个非常好的模式(模块模式)允许通过私有和公共作用域以及一个object对象来正确的设定函数作用域。暂且将全局命名空间称为Module,里面包含了所有与模块相关的代码:
// define module var Module = (function () { return {myMethod: function () { console.log('myMethod has been called.');}}; })(); // call module + methods Module.myMethod();
这儿的return 语句返回了公共的方法,只有通过命名空间才能够被访问到。这就意味着,我们使用Module 作为我们的命名空间,其能够包含我们需要的所有方法。我们可以根据实际的需求来扩展我们的模块。
// define module var Module = (function () { return {myMethod: function () {}, someOtherMethod: function () {}};})(); // call module + methods Module.myMethod(); Module.someOtherMethod();
那私有方法怎么办呢?许多的开发者采取错误的方式,其将所有的函数都至于全局作用域中,这导致了对全局命名空间污染。 通过函数我们能避免在全局域中编写代码,通过API调用,保证可以全局获取。下面的示例中,通过创建不返回函数的形式创建私有域。
var Module = (function () { var privateMethod = function () {}; return { publicMethod: function () {}};})();
这就意味着publicMethod 能够被调用,而privateMethod 由于私有作用域不能被调用。这些私有作用域函数类似于: helpers, addClass, removeClass, Ajax/XHR calls, Arrays, Objects等。
下面是一个有趣事,相同作用域中的对象只能访问相同的作用域,即使有函数被返回之后。这就意味我们的public方法能够访问我们的private方法,这些私有方法依然可以起作用,但是不能够在全局左右域中访问。
var Module = (function () { var privateMethod = function () {}; return {publicMethod: function () { // has access to `privateMethod`, we can call it: // privateMethod();}};})();
这提供了非常强大交互性和安全性机制。Javascript 的一个非常重要的部分是安全性,这也是为什么我们不能将所有的函数放在全局变量中,这样做易于被攻击。这里有个通过public和private返回Object对象的例子:
var Module = (function () { var myModule = {}; var privateMethod = function () {}; myModule.publicMethod = function () {}; myModule.anotherPublicMethod = function () {}; return myModule; // returns the Object with public methods})(); // usage Module.publicMethod();
通常私有方法的命名开头使用下划线,从视觉上将其与公有方法区别开。
var Module = (function () { var _privateMethod = function () {}; var publicMethod = function () {};})();
当返回匿名对象的时候,通过简单的函数引用赋值,Module可以按照对象的方式来用。
var Module = (function () {var _privateMethod = function () {}; var publicMethod = function () {}; return { publicMethod: publicMethod,anotherPublicMethod: anotherPublicMethod} })();
以上就是关于JavaScript作用域的全部内容,希望对大家的学习有所帮助。
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 生生把写过的java版改成javascript版,第一次写,很不专业,见谅。唉,我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15