JOKEthel的博客

js严格模式

JOKEthel — Wed, 30 Dec 2020 21:10:50 +0800

严格模式（Strict mode）是由ECMA-262规范定义的新兴JavaScript标准一、严格模式的使用严格模式的使用很简单，只有在代码首部加入字符串 “use strict”。有两种应用场景，一种是全局模式，一种是局部模式。 1）全局模式 'use strict' //code 2）局部模式将”use strict”放到函数内的第一行，如下 function() { "use strict"; //code } 二、严格模式下的执行限制 1）不使用var声明变量严格模式中

about TypeScript

JOKEthel — Tue, 29 Dec 2020 20:56:19 +0800

TypeScript基本类型 let str: string = '字符串类型' // 字符串类型 let num: number = 24 // 数字类型 let bool: boolean = true // 布尔类型 Array 数组类型（只能是单一类型，例如string或者number） let arr: numer[] = [11, 22, 33] // number表示数字类型后面的 [] 表示数字类型的数组 let list: Array = ['西安

Class（类）

JOKEthel — Mon, 28 Dec 2020 20:38:38 +0800

前言 ES6引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。但是JS 中并没有一个真正的 class 原始类型， class 仅仅只是对原型对象运用语法糖。所以，只有理解如何使用原型对象实现类和类继承，才能真正地用好 class。基本语法 class Person{ constructor(name,age){ this.name = name; this.age = age; } Say(){

React Hooks

JOKEthel — Sun, 27 Dec 2020 19:57:46 +0800

是什么 Hook是React16.8的新增特性，可以在不使用类组件的情况下使用state及React的其它特性。七大Hook useState 状态 useEffect 钩子，还有它的兄弟 useLayoutEffect useContext 上下文 useReducer 代替 Redux useMemo 缓存，还有它的小弟 useCallback useRef 引用自定义 Hook 混合 useState 基本语法 const [X, setX] = React.useState(X的初始值)

vue路由懒加载

JOKEthel — Fri, 25 Dec 2020 09:12:54 +0800

方法一：resolve 这一种方法较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例： import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ // { // p

原型，原型链

JOKEthel — Thu, 24 Dec 2020 08:35:15 +0800

原型每个对象都会在其内部初始化一个属性，就是prototype(原型) 使用hasOwnProperty() 可以判断这个属性是不是对象本身的属性 Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？ hasOwnProperty javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。使用方法： object.hasOwnPr

防抖、节流

JOKEthel — Tue, 22 Dec 2020 21:03:02 +0800

浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。防抖（debounce）作用是在短时间内多次触发同一个函数，只执行最后一次，或者只在开始时执行。以用户拖拽改变窗口大小，触发 resize 事件为例，在这过程中窗口的大小一直在改变，所以如果我们在 resize 事件中绑定函数，这个函数将会一直触发，而这种情况大多数情况下是无意义的，还会造成资.

面向对象：类的定义和继承的几种方式

JOKEthel — Mon, 21 Dec 2020 20:52:12 +0800

类的定义、实例化类的定义/类的声明方式一：用构造函数模拟类（传统写法） function Animal1() { this.name = 'smyhvae'; //通过this，表明这是一个构造函数 } 方式二：用 class 声明（ES6的写法） class Animal2 { constructor() { //可以在构造函数里写属性 this.name = name; } } 控制台的效果：实例化类的实例化很简单，直接 new 出来即可。 console.log(new

浏览器渲染机制

JOKEthel — Sun, 20 Dec 2020 21:14:37 +0800

什么是DOCTYPE及作用定义 DTD（Document Type Definition）：文档类型定义。是一系列的语法规则，用来定义XML或者(X)HTML文件类型。浏览器会使用DTD来判断文本类型，决定使用何种协议来解析，以及切换浏览器模式。（说白了就是：DTD就是告诉浏览器，我是什么文档类型，你要用什么协议来解析我） DOCTYPE：用来声明DTD规范。一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出现一些差错。（说白了，DOCTYPE就是用来声明DTD的）

cookie、sessionStorage和localStorage的区别

JOKEthel — Sat, 19 Dec 2020 10:54:13 +0800

基本概念 cookie：主要用来保存登录信息，像现在有的网站会有“记住密码”，这就是通过cookie中存入一段辨别用户身份的数据来实现的。 sessionStorage：可以将一段数据在当前的会话中保存下来，刷新页面数据依旧存在，但页面关闭时，sessionStorage中的数据就会被清空。 localStorage：在IE6时代，就有一个userData的东西用来本地储存，当时考虑到浏览器的兼容性，更通用的是flash，现在localStorage被大多数浏览器所支持。localStorage中的键值以

React生命周期

JOKEthel — Fri, 18 Dec 2020 20:44:53 +0800

生命周期简介 React组件的生命周期实际是提供给React用于将React元素构建渲染挂载到真实的Dom节点的各个时期的钩子函数。各个生命周期函数提供，使得在开发组件时可以控制各个时期执行不同的操作，如异步的获取数据等。上图是基于React: '^16.4'的生命周期挂载组件首次被实例化创建并插入DOM中需要执行的生命周期函数： constructor()：需要在组件内初始化state或进行方法绑定时，需要定义constructor()函数。不可在constructor()函数中调用setS

vue生命周期

JOKEthel — Thu, 17 Dec 2020 21:01:15 +0800

vue生命周期 beforeCreate 在这个钩子函数里只是刚开始初始化实例，拿不到实例里的任何东西，比如data和methods和事件监听等。 data: { msg: 'Ethel' }, methods: { getLists(){ return 'beauty' } }, beforeCreate() { console.log('beforeCreate',this.msg,this.getLists()) } 运行结果会报错 created 在实例创建完成后立即调用

JavaScript 中的垃圾回收

JOKEthel — Wed, 16 Dec 2020 20:29:17 +0800

根据 Wiki 的定义，垃圾回收是一种自动的内存管理机制。当计算机上的动态内存不再需要时，就应该予以释放，以让出内存。直白点讲，就是程序是运行在内存里的，当声明一个变量、定义一个函数时都会占用内存。内存的容量是有限的，如果变量、函数等只有产生没有消亡的过程，那迟早内存有被完全占用的时候。这个时候，不仅自己的程序无法正常运行，连其他程序也会受到影响。好比生物只有出生没有死亡，地球总有被撑爆的一天。所以，在计算机中，我们需要垃圾回收。需要注意的是，定义中的“自动”的意思是语言可以帮助我们回收内存垃圾，但并不代表

js运行机制

JOKEthel — Tue, 15 Dec 2020 19:21:56 +0800

js运行机制：异步和单线程 js的异步和单线程因为是单线程，所以必须异步例子一：异步 console.log(1); setTimeout(function () { console.log(2); }, 1000); console.log(3); console.log(4); 上面的代码中，我们很容易知道，打印的顺序是1，3，4，2。因为你会想到，要等一秒之后再打印2。可如果我把延时的时间从1000改成0： console.log(1); setTimeout(function () {

面试高频题（待更新）

JOKEthel — Mon, 14 Dec 2020 20:32:19 +0800

CSS相关 1.盒模型盒子大小由自身的宽高加上padding border margin。 2.怪异盒模型盒子的border padding margin 发生改变的时候不会改变自身大小。 box-sizing：border-box 3.未知宽高的盒子垂直水平居中的方案`

这是要居中的盒子

1. 弹性盒 .box{ display: flex;

BFC（边距重叠解决方案）

JOKEthel — Sat, 12 Dec 2020 10:18:02 +0800

BFC的概念 BFC（Block Formatting Context）：块级格式化上下文，也可以把它理解成一个独立的区域。 BFC的原理/BFC的布局规则 BFC内部的子元素，在垂直方向边距会发生重叠。 BFC在页面中是独立的容器，在页面中外部元素不会影响内部元素，反之亦然。 BFC区域不与旁边的float box区域重叠，可以用来清除浮动带来的影响。计算BFC的高度时，浮动的子元素也参与计算。如何生成BFC 方法一：overflow：属性值不为visible，可以是auto，hidden。方

ES6-Symbol

JOKEthel — Fri, 11 Dec 2020 21:00:27 +0800

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。 Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。 Symbol函数前不能使用new命令，因为生成的Symbol是一个原始类型的值，不是对象，所以不能添加属性。基本上，它是一个类似于字符串的数据类型。 Symbol函数的参数只是表示对当前 Symbol 值的

函数的声明及函数表达式

JOKEthel — Fri, 11 Dec 2020 10:34:01 +0800

函数声明使用function关键字声明一个函数，再指定一个函数名，叫函数声明。 function fnName () {} 匿名函数匿名函数属于函数表达式的一种，使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数。 function () {} 匿名函数的作用赋予一个变量则创造函数，赋予一个事件则成为事件处理程序或创建闭包等等。函数表达式将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。 var fnName = function () {} 函

http协议

JOKEthel — Tue, 08 Dec 2020 10:13:50 +0800

http协议什么是BS架构浏览器/服务器模式优点分布性强易维护什么是协议信号的传输总要基于一定的规则，这个规则就是协议协议很多 http https ws DNS FTP SMTP 什么是http协议 http定义（超文本传输协议） http特点一定是浏览器主动向服务器发起请求一次请求都会对应一次响应服务器响应时间不一定是即时的，但它一定会响应 http状态码由三个数字组成，第一个数字是响应的类别，分五种类别 1XX：我已经收到你的消息了，我正在处理 2XX：表示我

深浅拷贝

JOKEthel — Tue, 22 Sep 2020 19:56:09 +0800

浅拷贝和深拷贝的区别浅拷贝，就是两个变量都是指向一个地址，改变了一个变量，那另一个变量也随之改变。这就是浅拷贝带来的副作用，两个变量会相互影响到，因为它们指向同一个地址。深拷贝，就是互相独立，指向的是不同的地址，一个变量改变了，另一个变量不会被影响到。父组件传给子组件的attr，在子组件通过props.attr直接复制给childAttr，这就是浅拷贝，父组件的attr与子组件的childAttr指向同一个地址，在子组件中改变childAttr，那么父组件中的attr也会随之改变。这时再将attr传入