前端面试常考知识点---js

最新推荐文章于 2022-03-31 16:24:50 发布

weixin_33859665

最新推荐文章于 2022-03-31 16:24:50 发布

阅读量156

点赞数

文章标签：面试前端后端 ViewUI

原文链接：https://segmentfault.com/a/1190000014665986

版权

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
1. null 和 undefined 是无效的对象，因此是不会有 constructor 存在的，这两种类型的数据需要通过其他方式来判断。
2. 函数的 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.跨域

前四种方法 CORS

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是事件源的兼容写法