前端笔记

1.Object.assign复制对象，
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。

var obj = new Object();
		Object.defineProperty(obj,'name',{
			value: { "s": 123 }
		});// 第三个参数必须为一个对象
		console.log(obj.name)
		console.log(Object.keys(obj))// {}
		var s = {
			a : "1",
			v : "2"
		}
		console.log(Object.keys(s))// ["a","v"]

Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
2.webpack3使用步骤
(1)安装webpack3
(2)npm init 因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
webpack4的使用步骤
默认：入口路径为：/src/index.js，打包输出路径：/dist/main.js
未传–mode参数时，默认是-mode production，会进行压缩混淆。传入–mode development指定为开发环境打包。
要处理css用css-loader和style-loader，要抽取css用xtract-text-webpack-plugin
要分离js在config中配置optimization
处理img用url-loader在rules配置路径
3.vue-cli的app.vue文件无论这么样都会显示，app.vue就只是一个模板，所有路由组件全部渲染在这。
几种路由形式:
(1)router-link，用来制作路由，触发跳转，router.push( )为编程式导航
(2)动态路由匹配,this.$route.params接收，用来定义规则，传值，不是用来触发跳转
$route.meta可以获取路由中的信息
4.在setInterval和setTimeout中传入函数时，函数中的this会指向window对象。
5.apply(this, arguments)可以改变this的指向
6.Event() 构造函数, 创建一个新的事件对象 Event。
7.window.dispatchEvent能程序触发事件
8.// install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。没有install方法，它本身就是一个方法，也能直接调用。
9.当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。
10.Array.apply(null, { length: 12 })生成一个12位的数组
11.Vue中DOM更新是异步的，所以在一个方法中去获取页面上的值还是原来的，所以用nextTick来等待dom更新好
12.for in 和for of的区别
for in 的index为字符串不能直接参与计算，遍历数组有可能顺序不同，并且他会遍历数组里面所有可枚举属性,for…of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句
13.js的事件循环机制，js是单线程的，会去任务队列取任务。先执行主线程，再执行微任务，再执行宏任务。
micro task事件：Promises(浏览器实现的原生Promise)、MutationObserver、process.nextTick


macro task事件：setTimeout、setInterval、setImmediate、I/O、UI rendering
这里注意：script(整体代码)即一开始在主执行栈中的同步代码本质上也属于macrotask，属于第一个执行的task
14.箭头函数没有单独的this
不绑定arguments
箭头函数不能用作构造器，和 new一起用会抛出错误
箭头函数没有prototype属性
15.前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。vue-router的原理就是利用的浏览器hash(带#)和history(新增的 pushState() 和 replaceState() 方法不会向后台发送请求。),vue-router内部必然是在监听路由变化，根据路由规则找到匹配的组件，然后在router-view中渲染
16.el < template < render
1.只有el就会把数据挂载在el上
2.既有el又有template，就会用template里的内容替换el的outHTML。
3.既有el又有template，又有render函数。就会使用render函数的内容，因为它的优先级高。(差值表达式)
17.BFC就是块级格式化上下文
BFC的作用：
利用BFC避免margin重叠。
清楚浮动。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
怎么触发？
1.float不为none
2.position的值不是static或者relative。
3.overflow的值不是visible
18.require.context返回一个函数，有keys()方法
19.1vw是当前视口宽度的百分之一，rem根据根元素算的html的font-size
20.typeof null为object
21.function Foo() {
getName = function () { console.log(1) };
return this;
}
Foo.getName = function () { console.log(2);};
Foo.prototype.getName = function () { console.log(3);};
var getName = function () { console.log(4);};
function getName() { console.log(5);}

//请写出以下输出结果：
Foo.getName();
getName();
// Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
22.flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
23.闭包for(var i = 0;i<4;i++){
var s = i;
setTimeout(((s)=>{
return function(){
console.log(s)
}
})(s),1)
}
24.js的静态属性new之后不能调用，但是java可以
25.react的类组件和函数组件的区别:
函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，
因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。
为了提高性能，尽量使用函数组件。
函数组件没有this,没有生命周期，没有状态state,
　　类组件有this,有生命周期，有状态state。
26.https的原理
（1）访问443