JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法...

缓存

1. cache
2. 作用就是将一些常用的数据存储起来
3. 提升性能
4. cdn

 

　//-----------------分析解决递归斐波那契数列

jQuery缓存实现的分析

 

jQuery缓存的分析

 

 

 

沙箱

1. 与外界隔绝的一个环境,外界无法修改内部的数据
2. 沙箱基本模型

　　　　a)  沙箱中将所有变量的定义放最上面

　　　　b)  中间放一些逻辑代码

　　　　c)   

(function(){
    //变量定义
    //逻辑代码
    //如果需要，向window对象添加成员，以暴露接口
})()

1. 如果需要在外加暴力一些属性或者方法,就可以将这些属性或者方法加到window全局对象上
2. 但是这个window全局对象不可以直接引用,因为引用会破坏沙箱原则
3. 所以我们选择使用传参的形式将window对象传入沙箱内
4. 一般应用在书写第三方框架或者为第三方框架书写插件或者书写功能独立的一些组件

沙箱的优势

1. 杀星模式使用的是IIFE,不会在外界报篓任何全局变量,也不会找茬代码污染
2. 沙箱中的所有数据,都和外界隔离的,外界无法对其进行修改
3. 函数可以创建作用域, 上级作用域无法直接访问下级作用域

沙箱实现原理

　　函数可以创建作用域, 上级作用域无法直接访问下级作用域

第三方框架
插件
独立的组件

函数的四种调用模式

 

函数模式  　　

　　this指向window全局对象

方法模式

　　this指向调用这个方法的对象

var obj = {
    name:'jack',
    sayHello: function () {
        console.log('hello');
    }
}
obj.sayHello();

 

 

构造函数模式  

　　  this  使用new创建出来的对象

　　  new Obj()

        简单工厂模式的构造函数创建出来的对象和工厂函数无关

function Person(name, age){
        
        var o={
                name:name,
                age:age
        }
        return o;
}
var p = Person('jack',20);
console.log(p); // P 是一个 Object对象，和构造函数Person()无关

　　寄生式构造函数

a)    function fun(name, age) {
    var o = {
        name: name,
        age: age
    }
    return o;
}
var obj = new fun('jack', 20);

//创建出来的是Object对象,和构造函数无关

　　简单工厂模式的构造函数，实际上调用模式是 函数模式 调用

 

上下文模式 

　　　　 var name = "莱昂纳多·自强·郭";
        function sayHello(a, b) {
            console.log(this.name + "吃了"+ (a * b) + "个馒头");
        }

        sayHello();  // 莱昂纳多·自强·郭吃了NaN个馒头

        var obj = {
            name:"尼古拉斯·电饭·锅"
        }

        var arr= []
        arr.push();
        arr.push();
        sayHello.apply(obj,arr);  // 尼古拉斯·电饭·锅吃了NaN个馒头

　　　　　sayHello.call(obj, 1, 2); // 尼古拉斯·电饭·锅吃了2个馒头

1.  左值(等号左边)  右值(等号右边)

a)  左值被赋值

b)  右值不能被赋值,

2.  上下文调用模式中,可以修改this的值,也就是可以修改函数调用方法

3.  使用如下方法可以修改上下文,也就是this的值

　　a)  apply:函数.apply(this修改成的那个对象,[可传可不传])//传数组

　　b)  call:函数.call(this修改成的那个对象,[value1], [value2], ...[valueN]);

　　c)  定义在Function.prototype里

　　d)  数组可以点出来任何属性不报错

//案例：将传入的参数打印，参数之间用-相互连接
function foo(){
    // return arguments.join("-");     // 是错误的
    //伪数组不具有join方法，所以这个时候就要考虑去借用一下数组的join方法
    var str = Array.prototype.join.apply ( arguments, ["-"]);
//    var str2 = [].join.apply( arguments ,["-"]);
    return str ;
}

var str = foo(1,2,"abc","sofa",99) 
console.log(str);// 1-2-abc-sofa-99

 

 

4.  call和apply的区别

　　a)  第一个参数都是要把this修改成对象

　　b)  当函数需要参数的时候,那么apply用数组进行传值

　　c)  call用单个参数传值

　　d)  apply和call方法第一个传入参数是null的时候都表示为函数调用模式

　　　　1.  也就是将this指向window

5.  array.prototype === [];两个书写方式表达的意思相同

6.  api文档语句中[],的内容表示可有可无

7.  undefined*undefined = NaN

//案例：求一个数组中的最大值
        var arr = [9, 1, 4, 10, 7, 22, 8];
        //Math.max
//        Math.max(1,2,34,5);

        //apply方法的第二个参数 是一个数组
        // 在调用的时候，会将数组中的每一个元素拿出来，作为形参，挨个传递给函数

        //apply方法和call方法第一个参数传递null的时候，都表示为函数调用模式
        //也就是将this指向window
    var max = Math.max.apply( null ,arr);
    console.log ( max ); //22

 

window.onload = function () {
            //案例：给页面上所有的 div 和 p 标签添加背景色
            var divs = document.getElementsByTagName("div");
            var ps = document.getElementsByTagName("p");

            var arr = [];
            //little tip:  push方法可以传多个参数
            //arr.push(1,2,3,4,4,5)

            arr.push.apply(arr,divs);
            arr.push.apply(arr,ps);

            //如果使用arr.push()直接把divs传进来
            //那么相当于在arr中的第一个元素中存储了一个divs数组
            //但是我们需要把divs中的每一个元素单独的存入arr中
            //所以需要调用push方法的如下形式  push(1,2,4,4,5)
            //要实现这个形式的调用，就用到了apply方法的第二个参数的特性
            //在调用的时候，将第二个参数的数组，拆成每一个元素以（a,b,c,d,e,f,g） 传入函数

            //相当于 arr.push(divs[0],divs[1],divs[..])
//            arr.push(divs)



            for (var k = 0; k < arr.length; k++) {
                var ele = arr[k];
                ele.style.backgroundColor = "yellow";
            }

//            for (var i = 0; i < divs.length; i++) {
//                var div = divs[i];
//                div.style.backgroundColor = "#ccc";
//            }
//
//            for (var j = 0; j < ps.length; j++) {
//                var p = ps[j];
//                p.style.backgroundColor = "#ccc";
//            }
        }

 

转载于:https://www.cnblogs.com/mingm/p/8402088.html