10

1.同步和异步

详细~
文章总结:

setTimeout(fn,ms)这个函数,是经过指定时间后,把要执行的任务加入到Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间太久,那么只能等着,导致真正的延迟时间远远大于ms。
setInterval会每隔指定的时间将注册的函数置入Event Queue,如果前面的任务耗时太久,那么同样需要等待

setInterval为了避免代码运行好几次中间没有间隔,当且仅当没有该定时器的如何代码实例时,才会将定时器代码添加到队列中,但这样可能会引起:

  1. 某些间隔会被跳过
  2. 多个定时器的代码执行时间可能会比预期小。
setTimeout(function(){

    //do something

    setTimeout(arguments.callee,interval);
},interval)

上面实现了递归调用,这样做的好处是:在前一个定时器代码执行完成之前,不会向队列插入新的定时代码,确保不会有任何的缺失间隔。而且,它保证在下一次定时器代码执行之前,至少要等待指定的时间间隔。
讲道理,我没搞清楚,怎么就递归了
异步中的宏任务和微任务

  1. macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  2. micro-task(微任务):Promise,process.nextTick

分别把事件放入宏任务和微任务,这是一次循环,然后执行微任务,在开始下一次循环

2.闭包

关于闭包
理解起来还是觉得怪怪的

  1. 解决作用域的问题,让函数内的变量可以被外部访问
  2. 在函数a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量,造成内存浪费
  3. 函数式编程

3.如何判断一个变量的类型?是Array类型?是Number类型?

四种方法

  1. typeof

    • 对于基本类型,除 null 以外,均可以返回正确的结果。
    • 对于引用类型,除 function 以外,一律返回 object 类型。
    • 对于 null ,返回 object 类型。
    • 对于 function 返回 function 类型。
  2. instanceof

    在原型链上查找
    //假设instanceof运算符左边是L,右边是R
    L instanceof R 
    //instanceof运算时,通过判断L的原型链上是否存在R.prototype
    L.__proto__.__proto__ ..... === R.prototype ?
    //如果存在返回true 否则返回false
    注意:instanceof运算时会递归查找L的原型链,即
    L.__proto__.__proto__.__proto__.__proto__...
    直到找到了或者找到顶层为止

    instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型

  3. constructor

    1. null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。
    2. 函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object
  4. toString

    toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]] 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。
    
    对于 Object 对象,直接调用 toString()  就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。
    Object.prototype.toString.call(Symbol()); //[object Symbol]
    Object.prototype.toString.call(undefined) ; // [object Undefined]
    Object.prototype.toString.call(new Error()) ; // [object Error]
    

5.跨域

前四种方法 CORS

  1. jsonp
    josnp
    需要后端配合,在后端会设置回调函数名、返回的数据等
    jsonp后端
  2. documnet.domain

    • 只能把document.domain设置成自身或更高一级的父域,且主域必须相同。例如:a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个,但是不可以设成 c.a.b.example.com,因为这是当前域的子域,也不可以设成baidu.com,因为主域已经不相同了。就是只能子域获取父域
    • 如果想要获取同级中其他页面的数据,需要嵌入iframe,且把两个页面的document.domain设成父域

    在页面 http://www.example.com/a.html 中设置document.domain:
    a中
    在页面 http://example.com/b.html 中也设置document.domain,而且这也是必须的,虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值:
    图片描述

  3. window.name

    在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。
    注意,window.name的值只能是字符串的形式,这个字符串的大小最大能允许2M左右甚至更大的一个容量,具体取决于不同的浏览器,但一般是够用了。

    假如www.baidu.com/a.html获取不同域的www.baidu.com/data.html页面中的值
    data.html
    图片描述
    a.html
    图片描述

  4. window.postMessage

    • 调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。
    • 需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。
  5. CORS

    分为简单请求和非简单请求
    需要后端设置:
    Access-Control..................

6.实现一个双向数据绑定

点我

  1. view到model
    比如input输入框,监听input输入框的内容是否发生了变化,oninput事件

    // view到model
        var input = document.getElementById("a"),
        title = document.getElementById("title"); //title是文字展示区域的id
        input.oninput = function (e) {
            title.innerHTML = this.value;
        };
  2. model到view
    使用defineProperty的get和set
// model到view
    Object.defineProperty(input, 'val', { //这里必须定义一个新的属性名称,不可以用value,否则会报错。
        get: function () {
            return this.value;
        },
        set: function (val) {
            this.value = val;
            title.innerHTML = val;
        }
    });

7. 事件委托

事件委托 target和currentTarget
假设事件绑定在ul上,ul有子元素li

e.currentTarget始终指向添加监听事件的那个对象,假如是ul,而e.target指向触发事件监听的那个对象,是li

注意:

  1. 把事件绑定在ul上,用e.target.nodeName.toLowerCase==='li'判定节点是不是li
  2. 嵌套时,可用循环,用while找到parentNode
  3. var ev = ev||window.event是事件的兼容写法
    var target = ev.target||ev.srcElement是事件源的兼容写法

8. async/await

promise实例
promise存在的问题

  1. promise一旦执行,无法中途取消
  2. promise的错误无法在外部被捕捉到,只能在内部进行预判处理
  3. promise的内如何执行,监测起来很难

带 async 关键字的函数,它使得你的函数的返回值必定是 promise 对象;await等的是右侧「表达式」的结果(遇到await会让出线程,但await后面那个紧跟着的那个函数不会被阻塞)


温茶儿
306 声望13 粉丝

正经茶艺师,佛系程序媛