前端学习

一、css

1、什么是css盒模型？

html页面上的所有元素可以看成一个盒子

盒模型的类型：

    标准盒模型：margin+border+padding+content

    IE盒模型：margin+context(border+padding+content)

控制盒模型的模式：

    box-sizing：content-box（标准盒模型）/ border-box（IE盒模型）

2、css选择器的优先级？

css的特性有：继承性、层叠性、优先级

优先级：！important >行内样式 > id选择器 > 类（class选择器）> 标签选择器 > 全局选择器（*）

3、隐藏元素的方法有哪些？

display：none ：元素在页面上消失，不占据空间

opacity：0 设置元素的透明度为0，元素不可见，占据空间

visibility：hidden 让元素消失，占据空间

position：absolute 从当前位置踢出

clip-path： 剪切

4、px和rem的区别？

px是像素，是绝对单位长度

rem是相对单位，相对于html根节点的font-size的值

5、重排（回流）和重绘有什么区别？

重排： 布局引擎会根据所有样式计算出盒模型在页面上的位置和大小

重绘：计算出盒模型在页上的位置和大小后，浏览器根据每个盒模型的特性进行绘制

重排一定会重绘

怎么触发重排和重绘？

删除、添加DOM元素，js修改DOM元素的位置和大小，修改内容，会触发重排。

修改颜色、文本、阴影会触发重绘

6、让一个元素水平垂直居中的方法有哪些？

定位+margin

定位+transform

flex布局

grid布局

table布局

7、css的哪些属性可以继承？哪些不可以继承？

css三大特性：继承、层叠、优先级

子元素可以继承父类元素的样式

字体的一些属性可以被继承：font
文本的一些属性：text
元素的可见性：visibility：hidden
表格布局的属性：border-spacing
列表的属性：list-style
页面的样式属性：page
声音的样式属性

8、有没有用过预处理器？

预处理语言增加了变量、函数、混入等强大的功能

SASS、LESS

SASS 定义变量 @

二、js

1、js由哪三部分组成？

ECMAScript：js的核心，描述了语言的基础语法，比如var，for，数据类型（数组，字符串）

文档对象模型（DOM）：DOM把整个HTML页面规划为元素构成的文档

浏览器对象模型（BOM）：对浏览器窗口进行访问和操作

2、js有哪些内置对象？

String、Boolean、Number、Array、Object、Function、Math、Date、RegExp…

Math

    abs（绝对值）、sqrt（开平方）、max（最大值）、min（最小值）等

Date

    new  Date（）实例化一个对象   

    getFullYear（）获取当年、getDate（）获取当天日期、getDay（）获取星期几（周日0 到 周六6）

Array

String

    concat（）合并两个或多个数组，并返回一个新数组，原数组不会被修改

    length 获取数组的长度或者字符串的长度（即包含的字符个数）

    slice（）返回一个新的数组或字符串，包含从开始到结束（不包括结束）选择的元素。它不会修改原数组或字符串，而是返回一个子集。

3、操作数组的方法 Array

push（）、pop（）、sort（）、splice（）、unshift（）、shift、reverse（）、concat（）、join（）、map（）、filter（）、ervery（）、some（）、reduce（）、isArray（）、findIndex（）

哪些方法会改变数组？

push（）、pop（）、unshift（）、shift、sort（）、splice（）、reverse（）

具体的JavaScript数组理解

4、对数据类型的检测方式有哪些？

typeof（）

instanceof（）

constructor（）

Object.prototype.toString.call（）

//举例代码
<script>
		// typepf（）   对于基本数据类型可用，引用数据类型不可用
		console.log(typeof 777) //number
		console.log(typeof [1,2,2])
		console.log(typeof 23.34)
		
		// instanceof（）只能判断引用，不能判断基本
		console.log([] instanceof Array) 
		console.log('anc' instanceof String)
		
		// constructor（） 基本上对于基本数据类型和引用数据类型可判断，特殊：声明一个构造函数，并把它的原型指向了Array
		console.log(('abc').constructor === String)
		
		// Object.prototype.toString.call（）对于基本数据类型和引用数据类型可判断
		var opt = Object.prototype.toString
		console.log(opt.call(2))
		console.log(opt.call(false))
		console.log(opt.call('aaa'))
		console.log(opt.call([]))
		console.log(opt.call({}))
	</script>


​

5、什么是闭包，闭包有什么特点？

闭包：函数嵌套函数，内部函数被外部函数返回并保存下来时，就会产生闭包。

//产生闭包
	function fn(a){
		return function(){
			console.log(a)
		}
	}
	var b = fn("abcd")
	b()  //运行结果abcd

特点： 可以重复利用变量，并且这个变量不会污染全局的一种机制；
这个变量是一直保存在内存中，不会被垃圾回收机制回收

缺点：闭包比较多的时候，会消耗内存，导致页面的性能下降，
在IE浏览器中才会导致内存泄露
解决方法：手动删除变量，赋值为空

使用场景：防抖、节流、函数嵌套函数避免全局污染的时候

6、前端的内存泄露怎么理解？

js里已经分配内存地址的对象，但是由于长时间没有释放或者没办法清除，造成长期占用内存的现象，会让内存资大幅浪费，最终导致运行速度慢，甚至崩溃的情况。

js里的垃圾回收机制不能正常释放和回收，主要出现在IE浏览器

有哪些会导致内存泄露的因素：
1、一些为声明直接赋值的变量
2、一些未清空的定时器
3、过度的闭包
4、一些引用元素没有被清除

7、事件委托（事件代理）是什么？

原理：利用事件冒泡的机制来实现，就是把子元素的事件绑定到父元素的身上，如果子元素阻止了事件冒泡，委托不成立

阻止事件冒泡：event.stopPropagation()
addEventListener(‘click’,函数名,true/false) 默认是false（事件冒泡），true（事件捕获）

好处：提高性能，减少事件的绑定，也减少内存的占用

8、基本数据类型和引用数据类型的区别？

基本数据类型：String、Number、Boolean、undefined、null
基本数据类型保存在栈内存中，保存的是具体的值

引用数据类型（）：Object、Function、Array
保存在堆内存中,声明一个引用类型的变量，保存的是引用类型数据的地址
声明两个引用类型，同时指向一个地址，修改其中一个，另外一个也会改变

	const obj ={
		name:'张三',
		age:18
	}
	const obj1 = obj 
	obj1.name = '李四'
	console.log(obj) //结果 李四 ，18
	console.log(obj1) //结果 李四 ，18

9、说一下原型链

原型是什么：原型就是一个普通对象，是为构造函数实例共享属性和方法，所有中引用的原型都是同一个对象

	function Person(){
		this.say = function(){
			console.log('sd')
		}
	}
	var p1 = new Person()
	var p2 = new Person()
	
	p1.say();
	p2.say();
	//结果sd sd

使用prototype可以把方法挂在原型上，内存只保存一份
_ proto _可以理解为指针，实例对象中的属性，指向了构造函数的原型

10、new操作符具体做了什么？

	1、先创建了一个空对象
	2、把空对象和构造函数通过原型链进行链接
	3、把构造函数的this绑定到新的空对象身上
	4、根据构建函数返回的数据类型判断，如果是值类型，则返回对象，如果是引用类型，就要返回这个引用类型

	 function newFun(Fun,...args){
		 // 1、先创建了一个空对象
		 let newObj = {}
		 // 2、把空对象和构造函数通过原型链进行链接
		 newObj.__proto__ = Fun.prototype
		 // 3、把构造函数的this绑定到新的空对象身上
		 const result = Fun.apply(newObj,args)
		 // 4、根据构建函数返回的数据类型判断，如果是值类型，则返回对象，如果是引用类型，就要返回这个引用类型
		 return result instanceof Object ? result : newObj
	 }
	 
		 
	 function Person(name){
		 this.name = name
	 }
	 Person.prototype.say = function(){
		 console.log("12233")
	 }
	 const  p1 = newFun(Person,'李四')
	 p1.say() //12233
	 console.log(p1) //返回一个对象

11、JS是如何实现继承的？

js实现继承的方式具体代码实现
1、通过原型链继承

让一个构造函数的原型是另一个类型的实例，那么这个构造函数new出来的实例就具有该实例的属性

2、借用构造函数继承

在子类构造函数的内部调用父类的构造函数，使用apply（）或call（）方法将父对象的构造函数绑定到子对象上

3、组合式继承

将原型链和借用构造函数来实现对实例属性的继承.这样,既通过在原型上定义方法实现了函数复用, 又保证在每个实例都有自己的属性

4、ES6的class类继承

子类必须在constructor方法中调用super方法，因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

12、JS的设计原理是什么？

JS引擎
运行上下文：
调用栈：单线程
事件循环
回调

13、JS中关于this指向问题

1、全局中的this指向,指向的是window
2、全局作用域或普通函数中的this,指向全局window
3、this永远指向最后调用它的那个对象，在不是箭头函数的情况下
4、new关键词改变了this的指向
5、apply，call，bind可以改变this指向，不是箭头函数
6、箭头函数中的this，它的指向在定义时就已经确定了，箭头函数它没有this，要看外层是否有函数，有就是外层函数的this，没有就是window
7、匿名函数中的this，永远指向了window，匿名函数的执行环境具有全局性，因此this指向window

14、script标签里有async和defer有什么区别？

当没有async和defer这两个属性的时候，浏览器会立即加载并执行指定的脚本
有async时，加载和渲染后面元素的过程将和script的加载和执行并行进行（异步）（不会保证脚本的顺序，可能会出现空白页面）
有defer时，加载和渲染后面元素的过程将和script的加载并行进行（异步），但是执行时间要等所有元素解析完成之后才会执行（会保证脚本的顺序）

15、setTimeout最小执行时间是多少？

HTML5规定的内容：
setTimeout最小执行时间是4ms

setTimeout嵌套大于5个以上会自动有4个4ms的延时，js不能精确计时

setInterval最小执行时间是10ms，小于10ms会被跳转为10ms

浏览器不同、参照规则不同，时间可能会不同

16、ES6和ES5有什么区别

JS 组成：ECMAScript、DOM 、BOM
ES5（ECMAScript5）：2009年的修订
ES6（ECMAScript6）：2015年的修订，是JS下一个版本标准，用来解决ES5的不足

17、ES6的新特性？

1、新增块级作用域（let、const）
2、新增了定义类的语法糖（class）
3、新增了一种基本数据类型（symbol）
4、新增了解构赋值
5、新增了函数参数的默认值
6、给数组新增了API
7、对象和数组新增了扩展运算符
8、Promise
9、新增了模块化（import、export）
10、新增了set和map数据结构
11、新增了generator
12、新增了箭头函数