1.同步和异步
详细~
文章总结:
setTimeout(fn,ms)这个函数,是经过指定时间后,把要执行的任务加入到Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间太久,那么只能等着,导致真正的延迟时间远远大于ms。
setInterval会每隔指定的时间将注册的函数置入Event Queue,如果前面的任务耗时太久,那么同样需要等待
setInterval为了避免代码运行好几次中间没有间隔,当且仅当没有该定时器的如何代码实例时,才会将定时器代码添加到队列中,但这样可能会引起:
- 某些间隔会被跳过
- 多个定时器的代码执行时间可能会比预期小。
setTimeout(function(){
//do something
setTimeout(arguments.callee,interval);
},interval)
上面实现了递归调用,这样做的好处是:在前一个定时器代码执行完成之前,不会向队列插入新的定时代码,确保不会有任何的缺失间隔。而且,它保证在下一次定时器代码执行之前,至少要等待指定的时间间隔。
讲道理,我没搞清楚,怎么就递归了
异步中的宏任务和微任务
- macro-task(宏任务):包括整体代码script,setTimeout,setInterval
- micro-task(微任务):Promise,process.nextTick
分别把事件放入宏任务和微任务,这是一次循环,然后执行微任务,在开始下一次循环
2.闭包
关于闭包
理解起来还是觉得怪怪的
- 解决作用域的问题,让函数内的变量可以被外部访问
- 在函数a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量,造成内存浪费
- 函数式编程
3.如何判断一个变量的类型?是Array类型?是Number类型?
-
typeof
- 对于基本类型,除 null 以外,均可以返回正确的结果。
- 对于引用类型,除 function 以外,一律返回 object 类型。
- 对于 null ,返回 object 类型。
- 对于 function 返回 function 类型。
-
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原型
-
constructor
- null 和 undefined 是无效的对象,因此是不会有 constructor 存在的,这两种类型的数据需要通过其他方式来判断。
- 函数的 constructor 是不稳定的,这个主要体现在自定义对象上,当开发者重写 prototype 后,原有的 constructor 引用会丢失,constructor 会默认为 Object
-
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.跨域
- jsonp
需要后端配合,在后端会设置回调函数名、返回的数据等
-
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:
在页面 http://example.com/b.html 中也设置document.domain,而且这也是必须的,虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值: -
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 -
window.postMessage
- 调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 * 。
- 需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。
-
CORS
分为简单请求和非简单请求
需要后端设置:
Access-Control..................
6.实现一个双向数据绑定
-
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; };
- 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
注意:
- 把事件绑定在ul上,用e.target.nodeName.toLowerCase==='li'判定节点是不是li
- 嵌套时,可用循环,用while找到parentNode
- var ev = ev||window.event是事件的兼容写法
var target = ev.target||ev.srcElement是事件源的兼容写法
8. async/await
promise实例
promise存在的问题
- promise一旦执行,无法中途取消
- promise的错误无法在外部被捕捉到,只能在内部进行预判处理
- promise的内如何执行,监测起来很难
带 async 关键字的函数,它使得你的函数的返回值必定是 promise 对象;await等的是右侧「表达式」的结果(遇到await会让出线程,但await后面那个紧跟着的那个函数不会被阻塞)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。