js学习笔记 day6

 

## 1.js的线程

<script>

//线程：一个线程一次只能处理一件事情，多个线程就能够多个事情同时进行

//JS是单线程的！

//JS中，分了三个任务

//1.渲染任务

//2.js的代码执行任务

//3.事件处理任务(事件队列)

 

//JS代码的执行顺序

//1.先把主任务（代码任务）执行完毕

//2.再去执行次要的任务(包括setTimeOut和setInterval中的回调函数中的代码)

//setTimeOut

//至少在指定的时间后执行指定回调函数

//由于要等主任务中的代码执行完毕以后，才回去检查，setTimeOut的回调函数，有没到执行时间

//问题代码

         for(var i = 0 ; i < 10; i++){

         setTimeout(function()

         console.log(j);

         },0);

        }

         //解决问题的代码

for(var i = 0; i< 3; i++){

 

function foo(j){

//var j;

 

       //j = 实参

                  //j = i

return function(){

console.log(j);

};

}

//0

var f = foo(i);

setTimeout(f, 0);

}

</script>

## 2.缓存

<script>

//缓存：cache

 

//缓存的做用，就是将一些经常使用的数据，存储起来，提供使用，提高性

 

//CDN Content Delivery Network

 

//数据库 高并发

//非关系型数据库（内存型数据库） MongoDB Redis

 

//网站静态页面缓存机制

//将网页静态化，存储在服务器端

</script>

## 3.关于使用递归解决斐波那契数列问题的性能分析和优化

<script>

1.使用数组存储数列，虽然能够提高性能，可是有局限性

//能够求5的 也能够求10的，可是要求100呢 100000呢

var arr = [1, 1, 2, 3, 5, 8, 13, 21, 34];

​

​

​

2. //定义一个缓存数组，存储已经计算出来的斐波那契数

//1.计算的步骤

//1.先从cache数组中去取想要获取的数字

//2.若是获取到了，直接使用

//3.若是没有获取到，就去计算，计算完以后，把计算结果存入cache，而后将结果返回

 

// var cache = [];

//

// function fib(n){

// //1.从cache中获取数据

// if(cache[n] !== undefined){

// //若是缓存中有 直接返回

// return cache[n];

// }

// //若是缓存中没有 就计算

// if(n <= 2){

// //把计算结果存入数组

// cache[n] = 1;

// return 1;

// }

// var temp = fib(n - 1) + fib(n - 2);

// //把计算结果存入数组

// cache[n] = temp;

// return temp;

// }

//

// console.log(fib(6));

​

​

var count =0 ;

function createFib(){

var cache = [];

function fib(n){

count ++;

//1.从cache中获取数据

if(cache[n] !== undefined){

//若是缓存中有 直接返回

return cache[n];

}

//若是缓存中没有 就计算

if(n <= 2){

//把计算结果存入数组

cache[n] = 1;

return 1;

}

var temp = fib(n - 1) + fib(n - 2);

//把计算结果存入数组

cache[n] = temp;

return temp;

}

return fib;

}

3.把下一个知识点应用进来，建立缓存容器

function createCache(){

var cache = {};

return function (key, value) {

//若是传了值，就说名是设置值

if(value !== undefined){

cache[key] = value;

return cache[key];

}

//若是没有传值，只穿了键，那就是获取值

else{

return cache[key];

}

}

}

 

var count =0 ;

function createFib(){

var fibCache = createCache();

function fib(n){

count ++;

//1.从cache中获取数据

if(fibCache(n) !== undefined){

//若是缓存中有 直接返回

return fibCache(n) ;

}

//若是缓存中没有 就计算

if(n <= 2){

//把计算结果存入数组

fibCache(n , 1) ;

return 1;

}

var temp = fib(n - 1) + fib(n - 2);

//把计算结果存入数组

fibCache(n, temp) ;

return temp;

}

 

return fib;

}

var fib = createFib();

// console.log(fib(6));

fib(5);

console.log(count);

count = 0;

fib(6);

console.log(count);

count = 0;

fib(20);

console.log(count);

count = 0;

fib(21);

console.log(count);

count = 0;

 

</script>

## 4.jquery缓存实现的分析

<script>

//eleCache

//typeCache

//classCache

//eventCache

 

function createCache(){

//cache对象中以键值对的形式存储咱们的缓存数据

var cache = {};

//index数组中该存储键，这个键是有顺序，能够方便咱们作超出容量的处理

var index = [];

return function (key, value) {

//若是传了值，就说名是设置值

if(value !== undefined){

//将数据存入cache对象，作缓存

cache[key] = value;

//将键存入index数组中，以和cache中的数据进行对应

index.push(key);

 

//判断缓存中的数据数量是否是超出了限制

if(index.length >= 50){

//若是超出了限制

//删除掉最先存储缓存的数据

//最先存入缓存的数据的键是在index数组的第一位

//使用数组的shift方法能够获取并删除掉数组的第一个元素

var tempKey = index.shift();

//获取到最先加入缓存的这个数据的键，可使用它将数据从缓存各类删除

delete cache[tempKey];

}

}

//若是没有传值，只传了键，那就是获取值

// else{

// return cache[key];

// }

return cache[key];

}

}

 

var eleCache = createCache();

eleCache("name","高金彪");

console.log(eleCache("name"));

var typeCche = createCache();

</script>

## 5.沙箱

<script>

//沙箱

//与外界隔绝的一个环境，外界没法修改该环境内任何信息，沙箱内的东西单独属于一个世界

 

//360沙箱模式

//将软件和操做系统进行隔离，以达到安全的目的

 

//苹果手的app使用的就是沙箱模式去运行

//隔离app的空间，每一个app独立运行

 

//JS中的沙箱模式

//沙箱模式的基本模型

 

// (function(){

// var a = 123;

// })();

 

var sum = 0;

for(var i = 1; i<=100;i++){

sum+=i;

}

console.log(sum);

 

var a =123;

 

(function(){

 

//在沙箱中将全部变量的定义放在最上方

 

//中间就放一些逻辑代码

 

//最后，若是须要，就给外界暴露一些成员（经过window）

 

var sum = 0;

for(var i = 1; i<=100;i++){

sum+=i;

}

console.log(sum);

})();

 

//为何要使用当即执行函数表达式（IIFE）

//由于IIFE不会在外界暴露任何的全局变量，可是又能够造成一个封闭的空间

//恰好能够实现沙箱模式

//jQuery当中的沙箱模式

(function(win){

 

var itcast = {

getEle:function () {

 

}

}

 

//若是须要在外界暴露一些属性或者方法，就能够将这些属性和方法

//加到window全局对象上去

//可是这window全局对象不能够直接引用，由于直接引用会破坏沙箱原则

//因此咱们选择使用传参的形式将 window对象 传入沙箱内

//此时沙箱内使用window对象的时候，不会再去全局搜索window对象

//而使用的就是沙箱内部定义的形参

 

win.itCast = win.$ = itcast;

 

})(window)

​

//沙箱模式通常应用在书写第三方框架

//或者为第三方框架书写插件

//或者书写功能独立的一些组件

 

//沙箱模式的优点

//1.沙箱模式使用的是IIFE，不会再外界暴露任何的全局变量，也就不会形成全局变量污染

//2.沙箱中的全部数据，都是和外界彻底隔离的，外界没法对其进行修改，也就保证了代码的安全性

//js中沙箱模式的实现原理就是

//函数能够构建做用域！上级做用域不能直接访问下级做用域中的数据

</script>

## 6.函数的四种调用模式

<script>

//1.函数模式

//this指向window全局对象

 

//2.方法模式

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

 

//3.构造函数模式

//this 使用new建立出来的对象

 

//4.上下文模式

 

function test(){

console.log(this);

}

test();

 

var obj1 = {

test:function(){

console.log(this);

}

}

obj1.test();

 

function Person(){

console.log(this);

}

var obj =new Person();

 

</script>

## 7.构造函数的调用模式特征

<script>

//构造函数调用模式的特征

 

//1.构造函数的首字母要大写

//2.通常状况下和new关键字一块儿使用

//3.构造函数中的this指定而是new关键字建立出来的对象

//4.默认的返回new建立出来的这个对象

 

function Person(){

 

}

 

var p = new Person();

//构造函数的返回值：

//默认返回new建立建立出来的对，如果值类型的数据，没有影响

//如果对象类型，则返回这个对象，不会返回原来建立出来的对象

 

//1.工厂模式的构造函数

function Person(name,age){

var o = {

name:name,

age:age,

sayHello:function(){

 

}

}

return o;

}

 

var p = Person("张三", 18);

console.log(p);

//简单工厂模式的构造函数 建立出来的对象 跟该构造函数无关

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

 

//2.寄生式构造函数

function Person(name,age){

var o = {

name:name,

age:age,

sayHello:function(){

 

}

}

return o;

}

 

var p = new Person();

 

</script>

## 8.上下文函数调用模式

<script>

//上下文

//字面意思：上面的文字，下面的文字

 

//JS中的上下文

//context 执行环境的意思

//this

 

//在上下文调用模式中，能够修改this的值，也就是能够修改函数的调用方式

 

//使用以下两个方法，能够修改函数调用上下文，也就是this的值

//apply

//api文档中的语法语句中 [] 表明括起来的东西无关紧要

//函数.apply(对象, 函数须要参数列表，是一个数组)

//call

//函数.call(对象,arg1,arg2,arg3...argn)

 

var name = "莱昂纳多·自强·郭";

function sayHello(a, b) {

console.log(this.name + "吃了"+ (a * b) + "个馒头");

}

// sayHello(); //

var obj = {

name:"尼古拉斯·电饭·锅"

}

 

var arr= []

arr.push();

arr.push();

sayHello.apply(obj,arr); //

 

function test(a , b ,c){

 

}

sayHello.call(obj, 1, 2);

// sayHello.call(obj); //

//左值 右值

// function test(){

 

// this = 1;

 

// }

//call和apply的区别

//1.第一个参数都是要把this的指向修改为为指定的对象

//2.当函数须要参数的时候，那么apply是用数组进行参数的传递

//3.而call是使用单个的参数进行传递

 

//call用于肯定了函数的形参有多少个的时候使用

//apply用于函数的形参个数不肯定的状况

</script>

<script>

     //案例：求一个数组中的最大值

     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);

     //案例：将传入的参数打印，参数之间用-相互链接

     function foo() {

     return arguments.join("-");

 

     //伪数组不具备join方法，因此这个时候就要考虑去借用一下数组的join方法

     var str = Array.prototype.join.apply(arguments,["-"]);

     var str = [].join.apply(arguments,["-"]);

     return str;

     }

     var str = foo(1, 3, "abc", "ffff", 99) // 1-3-abc-ffff-99

     console.log(str);

     // var arr = [1,2,3,4];

     console.log(arr.join("-"));

 

     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";

     }

     }

</script>

## 9.call apply 和bind 的概述

<script>

    // call bind apply 改变函数中的this

    // 函数是一个对象

    // var fn = new Function();

    // function fn() {

    // }

    

    // 证实fn是Function的实例(对象)

    // console.log(fn.__proto__ === Function.prototype);

    

    // console.dir(fn);

    

    function fn(x, y) {

     console.log(this);

     console.log(x + y);

    }

    

    // fn(5, 6); // this->window

    

    // 1 调用函数，改变函数中的this

    // 2 第一个参数 设置函数内部this的指向

    // 其它参数，对应函数的参数

    // 3 函数的返回值 call的返回值就是函数的返回值

    // 4 测试

    // var obj = {

    // name: 'zs'

    // }

    // fn.call(obj, 5, 6);

    // apply 只有两个参数

    // 1 调用函数，改变函数中的this

    // 2 第一个参数 设置函数内部this的指向

    // 第二个参数 是数组

    // 3 函数的返回值 apply的返回值就是函数的返回值

    // 4 测试

    // var obj = {

    // name: 'ls'

    // }

    // fn.apply(obj, [1, 2]);

    // bind

    // 1 改变函数中的this，不会调用函数，而是把函数复制一份

    // 2 第一个参数 设置函数内部this的指向

    // 其它参数，对应函数的参数

    // 3 函数的返回值 call的返回值就是函数的返回值

    // 4 测试

    var obj = {

     name: 'ww'

    }

    

    var f = fn.bind(obj, 5, 5);

    f();

</script>

​

</script>