Javacript 中有一系列作用域的概念。对于新的JS的开发人员无法理解这些概念，甚至一些经验丰富的开发者也未必能。这篇文章主要目的帮助理解JavaScript中的一些概念如：scope,closure, this, namespace, function scope, global scope, lexical scope and public/private scope. 希望从这篇文章中能回答如下的问题：
- 什么是作用域（scope）"color: #333333">什么是全局(Global)和局部(Local)作用域？
- 什么是命名空间和作用域的区别？
- 什么是this关键字且作用域对其的影响？
- 什么是函数作用域、词汇作用域？
- 什么是闭包？
- 什么是公有和私有作用域？
- 如何理解和创建上述内容？
1、什么是作用域( Scope)"htmlcode">
全局作用域即是你的好友又是你的噩梦。学习控制作用域很简单，学会后使用全局变量就不会遇到问题（通常为命名空间冲突）。经常会听到大伙说 “全局作用域不好”，但是从没有认真想过为什么。不是全局作用域不好，而是使用问题。在创建跨作用域Modules/APIs的时候，我们必须在不引起问题的情况下使用它们。 ...我们正在全局作用域中获取jQuery,我们可以把这种引用称为命名空间。命名空间通常是指作用域中可以交换word，但是其通常引用更高级别的作用域。在上面的例子中，jQuery 在全局作用域中，也称为命名空间。jQuery 作为命名空间定义在全局作用域中，其作为jQuery库的命令空间，库中的所有内容成为命名空间的子项（descendent ）。 2、什么是局部作用域（ Local Scope）？ 任何的局部作用变量对全局变量来说是不可见的。除非对外暴露。如在新的作用域内定义了函数和变量，他们为当前新作用域内的变量，不能够在当前作用域外被访问到。下面为一个简单的说明示例： 变量name为局部变量，没有暴露给父作用域，因此出现not defined。 3、函数作用域 非常方便的创建新的域和本地变量、函数和对象。 4、词汇作用域( Lexical Scope) 这里只是简单的定义了myOtherFunction，并没有调用。这种调用顺序也会影响变量的输出。这里我在另一控制台中再定义和调用一个函数。 词汇作用域用起来比较方便，任何父作用域中定义的变量、对象和函数在其域作用链中都可以使用。例如： 唯一需要注意的事情是词汇域不后项起作用，下面的方式词汇域是不起作用的： 能返回对name的引用，但是永远也无法返回变量本身。 5、作用域链 6、闭包（Closures） 这里我们使用的闭包，使得我们的sayHello内部域无法被公共域访问到。单独调用函数并不作任何操作，因为其单纯的返回一个函数。 函数返回一个函数，也就意味着需要先赋值再调用： 好吧，欺骗大家感情了。在实际情况中可能会遇到如下调用闭包的函数，这样也是行的通的。 Angular js 在$compile方法中使用上面的技术，可以将当前引用域传入到闭包中 意味着我们能够猜出他们的代码（简化）应该如下： 闭包并不一定需要返回函数。单纯在中间词汇域量的范围外简单访问变量就创造了一个闭包。 7、作用域和this关键字 在处理this值的时候，也会遇到问题。下面的例子中，即使在相同的函数内部，作用域和this值也会不同。 发生了什么？我们创建了一个新的作用域且没有在event handler中触发，所以其得到预期的windows对象。如果想this值不受新创建的作用域的影响，我们能够采取一些做法。以前可能也你也见过，我们使用that创建一个对this的缓存引用并词汇绑定： 这是使用this的一个小技巧，能够解决新创建的作用域问题。 8、使用.call(), .apply() 和.bind()改变作用域 这里的this并没有指向我们的元素，因为我们没有触发或者改变作用域。我们来看看如何改变作用域（看起来我们是改变作用域，其实我们是改变调用函数执行的上下文）。 9、.call() and .apply() 能够看到刚将数组循环的当前元素通过links[i]传递进去，这改变了函数的作用域，因此this的值变为当前循环的元素。这个时候，如果需要我们可以使用this。我们既可以使用.call()又可以使用.apply()来改变域。但是这两者使用还是有区别的，其中.call(scope, arg1, arg2, arg3)输入单个参数，而.apply(scope, [arg1, arg2])输入数组作为参数。 非常重要，需要注意的事情是.call() or .apply()实际已经已经取代了如下调用函数的方式调用了函数。 myFunction(); // invoke myFunction myFunction.call(scope); // invoke myFunction using .call() 通过在内部创建一个新的函数，我们能够修复这个问题（译注：函数被立即执行）： 但是这样的话，我们再次创建了一个没用的函数，如果这是在循环中绑定事件监听，会影响代码性能。这个时候.bind()就派上用场了，在不需要调用的时候就可以传递参数。 函数并没被触发，scope可以被改变，且参数在等着传递。 11、私有和公开作用域 使用JavaScript的设计模式，如Module模式为例。一个创建private的简单方式将函数内嵌到另一个函数中。如我们上面掌握的，函数决定scope，通过scope排除全局的scope： 然后在我们的应用中添加一些函数： 这时当我们调用函数的时候，会超出范围。 成功的创建了一个私有作用域。那么怎么让函公有呢？有一个非常好的模式（模块模式）允许通过私有和公共作用域以及一个object对象来正确的设定函数作用域。暂且将全局命名空间称为Module，里面包含了所有与模块相关的代码： 这儿的return 语句返回了公共的方法，只有通过命名空间才能够被访问到。这就意味着，我们使用Module 作为我们的命名空间，其能够包含我们需要的所有方法。我们可以根据实际的需求来扩展我们的模块。 那私有方法怎么办呢？许多的开发者采取错误的方式，其将所有的函数都至于全局作用域中，这导致了对全局命名空间污染。 通过函数我们能避免在全局域中编写代码，通过API调用，保证可以全局获取。下面的示例中，通过创建不返回函数的形式创建私有域。 这就意味着publicMethod 能够被调用，而privateMethod 由于私有作用域不能被调用。这些私有作用域函数类似于： helpers, addClass, removeClass, Ajax/XHR calls, Arrays, Objects等。 下面是一个有趣事，相同作用域中的对象只能访问相同的作用域，即使有函数被返回之后。这就意味我们的public方法能够访问我们的private方法，这些私有方法依然可以起作用，但是不能够在全局左右域中访问。 这提供了非常强大交互性和安全性机制。Javascript 的一个非常重要的部分是安全性，这也是为什么我们不能将所有的函数放在全局变量中，这样做易于被攻击。这里有个通过public和private返回Object对象的例子： 通常私有方法的命名开头使用下划线，从视觉上将其与公有方法区别开。 当返回匿名对象的时候，通过简单的函数引用赋值，Module可以按照对象的方式来用。 以上就是关于JavaScript作用域的全部内容，希望对大家的学习有所帮助。
// global scopevar name = 'Todd';
jQuery('.myClass');
局部作用域通常位于全局作用域后。一般来说，存在一个全局作用域，每个函数定义了自己的局部作用域。任何定义于其他函数内部的函数都有一个局部作用域，该局部作用域链接到外部函数。
如果定义了一个函数并在里面创建变量，那么这些变量就是局部变量。例如：
// 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);
JavaScript 中函数域为最小域范围。for与while循环或者if和switch都不能构建作用域。规则就是，新函数新域。一个创建域的简单示例如下：
// Scope A
var myFunction = function () {
// Scope B
var myOtherFunction = function () {// Scope C};};
当遇到一个函数嵌套到另一函数中，内部函数能够访问外部函数的作用域，那么这种方式叫做词汇作用域（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!};
};
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};
};
};
函数的作用域由作用域链构成。我们知道，每个函数可以定义嵌套的作用域，任何内嵌函数都有一个局部作用域连接外部函数。这种嵌套关系我们可以称为链。域一般由代码中的位置决定。当解释（resolving）一个变量，通常从作用域链的最里层开始，向外搜索，直到发现要寻找的变量、对象或者函数。
闭包和词法域（ Lexical Scope）很像。返回函数引用，这种实际应用，是一个可以用来解释闭包工作原理的好例子。在我们的域内部，我们可以返回对象，能够被父域使用。
var sayHello = function (name) {
var text = 'Hello, ' + name;
return function () {
console.log(text);};
};
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
$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};
};
根据函数被触发的方式不一样，每个作用域可以绑定一个不同的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);
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);
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);
有时候，需要根据实际的需求来变化代码的作用域。一个简单的例子，如在循环中如何改变作用域：
var links = document.querySelectorAll('nav li');
for (var i = 0; i < links.length; i++) {
console.log(this); // [object Window]}
.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]);}
可以使用.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);
nav.addEventListener('click', toggleNav.bind(scope, arg1, arg2), false);
在许多的编程语言中，存在public和private的作用域，但是在javascript中并不存在。但是在JavaScript中通过闭包来模拟public和private的作用域。
(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
// define module
var Module = (function () {
return {myMethod: function () {
console.log('myMethod has been called.');}};
})();
// call module + methods
Module.myMethod();
// define module
var Module = (function () {
return {myMethod: function () {},
someOtherMethod: function () {}};})();
// call module + methods
Module.myMethod();
Module.someOtherMethod();
var Module = (function () {
var privateMethod = function () {};
return {
publicMethod: function () {}};})();
var Module = (function () {
var privateMethod = function () {};
return {publicMethod: function () {
// has access to `privateMethod`, we can call it:
// privateMethod();}};})();
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 () {};})();
var Module = (function ()
{var _privateMethod = function () {};
var publicMethod = function () {};
return {
publicMethod: publicMethod,anotherPublicMethod: anotherPublicMethod}
})();
JavaScript,作用域
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。