前端

js高级知识点(第六天)

2019-08-13  本文已影响1人  js66

# js高级知识点

##  线程

- 一个线程一次只能处理一件事情,多个线程可以多个事情同是进行。

**js中,分三个任务**

- 渲染任务

- js代码执行任务

- 事情处理任务

**js代码执行顺序**

- 先把主任务(代码任务)执行完毕

- 再去执行次要任务(包括setTimeOut 和 setInterval中的回调函数中的代码,这两个都属于宏任务,promise中的then属于微任务)

**setTimeOut**

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

- 因为要等主任务中的代码执行完毕之后才回去检查,setTimeOut的回调函数,有没有到执行时间

## 闭包

闭:闭合,关闭,封闭

包:包裹,包起来。

一个具有封闭的对外不公开的,包裹结构,或空间

- js中的闭包就是函数

- 闭包的原理就是作用域访问原则:上级作用域无法访问下级作用域。

- 闭包要解决的问题:1、闭包内的数据不允许外界访问,2、要解决的问题就是间接访问数据。

```javascript

    // 例1

    function foo(){

        var num = 123;

        return num;

    }

    var x = foo();

    console.log(x)

    var y = foo();

    console.log(x===y) //这里因为是数值所以相等

    // 例2(用来说明函数的每次调用,返回的对象都是新的,每次都不一样)

    function foo(){

        var obj = {

            name: 'hyl',

            age:15

        }

        return obj;

    }

    var obj1 = foo();

    var obj2 = foo();

    console.log(obj1 === obj2);

```

- 常见的问题

```javascript

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

        setTimeout(()=>{

            console.log(i)

        },0) // 5,5,5,5,5

    }

    div[i].onclick = function(){

        console.log(i)

    }

```

----

- 解决方式

```javascript

    for(let i=0;i<5;i++){

        setTimeout(()=>{

            console.log(i) // 0,1,2,3,4,用es6的块级作用域解决

        },0)

    }

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

        setTimeout((function(j){

            return function(){

                console.log(i)

            }

        })(i),0) // 0,1,2,3,4,用闭包的方式解决

    }

    div[i].onclick = function(j){

        return function(){

            console.log(j)

        }

    }(i)

```

**沙箱模式**

----

    原理:函数可以构建作用域,上级作用域不能直接访问下级作用域。

-  与外界隔绝的一个环境,外界无法修改环境内的任何信息,沙箱内的东西单独属于一个世界

-  360 沙箱模式,将软件和操作系统进行隔离,以达到安全的目的

-  苹果手机也是一个沙箱模式,隔离app的空间,每个app都是独立运行的。

-  js的沙箱模式就是立即执行函数

```javascript

    // 基本模式

    (function(){

        var a = 123;

    })()

    // jquery中的沙箱模式

    (function(win){ // window对象最好不要全局引用,因为直接引用会破坏沙箱原则,所以我们选择新参的形式传入,此时沙箱使用window对象的时候,不会进行全局搜索window对象。

        var itcast = {

            getEle:function(){

            }

        }

        win.itcast = itcast;

    }

    )(window)

```

- 沙箱模式一般应用于第三方框架或者插件或者书写一些独立的组件

**沙箱模式的**

- 沙箱模式使用的是IIFE(立即执行函数),不会再外界暴露任何全局变量,也就不会造成全局对象污染。

- 沙箱模式中的所有数据,都是和外界相隔离的,外界无法进行修改,也保证了代码的安全性。

## 缓存

**缓存的作用(cache) 就是将一些常用的数据,储存起来,提供使用,提升性能**

- CDN(Content Delivery Network 内容分发网络)

- Redis做缓存

- 网站静态页面缓存机制(将网页静态化)

**斐波那契的性能问题**

- fib(3) = fib(1)+fib(2) fib(4) = fib(2)+ fib(3) fib(3)就重复计算了

```javascript

    // 优化前

    let number = 1;

    function fib(n) {

        number++;

        if (n == 1 || n == 0) {

            return 1;

        }

        return fib(n - 2) + fib(n - 1)

    }

    let result = fib(30);

    console.log(number) //2692538 次 需要调函数的次数

    console.log(result) // 1346269

    // 优化后

    let number = 1;

    function createCache() {

        let cache = [];

        function fib(n) {

            number++;

            if (cache[n]) {

                return cache[n]

            }

            if (n == 1 || n == 0) {

                cache[n] = 1;

                return 1;

            }

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

            cache[n] = temp

            return temp;

        }

        return fib;

    }

    let fib = createCache();

    let result = fib(30);

    console.log(number) //60 需要调函数的次数

    console.log(result) // 1346269

```

**jquery 缓存分析**

- $('#test'),如果缓存中有这个值的话,就不会重新去document.getElementById,

```javascript

    function createCache(){ // 自己的版本

        var cache = {}; // cache对象中以键值对形式进行存储数据

        var index = []; // inde数组中该存储健,这个健是有顺序,可以方便我们做超出容量的处理

        return function(key,value){

            if(value){

                cache[key] = value;

                index.push(key);

                if(index>10){

                    delete cache[index.shift()]

                }

            }

            return cache[key]

        }

    }

    // 调用

    let cache = createCache();

    cache('name','hyl');

    console.log(cache('name'))

```

- jquery自身的版本

```javascript

    function createCache(){

        var keys = [];

        function cache(key,value){

            if(keys.push(key+' ')>50){

                delete cache[key+' ']

            }

            return (cache[key+' '] = value)

        }

        return cache;

    }

    let cache = createCache();

    cache('name','hyl');

    cache['name'+ ' ']

```

## 函数的调用方式

- 函数调用模式

- 方法调用模式

- 构造函数模式

- 上下文调用模式

```javascript

    function test(){

        console.log(this) // this指向window;

    }

    test();

    var obj = {

        test:function(){

            console.log(this)

        }

    }

    obj.test(); // this指向 obj

    function Person(){

        console.log(this)

    }

    new Person(); // this指向 Person对象

    test.call(obj,argument1,argument2);

    test.apply(obj,[argument1,argument2]);

    test.bind(obj,argument1,argument2)();

```

**构造函数调用模式特征**

- 构造函数的首字母需要大写

- 一般情况下和new关键字一起使用

- 构造函数中的this指定是new关键字创建出来的对象

- 默认的返回new创建出来的对象

- 构造函数的返回值:默认返回new创建出来的,如有返回,如返回值类型的数据(包括null)没有影响,若是对象模型,则返回这个对象,不会返回原来创建出来的对象。

```javascript

    // 构造函数

    function Person(){

        this.name = 'hyl'

    }

    var p = new Person();

    // 工厂模式的构造函数

    function Person(name,age){

        var o = {

            name:name,

            age:age,

            sayHello:function(){

            }

        }

    }

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

    // 寄生式构造函数

    function Person(){

        var o = {

            name:name,

            age:age,

            sayHello:function(){

            }

        }

        return o;

    }

    var p = new Person('张三',16);

```

## js上下文

**js中的上下文(执行环境)**

- 字面意思:上面的文字,下面的文字。

- call,apply,bind可以改变this的值,

- 函数.apply(对象,[argument1,argument2])

- 函数.call(对象,argument1,argument2);

- 函数.bind(对象,argument1,argument2).()

---

**call和 apply的区别**

1. 第一个参数都是把this修改为对象

2. 当函数需要参数的时候,那么apply是用数组的形式进行传递或者类数组,call是是用单个参数进行传递

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

call用于参数确定个数的时候使用

apply是用于新参不确定的时候使用

```javascript

    // 用apply求数组的最大值

    let array = [1,23,2];

    let result = Math.max.apply(null,array)

    console.log(result) //23

    //

    function foo(){

        [].join.apply(argument,['-'])

    }

    foo(2,1,3) // 2-1-3

```

知识点总结

## 闭包练习

    setTimeout的执行时机

        所有的主任务的代码执行完毕之后,去检查所有的setTimeout回调函数,如果到时间了就执行

    用闭包来解决回调函数在调用的时候访问的是全局的变量

    在闭包中创建一个变量,来单独存储当前的回调函数需要的数据,

    在调用的时候就会去使用这个单独的数据,而不是去访问全局变量

    注册点击事件的时候

    点击事件在触发的时候访问的是全局的变量

    在闭包中创建一个变量,来单独存储当前的事件处理函数需要的数据,

    在调用的时候就会去使用这个单独的数据,而不是去访问全局变量

## 闭包缓存

    缓存:将常用的数据进行存储,以提升性能

    硬件缓存

    浏览器缓存

    CDN

    内存型数据库

    如何用闭包实现缓存

    1、写一个闭包在闭包中创建一个对象,用来做缓存的存储对象

    2、在闭包中创建一个对象,用来做缓存的存储对象

    3、在闭包中创建一个数组,用来存储换中的键

    4、返回一个函数,这个函数需要两个参数,一个是key 一个是value

    5、在返回的函数中,判断传入的value是否为undefined

    6、如果为Undefined 则表示是获取值,就直接返回在第一步创建的缓存对象中指定的键对应的值

    7、如果不为Undefined 则表示是设置值

    8、在缓存对象中设置指定的key的值为value

    9、把key加入存储key的数组

    10、判断key数组是不是超出了缓存大小限制

    11、如果超出限制,删除数组第一个元素(使用shift),获取到删除的key

    12、使用删除的key删除缓存对象中存储的值(delete)

## 使用缓存解决斐波那契数列的性能问题

    就是将已经计算过的数字缓存进一个数组中,下次再来访问的时候,直接在数组中进行查找,如果找到直接使用,如果没有找到,计算后将数字存入数组,然后返回该数字

## 沙箱模式

    沙箱模式就是一个封闭的独立的环境

    沙箱模式的基本模型

    (function(){

        //变量定义

        //逻辑代码

        //如果需要,向window对象添加成员,以暴露接口

    })()

    第三方框架

    插件

    独立的组件

## 函数的四种调用模式

函数模式

    this--->window

方法模式

    this---->调用方法的对象

构造函数模式

    this----->new出来的对象

    工厂模式

    寄生模式

上下文模式

    this----->指定的是谁就是谁

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

    apply  函数.apply(对象,数组)

        都可以用来改变this的指向为参数的第一个值

        call是使用单独的每一个参数来传参

        apply是使用数组进行传参的,这个数组在调用的时候,会被意义拆解,当做函数的每一个采参数

    call在函数的形参个数确定的情况下使用

    apply在函数的形参个数不确定的情况下使用

上一篇下一篇

猜你喜欢

热点阅读