牛客网编程初学者入门训练题解JavaScript版本

• 前端面试试题
• 1. H5新功能特性有哪些？
• 2. CSS3新特性有哪些？
• 3. 标准盒模型和IE盒模型的区别？
• 4. display:none和visibility:hidden的区别？
• 5. 定位的属性说一下？
• 6. CSS权重值说一下？
• 7. box-sizing的属性值？
• 8. 有一个标签设置float，标签下的文字会以什么样的形式呈现？
• 9. em rem的区别？ root
• 10. 原型链？var p = new Person(); 这个new做了几件事情？
• 11. 值引用和地址引用？
• 12. 闭包？会造成什么问题？如何避免？（销毁闭包）
• 13. vue的双向绑定原理？
• 14.HTTP状态码：
• 15.页面布局有哪几种？
• 16. DOM的事件类型？
• 17. React生命周期？
• 18. bind, apply, call区别？都是用来改变函数的this对象的指向的。
• 19. http缓存？（expires, etag, *** control, pragma）
• 20. 设计模式
• 21. 继承

前端面试试题

1. H5新功能特性有哪些？

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

2. CSS3新特性有哪些？

@Font-face 特性:Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。
圆角:border-radius: 15px;
CSS3:的渐变效果
CSS3制作特效:Transition 对象变换时的过渡效果+Transforms 2D转换效果

3. 标准盒模型和IE盒模型的区别？

w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分
IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border

4. display:none和visibility:hidden的区别？

dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失。
visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置。

5. 定位的属性说一下？

absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。
relative:生成相对定位的元素，相对于其正常位置进行定位。
inherit:规定应该从父元素继承 position 属性的值。
static:默认值。没有定位，元素出现在正常的流中

6. CSS权重值说一下？

!important，加在样式属性值后，权重值为 10000
内联样式，如：style=””，权重值为1000
ID选择器，如：#content，权重值为100
类，伪类和属性选择器，如： content、:hover 权重值为10
标签选择器和伪元素选择器，如：div、p、:before 权重值为1
通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

7. box-sizing的属性值？

box-sizing 是用于告诉浏览器如何计算一个元素是总宽度和总高度
标准盒模型 box-sizing: content-box
content-box:
width = content width;
height = content height
IE盒模型 box-sizing: border-box
border-box:
width = border + padding + content width
heigth = border + padding + content heigth

8. 有一个标签设置float，标签下的文字会以什么样的形式呈现？

（文字围绕标签包裹住，浮动标签属于半脱离文本流）

9. em rem的区别？ root

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em相对于父元素，rem相对于根元素。
em:子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
rem:rem是全部的长度都相对于根元素，根元素是谁？元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

10. 原型链？var p = new Person(); 这个new做了几件事情？

js的显式原型prototype是函数的内置属性,隐式原型__proto__是对象的内置属性
(1) var p={}; 也就是说，初始化一个对象p
(2) p.proto = Person.prototype;
(3) Person.call§; 也就是说构造p，也可以称之为初始化p

11. 值引用和地址引用？

var obj1= {name: ‘A’};
var obj2 = obj1;
obj2.name = ‘B’
console.log(obj1.name);
function f(obj) {obj.name = ‘C’;}
f(obj1);
console.log(obj2.name);
var a=3;
function fn(a){a=a+1;}
console.log(a);
//B C 3

12. 闭包？会造成什么问题？如何避免？（销毁闭包）

闭包：能够访问其他函数内部变量的函数
解决了：由于变量的作用域的原因-----（函数内部能读取全局变量，函数外部无法读取函数内部的变量【局部变量】），
为了在函数外部读取局部变量，所以就有了闭包。
闭包的作用：1.访问其他函数内部变量
2.保护变量不被内存回收机制回收
3.避免全局变量被污染 方便调用上下文的局部变量 加强封装性
闭包的缺点：闭包长期占用内存，内存消耗很大，可能导致内存泄露，
内存泄露的根本原因就是你的代码中分配了一些‘顽固的’内存，浏览器无法进行回收
解决办法：1.在退出函数之前，将不使用的局部变量全部删除。可以使变量赋值为null;
2.避免变量的循环赋值和引用。

13. vue的双向绑定原理？

（Object.defineProperty函数实现的）
1.对象有两种属性：（1）数据属性（变量），就是我们经常使用的属性（2）访问器属性（get/set)，也称存取器属性（存取器属性就是一组获取和设置值的函数）
get对应的方法称为getter，负责获取值，它不带任何参数。set对应的方法为setter，负责设置值，在它的函数体中，一切的return都是无效的。
2.定义对象可以使用构造函数或字面量的形式：obj.naame =’'添加属性,当然还可以使用Object.defineProperty定义新属性或修改原有的属性；
Object.defineProperty(obj, prop, descriptor)；obj：必需。目标对象；prop：必需。需定义或修改的属性的名字；descriptor：必需。目标属性所拥有的特性；
返回值：传入函数的对象，即第一个参数obj；
3.Vue是采用数据劫持结合发布/订阅模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。
4.数据变化会同步更新视图 （热更新），我们使用Vue的数据双向绑定一般是操纵data来更新view，
视图变化也可以更新数据，通过事件监听实现，不用再去操作DOM对象，更多精力投入到业务逻辑上

14.HTTP状态码：

302（临时重定向），301（永久重定向），304（缓存）
403（验证访问），404（找不到页面）
500（服务器报错），503（服务禁止访问）

15.页面布局有哪几种？

（静态布局，响应式布局，流式布局，自适应布局，flex布局）

16. DOM的事件类型？

（事件捕获，事件冒泡）

17. React生命周期？

初始化阶段：
getDefaultProps:获取实例的默认属性
getInitialState:获取每个实例的初始化状态
componentWillMount：组件即将被装载、渲染到页面上（在整个生命周期中只会触发一次）
render:组件在这里生成虚拟的 DOM 节点
componentDidMount:组件真正在被装载之后（在整个生命周期中只会触发一次）
运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）
componentWillUpdate:组件即将更新不能修改属性和状态
render:组件重新描绘
componentDidUpdate:组件已经更新
销毁阶段：
componentWillUnmount:组件即将销毁

18. bind, apply, call区别？都是用来改变函数的this对象的指向的。

call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以
call以参数列表的形式传入，而apply以参数数组的形式传入。

19. http缓存？（expires, etag, *** control, pragma）

http缓存主要针如css，js，图片等更新频率不大的静态文件。
1.Cache-Control 请求/响应头，缓存控制字段，可以说是控制http缓存的最高指令
2.Expires 响应头，代表资源过期时间，由服务器返回提供
3.Etag 响应头，资源标识，由服务器告诉浏览器。
4.if-None-Match 请求头，缓存资源标识，由浏览器告诉服务器(其实就是上次服务器给的Etag)，和Etag是一对，它两会进行对比。

20. 设计模式

1.发布订阅者模式（观察者模式）(就是一个发布消息，一个监听消息，当有消息接收时处理消息。)
2.代理模式(代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作.)

21. 继承

1 原型链继承:让子类的原型指向父类的实例
ChildType.prototype = new ParentType()
// 所有涉及到原型链继承的继承方式都要修改子类构造函数的指向，否则子类实例的构造函数会指向PerentType。
ChildType.prototype.constructor =ChildType;
优点：父类方法可以复用
缺点：父类的引用属性会被所有子类实例共享,子类构建实例时不能向父类传递参数
2.构造函数继承:将父类构造函数的内容复制给了子类的构造函数。这是所有继承中唯一一个不涉及到prototype的继承。
ParentType.call(ChildType);
优点：和原型链继承完全反过来。父类的引用属性不会被共享,子类构建实例时可以向父类传递参数
缺点：父类的方法不能复用，子类实例的方法每次都是单独创建的。
3.组合继承:原型式继承和构造函数继承的组合，兼具了二者的优点。
function ParentType() {
this.name = ‘parent’;
this.arr = [1, 2, 3];
}
ParentType.prototype.say = function() { console.log(‘this is parent’) }
function ChildType() {
ParentType.call(this)
// 第二次调用ParentType
}
ChildType.prototype = new ParentType() // 第一次调用ParentType
优点：父类的方法可以被复用,父类的引用属性不会被共享,子类构建实例时可以向父类传递参数
4.ES6 Class extends:ES6先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
class A {}
class B extends A {
constructor() {
super();
}
}