javascript 变量、作用域、命名空间、this

javascript 变量、作用域、命名空间、this

javascript变量主要分为两类：

I.   全局变量

II.  局部变量（函数内的变量）

 全局变量就是在当前页面起作用， 一个页面当中的iframe也不管用， 只在一个页面当中有效。

 如果JS代码很多的时候， 我们都要引用JS脚本文件， 但是有可能出现两个脚本当中的全局变量名是一样的， 这会出现错误。 因为面对这些问题JS不会报错， 
所以我们需要使用命名空间来解决这些冲突。



<pre name="code" class="html">function myFunc() {
    var x = 5;
};
console.log(x); //undefined   

<pre name="code" class="html">function myFunc() {
    x = 5;
});
console.log(x); //5   x是全局作用域  在  window 下 

<pre name="code" class="html"><pre name="code" class="html"><pre name="code" class="html">具体看一下 jQuery一类的函数库

(function() {
    var jQuery = { /* all my methods go here */ };
    window.jQuery = jQuery.
})();

说明：这些变量函数什么的仍然存在于本地作用域，所以不能从外面直接访问，当然，要访问的话，只能通过这个唯一的全局的接口：jQuery，这就是所谓的闭包的最大功德


下面看2个小示例
<pre name="code" class="html">function outer() {
    var x = 5;
    function inner() {
        console.log(x); //5  本地作用域以函数为单位，所以在一个函数内定义的函数，是可以访问外面这个包含它的函数的本地变量的
    }
    inner();
}
<pre name="code" class="html">function outer() {
    var x = 5;
    function inner() {
        console.log(x); //5
        var y = 10;
    }
    inner();
    console.log(y); //undefined   outer()函数并不能访问inner()里面的任何变量
}

下面说下this 这个东东

function foo() {
    console.log(this); //global object 译者注：其实就是window
};
 
app = {};
app.foo = function() {
    console.log(this); //points to app object
}
 
var link = document.getElementById(myId);
link.addEventListener(click, function() {
    console.log(this); //points to link
}, false);

上面的 this 相信大家都能看明白  接下来看看下面这段代码

<div class="container"><pre name="code" class="html">$(myLink).on(click, function() {
    console.log(this); //points to myLink (as expected)
    var _this = this;  //store reference
    $.ajax({
        //ajax set up
        success: function() {
            console.log(this); //points to the global object. Huh?
            console.log(_this); //better!
        }
    });
});

关于“var _this = this;”这一句的用意的疑问 ？ 我解释一下

<a>$(#myLink).on(click, function() {})这句的意图是当这个DOM元素被点击时，这个函数便被执行</a> 
<a>可是由于这个函数是作为一个事件处理器被呼叫的，所以this变量会指向ID为myLink的DOM元素</a>
<a>而你在Ajax请求里指定的success方法只是一个常规的函数，所以当它被执行的时候，this被赋值为全局对象</a>

你总会见到有人写：var _this = this或者var that = this，或者类似的东西

这样做的目的是把当前this的值备份留作以后不时之需

下面看几道 小试题

function test() { // a scope
    for(var i = 0; i < 10; i++) { // not a scope
        // count
    }
    console.log(i); // 10
}

// global scope
var foo = 42;
function test() {
    // local scope
    foo = 21;
}
test();
foo; // 21


<pre name="code" class="html">Javascript 中局部变量只可以通过两个方式产生，一是通过关键字 var 来声明，一是作为函数的形参。

// global scope
var foo = 1;
var bar = 2;
var i = 2;

function test(i) {
    // local scope of the function test
    i = 5;

    var foo = 3;
    bar = 4;
}
test(10);  //函数 <code>test</code> 内部的变量 <code>i</code> 和 <code>foo</code> 是局部变量，而 <code>bar</code> 则会覆盖外部的全局变量 <code>bar</code>。


 总结 ；
<h2>名称解析顺序</h2><p>当尝试在一个函数作用域内访问一个 <code>foo</code> 变量时，<code>Javascript</code> 将会按照下面的顺序查找：</p><ol><li>当前作用域内是否有 <code>var foo</code> 的定义。</li><li>函数形参中是否有 <code>foo</code> 变量。</li><li>函数自身的名称是否为 <code>foo</code>。</li><li>跳到外层定义域，再从第一部开始查找起。</li></ol><p>
</p><p>
</p><p>
</p><p>建议大家使用匿名的外部函数来将代码封装到空间内，这样不仅可以解决命名空间的冲突，同时也有利于程序的模块化。
此外，使用全局变量不是一个好习惯，这将带来高成本的维护代价而且容易产生错误
</p>