前端面试-基础入门面试

541 阅读9分钟

1.虚拟DOM是什么?

1.虚拟DOM是DOM的抽象,(感觉像一种概念吧,虚无缥缈,若即若离) 其本质是JavaScript对象,(本质???就是他是JS的儿子吧) 它相较于原生DOM更加轻量级。(也就是性能更好呗,比较优秀哈)

2.原型链又是什么?

2.原型链这三字拆开看 原型:是什么?prototype应该就是了 链:__proto__就是狗链了 这三字合在一起就发生化学反应了 原型prototype之上的JS本源一穷二白就是null,还好原型prototype还有个有出息小弟Object养他 不然早饿死了,穷归穷,但是胸怀鸿浩之志,终于黄天不负有心人,在原型prototype和他的小弟Object 的努力下做出了个大型中转站(大厂),并且都可以通过链子连接,中转站也就管理着下属String、Number、 Boolean、Array、Function、这5个下属小弟挣钱养大哥 小弟终究是小弟,啥都不多,大哥多,这不Object及时大大哥咯

3.new是什么鬼?

3.首先new是哪来的?肯定是妈生的!问题来了,孩子他妈是谁? new一个对象?貌似跟对象有点非同寻常的关系哈!中转站里出来的function就很多 到底有多少?辣莫多?多到不得不分类,没错就是这么多。 function的两大帮派面向对象(构造函数),面向过程(普通函数) 这两大帮派各有各的优势,面向对象帮派的人多属性多点子多,面向过程技多武器多 所以双剑合璧天下无敌,有点样子哈! 这时候江湖人都想借助他们帮派的力量称霸天下,于是点子多的面向对象帮规定了 new出一个分身就可以了,这样我们损失也不大,于是new诞生了!

// 实现一个new
var Dog = function(name) {
  this.name = name
}
Dog.prototype.bark = function() {
  console.log('wangwang')
}
Dog.prototype.sayName = function() {
  console.log('my name is ' + this.name)
}
let sanmao = new Dog('三毛')
sanmao.sayName()
sanmao.bark() 
// new 的作用
// 创建一个新对象obj
// 把obj的__proto__指向Dog.prototype 实现继承
// 执行构造函数,传递参数,改变this指向 Dog.call(obj, ...args)
// 最后把obj赋值给sanmao

4.promise是什么,怎么理解?

4.JS异步编程解决方案之一

(1)promise 对象初始化状态为 pending

(2) 当调用resolve(成功),会由pending => fulfilled

(3) 当调用reject(失败),会由pending => rejected

const request = url => { 
    return new Promise((resolve, reject) => 
{
        $.get(url, data => {
            resolve(data)
        });
    })
};

// 请求data1

request(url).then(data1 => {
    return request(data1.url);   
})
.then(data2 => {
    return request(data2.url);
})
.then(data3 => {
    console.log(data3);
})
.catch(err => throw new Error(err));


5.事件流是什么东西?

5.事件流描述的是从页面中接受事件的顺序。

三大阶段: 捕获阶段(由外向内),

目标阶段(目标阶段中谁先注册谁先执行),

冒泡阶段(由内向外)

(操作试试看就懂了哦!!!)

6.深拷贝,浅拷贝是什么?

6.浅拷贝只复制一层对象的属性

深拷贝是对对象以及对象的所有子对象进行拷贝

(详解的话需要讨论讨论复制路径问题)

7.call、apply,bind是什么?

7.我们知道 apply() 和 call() 都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部的 this 指向)。

然后,因为这两个方法会立即调用,所以为了弥补它们的缺失,还有个方法 bind(),它不会立即调用(可控)

8.BFC是什么?

8.block formatting context:块级格式上下文

BFC 最大的一个作用就是:在页面上有一个独立隔离容器,

容器内的元素 和 容器 外的元素布局不会相互影响。

9.解构是什么??

9打破数组结构,将其拆分成成更小部分的过程

异步解决方案之一

let details = {
    firstName:'Code',
    lastName:'Burst',
    age:22
}

const {firstName,age} = details;


console.log(firstName);      //Code 

console.log(age);       // 22



let list = [221,'Baker Street','London'];
let [houseNo,street] = list;
console.log(houseNo,street);// 221 , Baker Street

let list = [221,'Baker Street','London'];
let [houseNo,...street] = list;
console.log(houseNo,street);// 221   Baker Street,London

10.防抖和节流

10.防抖与节流函数是一种最常用的 高频触发优化方式,能对性能有较大的帮助。

防抖 (debounce): 将多次高频操作优化为只在最后一次执行,通常使用的场景是:用户输入, 只需再输入完成后做一次输入校验即可。

节流(throttle): 每隔一段时间后执行一次,也就是降低频率,将高频操作优化成低频操作,

通常使用场景: 滚动条事件 或者 resize 事件,通常每隔 100~500 ms执行一次即可。

无论什么问题最好都有自己独特的见解,才能让人眼前一亮

11.js闭包(道可道,非常道;名可名,非常名)

函数内部存在一个函数,创建闭包最常见方式,就是在一个函数内部创建另一个函数

即一个函数可以访问另一个函数的作用域

优点:可以缓存变量,下次访问直接打开 避免全局变量的污染

缺点: 回调地狱,造成内存泄漏如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,

在其它函数中创建函数是不明智的,因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。

匿名函数最大的用途是创建闭包,并且还可以构建命名空间,以减少全局变量的使用。

从而使用闭包模块化代码,减少全局变量的污染。

闭包只能取得包含函数中任何变量的最后一个值,这是因为闭包所保存的是整个变量对象,

而不是某个特殊的变量。

12.js垃圾回收机制?

GC算法Garbage Collection

引用计算法(不用就清除)、标记清除计算法(没标记的销毁)、复制算法(复制)

在javascript中,如果一个对象不再被引用,那么这个对象就会被垃圾回收机制回收;

如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。

13.面向对象的理解?

面向对象是一种编程思想使用抽象方式抽象出显示数据模型

在编程中增加了代码的维护性、复用性和灵活性,

三大特征:封装(公有方法私有化),继承(实现代码的复用),多态(运行才能确定的方法)

封装:把描述一个对象的属性和行为封装成一个类,把具体的业务逻辑功能实现封装成一个方法,

其次封装的意义还有效的保护属性通过访问修饰符私有化属性(成员变量),公有化方法。

继承:实现代码的复用,所有的子类所共有的行为和属性抽取为一个父类,所有的子类继承该类可具备父类的属性和行为,

继承具有单一性和传递性。

多态:程序中定义的引用类型变量所指向的具体类型和调用的具体方法在程序编译阶段无法确定,

而是在运行期才能确定该引用类型变量指向具体哪个对象而调用在哪个类中声明的方法。

14.JS继承是什么?

继承:子类可以使用父类的所有功能,并且对这些功能进行扩展。继承的过程,就是从一般到特殊的过程。

缺点:使用类继承的方法,如果父类的构造函数中有【引用类型】,就会在子类中被所有实例共用

,因此一个子类的实例如果更改了这个引用类型,就会影响到其他子类的实例。

正式因为有了上述的缺点,才有了构造函数继承,构造函数继承的核心思想就是SuperClass.call(this,id),

直接改变this的指向,使通过this创建的属性和方法在子类中复制一份,因为是单独复制的,

所以各个实例化的子类互不影响。但是会造成内存浪费的问题

15.get\post的区别

Get 请求能缓存,Post 不能

Post 相对 Get 安全一点点,因为Get 请求都包含在 URL 里,且会被浏览器保存历史纪录,

Post 不会,但是在抓包的情况下都是一样的。

Post 可以通过 request body来传输比 Get 更多的数据,Get 没有这个技术

URL有长度限制,会影响 Get 请求,但是这个长度限制是浏览器规定的,不是 RFC 规定的

Post 支持更多的编码类型且不对数据类型限制

16.ES6新特性(提供的语法糖使复杂的操作变得简单)

①箭头函数 -- -- this指向当前对象

②在 ES6 中类(Classes)其实是原型继承的语法糖(子类不但可以继承父类,还可以拥有自己的方法)

③增强了对象字面量

④字符串插值``(。就是反引号)

⑤解构 Destructuring可在参数位置使用(解构对象json数据的解构)

⑥参数默认值

⑦扩展运算符...

⑧For..of迭代器的新类型,可以替代for..in,它返回的是值而不是keys。

⑨迭代器是一个比数组更动态的类型。

⑩生成器创建迭代器,并且比迭代器更具动态性。他们不必以相同的方式跟踪状态 并不支持 done 的概念

17.js事件委托

元素响应事件(click、keydown......)的函数委托到另一个元素;

优点

1.提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。

2.动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

举个例子,比如一个宿舍的同学同时快递到了,一种方法就是他们都傻傻地一个个去领取,还有一种方法就是把这件事情委托给宿舍长

,让一个人出去拿好所有快递,然后再根据收件人一一分发给每个宿舍同学;

在这里,取快递就是一个事3件,每个同学指的是需要响应事件的 DOM

元素,而出去统一领取快递的宿舍长就是代理的元素,所以真正绑定事件的是这个元素,

按照收件人分发快递的过程就是在事件执行中,需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

18.阻止冒泡(单词拼读)

w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true

javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

取消默认事件

w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;

19.setTimeout、Promise、Async/Await 的区别(看你们自己的理解)