JS作用域&闭包&原型链

1.1 作用域

变量的作用域：局部作用域，全局作用域；

如：

 $(function () {
        var f1 = function() {
            cat = "cat";
            var dog = "dog";
            f2 = function() {
                console.info("f2:inner:"+dog);
            }
        }
        f1()；//必须调用，载入函数中的变量
        console.info(cat);
        f2();
        console.info(dog);
    });

输出结果：
cat
f2:inner:dog

分析：
dog为局部作用域，只能在f1内部子函数中访问。
cat为全局作用域

1.2 闭包

1.2.1 闭包的概念

闭包就是定义在一个函数内部的函数，只有函数内部的子方法才能访问该函数的属性。

1.2.2 闭包用途

function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
       alert(n);
    }
    // 去除闭包
    (function(n){
        alert("remove:"+n)
    })(n);
     return f2;
}
var result=f1();// remove:999
result(); // 999
nAdd();
f1()// remove:999
result(); // 1000

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。
这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，
因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，
因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），
而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

1.3 原型链

***概念：***实例对象，构造方法，原型对象

$(function(){
        // 实例对象，构造方法，原型对象
        // 构造方法
        var Cat = function() {
        // 实例方法
        this.init1 = function() {
               console.log('1')
        },
        // 全局方法
       init2 = function() {
               console.log('2')
        }
}
 // 原型对象
Cat.prototype.init3 = function() {
        console.log("3")
}
$.extend({
       // 实例对象
       cat:new Cat()
});
$.cat.init1();
init2();
$.cat.init3();
Cat.prototype.init3();
Cat.init3();// 异常

// 构造方法.propotype = 原型对象
// 原型对象.constructor = 构造方法
console.info(Cat.prototype.constructor == Cat) =>true
// new 构造方法 = 实例对象
// 实例对象.__proto__ = 原型对象
console.info(Cat.prototype == new Cat().__proto__)=>true

输出结果：
1
2
true
true

1.4 JS中(function§{})(param);

作用：

• 使这段代码被载入时候自动执行。
• 避免污染全局变量。

JS中(function§{})(param);其实就等于

var fn = function(p){....};
fn(param);

其实可以这么理解，不过要注意的是fn是不存在的
那个函数直接定义，然后就运行了。就“压缩”成下面的样子了

jquery中

(function($){…})(jQuery)用来定义一些需要预先定义好的函数
$(function(){ })则是用来在DOM加载完成之后运行\执行那些预行定义好的函数.

1.5 jQuery插件基本知识

1.5.1 jQuery中的构造方法和实例对象

• 构造方法：jQuery=$=window.$=function(){}
• 实例对象： $("")

1.5.2 $.fn.extend和$.extend

• $.fn=$.prototype
• $.extend=$.fn.extend

当$.extend传递一个对象将把对象挂在到$函数上，当传递多个对象，将挂在到第一个对象上

当$.fn.extend传递一个对象把对象挂在到$.fn原型上，当传递多个对象，将挂在到第一个对象上

1.5.3 支持链式调用

我们都知道jQuery一个时常优雅的特性是支持链式调用，选择好DOM元素后可以不断地调用其他方法。

要让插件不打破这种链式调用，只需return一下即可。

`$.fn.myPlugin = function() {
     //在这里面,this指的是用jQuery选中的元素
     this.css('color', 'red');
     return this.each(function() {
         //对每个元素进行操作
         $(this).append(' ' + $(this).attr('href'));
     }))
 }`

git代码展示