javascript有一些对于初学者甚至是有经验的开发者都难以理解的概念. 这个部分是针对那些听到 : 作用域, 闭包, this, 命名空间, 函数作用域, 函数作用域, 全局作用域, 变量作用域(后续翻译这个词我也没太懂), 公共/私有 作用域 后想要深入了解的人的. 当你看完这篇文章后你将了解有关以下问题的答案:
在javasript中, 作用域指你的代码当前的上下文. 作用域有全局和局部的区别. 了解javascript作用域是你书写出更健壮的代码和成为更好的开发者的钥匙. 你将了解变量/函数 在那里是可访问的, 改变你的代码的作用域, 并且更快的写出更易于维护和调试的代码.思考作用域是很容易的, 我们是在作用A 或 作用域B的内部
当你写下一行代码之前, 你就在我们叫做全局作用域里 ; 如果此时我们声明(declare)一个变量(variable), 那他默认就是全局的( globally ).
//全局作用域 global scope var name = "Todd"
全局作用域是你最好朋友, 同时也是你的噩梦,学习控制作用域是容易的, 这样做你将避免在全局作用域中运行时的问题(通常是命名空间冲突);你经常听说'全局作用域是不好的', 但是没有人证明为什么. 全局作用域不是坏的, 你需要通过它创建可访问的 Modules/APIs, 你必须使用并发挥它的优势, 确保不会出现问题.
任何人使用jQuery的时候要这样做:
jQuery('.myClass')我们在全局作用域访问jQuery, 我们可以参考此次访问的命名空间. 命名空间偶尔作为一个作用域使用, 但是通常是指那些最顶级的作用域. 在这个例子里, jQuery在全局作用域中, 但是也是我们的命名空间. 这个jQuery的命名空间默认的存在在全局作用域下, 它充当了jQuery库的命名空间, 在它内部的所有东西充当了这个命名空间的后代.
局部作用域是指在全局作用域内部定义(defined:定义, default:默认)的作用域. 通常在一个全局作用域内定义的任何一个函数都有自身的局部作用域. 在函数内部定义的函数也拥有一个看起来像外部函数的局部作用域. 如果我们在一个函数内部定义了变量,那么这些函数的作用域就在函数内部. 像这个例子 :
//Scope A : global scope out here var myFuntion = function () { //ScopeB : local scope in here }除非暴漏出来,否则局部作用域成员在全局作用域内是不可见的. 意思是如果我们定义一些函数和变量在一个新的作用域内, 在这个作用域外它是不可访问的. 一个简单的例子如下 :
var myFunction = function () { var name = "ittce"; console.log( name ); } console.log( name );// Uncaught ReferenceError: name is not defined这个变量name在局部作用域内, 它没有暴漏在父级作用域内, 因此显示未定义.
javascript中的所有作用域只能靠函数创建, 不能靠for/while 循环或者表达式声明(if, switch)来创建. 新函数 = 新作用域, 这是规矩.一个例子来演示作用域的创建:
//Scope A var myFunction = function () { //Scope B var muOtherFunction = function () { //Scope C } }创建一个局部作用域和局部 变量/函数/对象 是很容易的.
当你看到一个函数在另外一个函数内部, 内部函数可以访问到外部函数的作用域, 它被叫做词法作用域 或 闭包, 也被称为静态作用域.下面是一个最容易的演示例子:
//Scope A var myFunction = function(){ //Scope B var name = "ittce"; // defined in Scope B var myOtherFunction = function () { //Scope C : name is accessible here ! name 可以在这里访问到 } } 你发现 myOtherFunction 在这里不应该被这样叫, 它只是简单的定义在这里. 调用命令也会引起变量和作用域的反应, 这里我定义我的函数并调用它在另外一个console的下面 :
var myFunction = function () { var name ="ittce"; var myOtherFunction = function () { console.log("My name is" + name ); } console.log( name ); myOtherFunction(); } // 将要输出: // ittce // My name is ittce词法作用域是易于使用的, 任何定义于它作用域链顶端的变量/函数/对象,在它的作用域内都是可用的.像这个例子:
var name = 'ittce'; var scope1 = function () { // name is available here name 在这里是可用的 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 = 'ittce'; } } }我可以总是返回name的一个引用, 但是并不是它自身.
作用域链建立在一个特定的函数作用域之上. 定义的每个函数都有它自身的作用域嵌套, 因此我们知道, 定义在另一个函数内部的函数拥有一个和外部函数联系的局部作用域, 这种联系我们叫做链. 它总是有一个位置在那个确定的作用域内. 当开始解析一个变量, javascript会从最内部的作用域逐层向外查找直到找到这个变量/对象/函数, 或没找到返回undefined错误.
闭包和词法作用域的联系非常密切, 一个更好的例子去演示闭包如何工作, 一个实际例子如下,当函数内部返回另一个函数的引用时.在父作用域内, 我们可以访问到内部作用域返回的东西 :
var sayHello = function ( name ) { var text = "hello," + name (); return function () { console.log( text ); } }闭包概念可以使我们内部作用域的东西私有化,无法被外部作用域所访问. 当我们单独调用这个函数时, 他将不做任何事, 因为它返回的是一个函数
sayHello( 'ittce' );// 没有事情发生, 也不报错, 只有沉默
该函数返回一个函数, 这意味着它需要分配, 然后再次调用 :
var helloIttce = sayHello( 'ittce' ); helloIttce(); // will call the closure and log 'hello, ittce';
好的, 我说谎了, 你可以不用分配就调用它, 你可以能已经看到过这种调用闭包的方式 :
sayHello( 'ittce' )();
AngularJS中的 $.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 // 这里仍然可以访问到 'template' 和 'scope' 做我们想做的事情 } }一个函数不需要返回一个调用闭包的命令也可以调用闭包. 简单的直接访问外部变量的词法作用域来创建一个闭包.
依据函数如何被调用给this绑定一个不同的作用域. 我们都使用过this, 但并不都了解它被调用时的不同. 在客户端默认的this指向最外部的全局对象, window. 我们很容易发现在不同的调用方式下, this具有不同的值 :
var myFunction = function () { console.log( this ) // this 这是是全局对象 window } myFunction(); var myObject = {}; myObject.myMethod = function () { console.log( this ) // this 这里指向 对象 myObject } var nav = document.querySelector('.nav'); var toggleNav = function () { console.log( this ); } nav.addEventListener('click', toggleNav, false ); // 这里调用函数时, this 指向 .nav 这个DOM element当我们使用this时, 也会经常出现问题. 例如像下面这样, 甚至在相似的函数内部那些作用域和this的值都可以被改变的:
var nav = document.querySelector('.nav'); var toggleNav = function () { console.log( this ); // nav element setTimeout( function (){ console.log( this ); // window }, 500 ); }; nav.addEventListener('click', toggleNav, false );这里发生了什么呢 ? 我们创建了一个不调用我们事件处理程序的新的作用域, 因此他像预期的那样指向了全局作用域: window. 有几种方法可以让this不受新作用域的影响, 像我们预期的那样工作. 你可以已经了解过这个, 我们可以使用一个 that 变量缓存this的引用 :
var nav = document.querySelector( '.nav' ); var toggleNav = function () { var that = this; setTimeout( function (){ console.log( that ); }, 500); }; nav.addEventListener('click', toggleNav, false );这样一个小花招可以让this在新创建的作用域内按我们预期的那样指向正确的值.
有时你需要操纵javascript作用域像你想的那样工作. 一个简单的例子来演示在循环中, 作用域是怎么改变的:
var links = document.querySelectorAll('a'); for ( var i = 0; i < links.length; i++ ){ console.log( this ); // this = window }这里this的值不指向我们的DOM节点, 我们没有调用任何东西或者改变作用域. 让我们看下我们如何修改作用域( 它看起来像是我们改变了作用域, 其实是改变了函数被调用时的上下文执行环境 ).
call() && apply() 方法真的很棒, 它可以允许你传递一个绑定正确this的作用域给函数. 让我们操作以上的函数, 让他们的this指向各自的在数组中DOM节点 :
var links = document.querySelectorAll( 'a' ); for ( var i = 0; i < links.length; i++ ) { ( function () { console.log( this ); }).call( links[i] ); } 你可以看到我们传递传递在数组中迭代的当前的节点: links[i], 这改变了函数的作用域, 使this指向了迭代的DOM节点. 如果我们需要的话, 我们可以使用这个this. 我们可以使用call() && apply() 来改变函数的作用域, 但是更进一步的参数传递两者有区别 : call( scope, arg1, arg2 )需要单个的用参数, 使用逗号分隔 ; apply( scope, [ agr1, agr2] )接受一个参数数组.重要的是要记住: 使用 apply() 或 call()时实际上调用了函数,因此不要这样:
myFunction();
你需要用.call()处理它,并链接到这个方法
myFunction.call();
不向上面一样, 使用 .bind() 不会调用函数, 它仅仅是在函数被调用之前绑定值.这个方法在ECMAScipt5中才被引入真是一个耻辱,因为它实在太棒了. 你知道在函数引用时我们不能够传递参数, 像这样 :
//工作 nav.addEventListener('click', toggleNav, false ); //立刻执行 nav.addEventListener('click', toggleNav( arg1, agr2 ), false ); 我们可以解决这个问题, 但是需要在它里面创建一个新的函数 :
nav.addEventListener('click', function () { toggleNav( arg1, agr2 ); }, false );但是这改变了作用域并且我们创建了一个不必要的函数, 如果我们需要在循环中添加事件监听,这将是巨大的性能浪费. 这就是 .bind()闪耀的原因, 我们可以不调用函数的情况下, 传递参数给它 :
nav.addEventListener( 'click', toggleNav.bind( scope, arg1, arg2 ), false );
函数没有被调用, 但是作用域已经根据需求改变, 参数坐等函数调用时传递.
在许多程序设计语言中, 你可能听说过 公共 和 私有 作用域, 但是在 javascript 中不存在这些. 可是我们可以通过闭包来模拟公共和私有作用域. 通过javascript设计模式 , 例如单例模式, 我们可以创建公共和私有作用域. 一个简单的方法去创建私有作用域, 是在我们的函数们外包一层函数. 像我们学习的那样, 函数创建的作用域内 , 可以保存东西不被外部
新闻热点
疑难解答
