前端基础题

74 阅读6分钟
  1. 说说你对闭包的理解,在什么场景使用?

答:当在函数内部定义了其他函数,就创建了闭包。闭包有权访问包含函数内部的所有变量,应用场景:1、模拟私有变量和方法,进一步来说可以是模拟模块化;目前常用的AMD,CommonJS等模块规范,都是利用闭包的思想;2、柯里化函数或者偏函数;利用闭包可以把参数分成多次传参。

 

  1. 请说出水平垂直居中的方法

答:方法一 :父元素设置:grid栅格布局,align-content: center;justify-content: center; 居中展示

方法二: 绝对定位方法:绝对定位下top left right bottom 都设置0 ,magin:auto;

方法三:table-cell实现文字内容水平垂直居中 , 设置好之后margin属性失效

方法四:父元素设置:flex布局,子元素上使用:margin:auto; 居中展示

方法五 :父元素设置:grid栅格布局,子元素 align-self: center; justify-self: center; 居中展示

方法六: 绝对定位方法:确定当前div的宽度和高度,采用margin值为当前div宽度高度一半的负值

方法七:绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;)

 

  1. 你如何理解 Promise?使用过Promise.all吗?如何实现Promise.all?

答:Promise.all 的返回值是一个新的 Promise 实例。

Promise.all 接受一个可遍历的数据容器,容器中每个元素都应是 Promise 实例。咱就是说,假设这个容器就是数组。

数组中每个 Promise 实例都成功时(由pendding状态转化为fulfilled状态),Promise.all 才成功。这些 Promise 实例所有的 resolve 结果会按照原来的顺序集合在一个数组中作为 Promise.all 的 resolve 的结果。

数组中只要有一个 Promise 实例失败(由pendding状态转化为rejected状态),Promise.all 就失败。Promise.all 的 .catch() 会捕获到这个 reject。

 

js实现Promise.all

 

 

4. js中的继承

答:1原型链继承子类构造函数.prototype = 父类的实例; 子类构造函数.prototype.constructor = 子类构造函数

特点:1.js继承是把父类的原型放到子类的原型链上,实例想要调用这些方法,其实是基于__proto__原型链的机制查找完成的2.子类可以重写父类上的属性和方法3.父类中私有的或者公有的属性和方法, 最后都会变成子类公有的属性和方法

 

2 call继承

在子类构造函数中把父类构造函数当作普通的函数执行, 并且通过call方法把父类构造函数中的this替换成子类的实例(this), 这样相当于给子类实例设置了私有的属性和方法

特点:

1.只能继承父类私有的属性和方法(因为只是把父类构造函数当作普通函数执行了一次,跟父类的原型上的方法和属性没有任何关系)

2.父类的私有的属性和方法 都会变成子类私有的属性和方法

 

3组合继承

结合原型链继承和借用构造函数继承组合起来实现的继承

特点:

(call继承)

1.子类实例可以使用父类私有的属性和方法

2.父类私有的属性和方法都会变成子类实例私有的属性和方法(原型链继承)

3.子类实例可以通过原型链访问和使用父类公有的属性和方法

4.子类的原型链上会存在一份多余的父类的私有属性和方法

 

4寄生组合继承

结合原型链继承和call继承的方法,同时自己创建一个对象,并且让这个对象的原型指向父类构造函数的prototype.实现寄生组合继承

特点:

1.最完美的js继承解决方案

2.父类私有的属性和方法,成为子类实例私有的属性和方法

3.父类公有的属性和方法,成为子类实例公有的属性和方法

 

5 ES6中的Class类和继承

ES6 class继承

通过extends来实现继承

class 子类 extends 父类

在constructor中要使用super()

特点

1.父类私有的属性和方法 会变成子类私有的属性和方法

2.父类公有属性和方法 会变成子类公有的属性和方法

 

 

5.vue组件中的data为什么是函数

答:如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据)

Object是引用数据类型,里面保存的是内存地址,单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。

 

5. 你是如何使用 vuex 的?如何处理异步情况

vuex分为五个大块

 

state: 统一定义公共数据(类似于data(){return {a:1, b:2,xxxxxx}})

 

mutations : 使用它来修改数据(类似于methods)

 

getters: 类似于computed(计算属性,对现有的状态进行计算得到新的数据-------派生 )

 

actions: 发起异步请求

 

modules: 模块拆分

 

如何使用vuex

1 首先 安装vuex 2 然后再src新建一个store文件夹并且新建一个js文件,这样做是为了更好管理项目 3 然后再index开始设置一些公用的值和方法。引入vue和vuex,通过Vuex.Store可以创建一个Store对象,这个对象包含有state,mutations等熟悉,state中的字段就是在各个组件中要使用的值。这些字段是自己添加的,mutations则是用来存放一些方法的,这些方法可以修改state中的字段值。方法名也是自定义的,第一个参数是state,这样可以保证拿到state,从而通过state修改其中的字段值。

4、然后要在main.js中引入这个index.js文件并且绑定到vue实例上面,这样每个实例都可以使用刚才创建的Store里面的数据。然后组件

5、然后再add组件中调用方法,通过commit可以调用mutations中的方法就可以来修改state中字段的值。

1、在vuex直接调用actions可以处理异步请求

 

2. 使用modules中的actions(namespaced:true)

 

 

6. 实现一个复选框(多选功能)

初识react\复选框.html

 

7. 防抖概念?防抖函数的实现?

答:防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

 

 

8. 对于自己的职业发展是否有短期或长期规划

短期:更注重技术提升,希望可以做更多的项目,提升自己的实践能力,熟练掌握前端技术,

长期:向全栈和架构发展,技术是一方面,但对于一个希望可以长期在这个行业深耕的程序员,更应该注重业务逻辑的提升与熟悉。

 

9. 毕业院校、学历及专业

西安外国语大学 本科 国际政治 自学前端开发1年 自学能力较强