JavaScript 学习提升-CSDN博客

javascript 技能提升

理解闭包

闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。闭包的特点：
    1. 作为一个函数变量的一个引用，当函数返回时，其处于激活状态。
    2. 一个闭包就是当一个函数返回时，一个没有释放资源的栈区。
简单的说，Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
复制代码

    1.函数嵌套函数
    2.函数内部可以引用外部的参数和变量
    3.参数和变量不会被垃圾回收机制回收
        闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量
        使用闭包有一个优点，也是它的缺点，就是可以把局部变量驻留在内存中，可以避免使用全局变量。全局变量在每个模块都可调用，这势必将是灾难性的。
        所以推荐使用私有的，封装的局部变量。
        一般函数执行完毕后，局部活动对象就被销毁，，内存中仅仅保存全局作用域。但闭包的情况不同！
        嵌套函数的闭包：
    function aaa() {
        var a = 1;
        return function(){
         alert(a++)
        };
    }
    var fun = aaa();
    fun();// 1 执行后 a++，，然后a还在~
    fun();// 2
    fun = null;//a被回收！！
    闭包会使变量始终保存在内存中，如果不当使用会增大内存消耗。
复制代码

js中方法的一些高级运用

1、重复定时器

setTimeout(function() {
    // 处理
    
    setTimeout(arguments.callee, 1000);
}, 1000)
复制代码

2、数组分块处理

function chunk(array, process, context) {
    setTimeout(function() {
        var item = array.shift();
        process.call(context, item);
        
        if (array.length > 0) {
            setTimeout(arguments.callee, 1000);
        }
    }, 1000);
}

var data = [12, 123, 234, 345, 456, 567];
function printValue(item) {
    console.log(item);
}
chunk(data, printValue);
复制代码

一、js中的私有变量和特权方法

在JS的function中，有个私有变量的概念。比如下面的代码中，函数中有私有变量privateName和私有方法privateFunc，函数里面的变量和方法不能在函数外部被访问。

 function Name(){
     var privateName = "Petter"; //私有变量
     function privateFunc(){
         console.log("这是个私有函数");
     }
 }
 
复制代码

我们可以通过在函数里创建公有方法来访问本来不可以访问的私有变量和私有方法。我们把这个公有方法也叫特权方法。创建特权方法的方式有两种。

第一种在构造函数中定义特权方法：

 function Name(){
     var privateName = "Petter"; //私有变量
     var i = 1;
     function privateFunc(){
         return "这是个私有函数"+(i++);
     }
     this.getPrivateInfo = function(){
         privateName = "Alia";
         return privateFunc();
     }
 }  
 var f = new Name();
 var f2 = new Name();
 console.log(f.getPrivateInfo())
 console.log(f2.getPrivateInfo())
 //这是个私有函数
 // return a1,a2;时返回值是最后一个"a2"
复制代码

第二种使用静态私有变量

    (function(){
        var privateName ="Petter";
        var i =1;
        function privateFunc(){
            return "这是个私有函数返回值"+(i++);
        }
        Ojects = function(){}
        Ojects.prototype.getPrivateInfo = function(){
            privateName = "Alia";
            return privateFunc();
        }
    })();
    var s01 = new Ojects();
    var s02 = new Ojects();
    console.log(s01.getPrivateInfo());
    console.log(s02.getPrivateInfo());
复制代码

二、Modlule 模式插件开发

Module -- 模块，模块化开发，是在编程中十分通用的模式。

最原始的编写方法

    <body>
        <div id="dom1">红色</div>
        <div id="dom2">黄色</div>
    </body>
    <script type="text/javascript">
        var colorSet = function(objId){     
            var _getDom = function(Id){
                    return document.getElementById(Id);
            }
            var _aimObj = _getDom(objId);
            var _setColor = function(str){
                _aimObj.style.backgroundColor = str;
            }
            return{
                set:_setColor
            }
        }
        var color1 = new colorSet('dom1');
        color1.set('red');
        var color2 = new colorSet('dom2');
        color2.set('yellow');
    </script>
复制代码

揭示模块模式

    <body>
        <div id="dom1">红色</div>
        <div id="dom2">黄色</div>
    </body>
    <script type="text/javascript">
        var colorSet = (function(){     
            var _getDom = function(Id){
                    return document.getElementById(Id);
            }
            var _setColor = function(Id,str){
                _getDom(Id).style.backgroundColor = str;
            }
            return{
                getDom:_getDom,
                set:_setColor
            }
        })())
        
    </script>
复制代码

自己常用面向对象写法

    //自定义类
    function plugin(){}
    //添加参数
    plugin.prototype.str = "default param";
    //写入方法
    plugin.prototype.funcs = function(str = this.str){
        console.log(str);
    }
    //创建使用的对象
    var my = new plugin();
    //使用方法
    p.funcs("My funcs use now !!");
    p.funcs();
    
复制代码

Jquery 插件对象级写法

;(function($){
    //plugin 方法
    $.fn.plugin = function (options) {
        var defaults = {
            //定义参数
        }
        
        //options合并到defaults上,defaults继承了options上的各种属性和方法,将所有的赋值给endOptions
        var endOptions = $.extend(defaults,options);
        
        this.each(function(){
            <!--实现功能代码-->
            <!--变量存储-->
            <!--var _this = $(this);-->
        })
    }
})(jQuery)

<!--使用-->
$('#tab').plugin({
    <!--tabType: 'mouseover'-->
    <!--参数状态属性-->
});
复制代码

二、js的面向对象编程（OOP）

对象下面的变量叫做属性，对象下的函数叫做对象的方法
复制代码

1、创建一个对象

//单个对象

    var obj = new Object();
    obj.name = "陈";
    obj.backName = function(){
        console.log( this.name ); //this 在这里指向的是obj 这个对象
    }
    obj.showName();
    
//多个对象：封装函数的方法创建

    function createObject( name ){
        var obj = new Object();
        obj.name = "陈";
        obj.backName = function(){
            console.log( this.name ); //this 在这里指向的是obj 这个对象
        }
        return obj;
    }
    var FirstObj = createObject( '陈' );
    var SecondObj = createObject( '张' );
    
//单个对象:构造函数（给一个对象添加方法）

    function CreatePerson(name){
        this.name = name;
        this.showName = function(){
            alert( this.name );
        }
    }
    var p1 = new CreatePerson( '小明' );//当new去调用一个函数时，函数中的this就是创建出来的对象而函数中的返回值就是this
    p1.showName();
    var p2 = new CreatePerson( '小强' );
    p2.showName();
    
//原型模式（prototype）:给一类对象添加方法

    var arr = [1,2,3,4,5];
    var arr2 = [2,2,2,2,2];
    // Object,Array
    Array.prototype.sum = function(){//原型prototype : 要写在构造函数的下面
        var result = 0;
        for(var i=0;i<this.length;i++){
            result += this[i];
        }
        return result;
    };
    alert( arr.sum() );  
    alert( arr2.sum() );  
复制代码