标签：广东 console log 前端 面试 组件 Promise catch 函数

文章目录

• • 2021.03.11 广东砺云教育科技有限公司
  • • • **float**
      • flex弹性布局
      • **promise**
      • 网络请求的原理（看书了解多一点）
      • • 原生 Ajax 的用法
        • 什么是ajax? ajax的步骤？
      • JAVA和JavaScript的区别
      • 实习项目的难点
      • 父子组件的沟通、跨层级沟通
      • 小程序的使用与平时的有什么不同
      • flutter技术如何自学
      • http协议和tcp协议的定义
      • vue
      • es6的使用 var let const
      • promise使用与没有用它之前的好处 和遇到的问题
      • cookies sessionStorage和localstorage区别
      • 箭头函数的好处，如何使用，跟之前的普通函数有什么区别
      • • 基础语法
        • 和普通函数的区别
      • 项目的node和mysql的使用 难点
      • 数据表怎么设置，保证她的唯一性
      • 密码加密问题

2021.03.11 广东砺云教育科技有限公司

CSS布局

float

属性：left（向左浮动），right（向右浮动），none（默认不不浮动）

清除浮动clear：left、right、both(清除左右浮动的影响)

子元素浮动会造成父元素高度塌陷

1、在父元素添加一个新的元素为其设置clear：both

2、为父元素添加overflow：hidden属性

3、为父元素添加伪类：after，对其设置clear：both

清除浮动的几种方式

1）父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2）父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好

3）结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

flex弹性布局

box需要添加弹性布局的父元素；item弹性容器中的每一个子元素

给父元素添加display：flex（块级元素）或者display：inline-flex（行级元素）属性，可使容器内容采取弹性布局显示

作用于容器的属性：flex-direction：row默认；flex-wrap：nowarp默认不换行；justify-content主轴对齐：flex-start、flex-end、center、space-between、space-around；align-items交叉轴对齐：stretch默认占满整个高度；

作用于项目的属性：order项目排序、flex-grow项目放大比、flex-shrink项目缩小比

promise

早期JS会陷入回调地狱(callback hell)，获取第一份数据之后再获取第二份数据，获取到第二份数据后再获取第三份数据…这样的嵌套回调太多了就特别乱，就像地狱一般，回调地狱是因为嵌套函数存在耦合性，一旦有所改动就会牵一发而动全身

假设多个请求存在依赖，可能代码就会如下：

function firstAjax(){
 ajax(url,()=>{
 	//处理逻辑
 	secondAjax()
 })
}
function secondAjax(){
 ajax(url2,()=>{
 	//处理逻辑
 })
}
ajax(url,()=>{
	//处理逻辑
	firstAjax()
})

嵌套的回调地狱的问题导致了promise的出现，也就是说promise的出现，解决了callback嵌套的回调地狱(callback hell)问题

promise解决了上述的回调地狱问题

ajax(url).then(res=>{
	console.log(res)
	return ajax(url1)
}).then(res=>{
	console.log(res)
	return ajax(url2)
}).then(res=>{
	console.log(res)
})

Promise有哪三种状态？如何变化？

Promise三种状态：pending、fulfilled、rejected

状态变化：

1.pending–>fulfilled(成功了)

2.pending–>rejected(失败了)

状态变化是不可逆的

状态的表现

1.pending状态，在过程中，没有结果，不会触发then和catch

2.fulfilled状态的Promise会触发后续的then回调函数

3.rejected状态的Promise会触发后续的catch回调函数

then和catch改变状态

then正常返回fulfilled的Promise对象，里面有报错则返回rejected的Promise对象

catch正常返回fulfilled的Promise对象，里面有报错则返回rejected的Promise对象

resolve---->then
then 中是一个正常return ，得到resolve ，可以继续执行 .then里面的内容
then 中是一个throw error，得到reject，不能执行后面的 .then
rejected---->catch
catch 中是一个正常return ，得到resolve可以继续执行 .then里面的内容
catch 中是一个error，得到reject ，不能执行后面的 .then，可以执行catch

Promise.reject(reason)返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法catch

Promise.resolve(value)返回一个状态为成功的Promise对象，并将成功信息传递给对应方法then

resolve状态的Promise会触发后续的then回调函数

var p = Promise.resolve().then(()=>{
  return 100
})
//Promise.resolve()返回fulfilled状态的Promise对象，然后then执行完不报错，还是返回一个fulfilled状态的Promise
console.log(p)   //100 Promise { <state>: "fulfilled", <value>: 100 }
p.then((res)=>{
  console.log(res)   //传进来p返回的100
})      Promise { <state>: "fulfilled", <value>: undefined }
p.then(()=>{   // 传进来p返回的100，但是没有使用，打印123
  console.log(123)
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xscJCwL-1617416224365)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444485430.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dxQLPExo-1617416224371)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444692327.png)]

var p1 = Promise.resolve().then(()=>{
  throw new Error("then erroe")
})
//Promise.resolve()返回fulfilled状态的Promise对象，然后then执行完报错了！返回一个rejected状态的Promise
console.log(p1)  Promise { <state>: "rejected", <reason>: Error }
p1.then(()=>{   // rejected状态的Promise后续会触发catch而不是then,所以输出111111
  console.log(123456)  
}).catch(()=>{
  console.log(111111); Promise { <state>: "fulfilled", <value>: undefined }
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8IXHw2h-1617416224375)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444927457.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bHDi4qFi-1617416224382)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615444933828.png)]

rejected状态的Promise会触发后续的catch回调函数

var p2 = Promise.reject("my error").catch(err=>{
  console.log(err);   //my error
})  //p2是一个reject，但是执行了catch，而且正常执行了，返回resolved
console.log(p2)  Promise { <state>: "fulfilled", <value>: undefined }
p2.then(()=>{
  console.log("p2之后触发了then")   //p2之后触发了then
})   Promise { <state>: "fulfilled", <value>: undefined }

p2.catch(()=>{
  console.log("p2之后触发了catch")   //不执行catch的内容
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V6egxi53-1617416224392)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455096795.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JaDF0NYk-1617416224399)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455104722.png)]

var p3 = Promise.reject("my error2").catch(err=>{
  throw new Error("err")  //p3是reject，执行catch，但是catch中报错了，返回reject
})
console.log(p3)//Promise { "rejected" } <state>: "rejected"<reason>: Error: err
p3.then(()=>{
  console.log("p3之后触发的then")  //不执行
})     Promise { <state>: "rejected", <reason>: Error }
p3.catch(()=>{
  console.log("p3之后触发的catch")  //p3之后触发的catch
})     Promise { <state>: "fulfilled", <value>: undefined }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GuJWrpKR-1617416224407)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615455541478.png)]

Promise.resolve().then(()=>{
    console.log(1);
}).catch(()=>{
    console.log(2);
}).then(()=>{
    console.log(3);
})
//1 3

resolve().then()执行成功返回的是resolve()只会执行then()而不会执行catch()

Promise.resolve()返回一个fulfilled状态的Promise后续触发then回调，然后打印1，then执行完返回fulfilled状态的Promise，然后再执行then，打印3，返回返回fulfilled状态的Promise。因为没Error，没有rejected状态的Promise，所以不会触发catch回调。

Promise.resolve().then(()=>{
    console.log(1);
    throw new Error("err")
}).catch(()=>{
        console.log(2);
}).then(()=>{
    console.log(3);
})
//1 2 3

第一个then中有throw err 出错了，相当于reject，reject执行catch，所以catch里面的内容正常执行，catch正常执行了，相当于resolve，resolve会执行then

Promise.resolve()返回一个fulfilled状态的Promise后续触发then回调，然后打印1，执行throw new Error(‘erro1’);返回一个rejected状态的Promise，触发catch回调函数，打印2，接着返回fulfilled状态的Promise，触发后面then的回调，打印3，返回一个fulfilled状态的Promise。

Promise.resolve().then(()=>{
    console.log(1);
    throw new Error("err")
}).catch(()=>{
        console.log(2);
}).catch(()=>{
    console.log(3);
})
// 1 2 

第一个then执行，里面有err ,相当于reject，执行catch，catch成功执行了，相当于resolved，执行then，不执行catch，所以2执行，3不执行

打印2之后返回的是fulfilled状态的Promise，后面没有then，所以不打印3。catch里面只要没报错Error，那么就是fulfilled状态的Promise。

不要忽略最后的返回值，返回值会链式传递给下一个回调，只不过我们这里的例子没有强调返回值，等于return undefined；如果then/catch回调函数有形参，而上一个回调函数有返回值，那么返回值会作为下一个回调的形参。

网络请求的原理（看书了解多一点）

前端发起一个网络请求

• 传入基本参数（url，请求方式）
• 请求参数、请求参数类型
• 设置请求头
• 获取响应的方式
• 获取响应头、响应状态、响应结果
• 异常处理
• 携带cookie设置
• 跨域请求

前端进行网络请求的方式

• form表单、ifream、刷新页面
• Ajax - 异步网络请求的开山鼻祖
• jQuery - 一个时代
• fetch - Ajax的替代者
• axios、request等众多开源库

原生 Ajax 的用法

var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true)
// 接收返回值
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 ){
        if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            console.log(xhr.responseText);
        }
    }
}
// 处理请求参数
postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
     dataString += key+"="+value[key]+"&";
};
  return dataString;
}(postData));
// 设置请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 异常处理
xhr.onerror = function() {
   console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;
// 发出请求
xhr.send(postData);

对XMLHttpRequest对象常用的的函数、属性、事件进行分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-26Go1RWD-1617416224412)(C:\Users\windows\AppData\Roaming\Typora\typora-user-images\1615706399692.png)]

函数

open：用于初始化一个请求，用法：

xhr.open(method, url, async);

• method：请求方式，如get、post
• url：请求的url
• async：是否为异步请求(boolean值)

send：用于发送HTTP请求，即调用该方法后HTTP请求才会被真正发出，用法：

xhr.send(param);

• param：http 请求的参数，可以为string、Blob等类型。

abort：用于终止一个ajax请求，调用此方法后readyState将被设置为0，用法：

xhr.abort();

setRequestHeader：用于设置HTTP请求头，此方法必须在open()方法和send()之间调用，用法：

xhr.setRequestHeader(header, value);

getResponseHeader：用于获取http返回头，如果在返回头中有多个一样的名称，那么返回的值就会是用逗号和空格将值分隔的字符串，用法：

var header = xhr.getResponseHeader(name);

属性

readyState：用来标识当前XMLHttpRequest对象所处的状态，XMLHttpRequest对象总位于状态中的一个：

值	状态	描述
0	UNSENT	请求初始化。代理被创建，但尚未调用 open() 方法。
1	OPENED	服务器连接已建立。open() 方法已经被调用。
2	HEADERS_RECEIVED	请求已接收。send()方法已经被调用，并且头部和状态已经可获得。
3	LOADING	请求处理中。下载中； responseText 属性已经包含部分数据。
4	DONE	请求已完成，且响应已就绪。下载操作已完成。

status：表示http请求的状态, 初始值为0。如果服务器没有显式地指定状态码, 那么status将被设置为默认值, 即200。

responseType：表示响应的数据类型，并允许我们手动设置，如果为空，默认为text类型，可以有下面的值：

值	描述
""	将 responseType设为空字符串与设置为"text"相同， 是默认类型 （实际上是 DOMString）。
"arraybuffer"	response 是一个包含二进制数据的JavaScript ArrayBuffer 。
"blob"	response是一个包含二进制数据的 Blob 对象 。
"document"	response 是一个HTML Document或XML XMLDocument，这取决于接收到的数据的 MIME 类型。
"json"	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为JSON解析得到的。
"text"	response是包含在DOMString对象中的文本。

response：返回响应的正文，返回的类型由上面的responseType决定。

withCredentials：ajax请求默认会携带同源请求的cookie，而跨域请求则不会携带cookie，设置xhr的withCredentials的属性为true将允许携带跨域cookie。

事件回调

onreadystatechange：状态码改变。当readyState属性发生变化时，callback 会被触发。

xhr.onreadystatechange = callback;

onloadstart：开始请求。在ajax请求发送之前（readyState==1后, readyState==2前），callback会被触发。

xhr.onloadstart = callback;

onprogress：请求进度。回调函数可以获取资源总大小total，已经加载的资源大小loaded，用这两个值可以计算加载进度。

xhr.onprogress = function(event) {
    console.log(event.loaded / event.total);
};

onload：请求完成。当一个资源及其依赖资源已完成加载时，将触发callback，通常我们会在onload事件中处理返回值。

xhr.onload = callback;

异常处理

onerror：错误。当ajax资源加载失败时会触发callback。

xhr.onerror = callback;

ontimeout：超时。当进度由于预定时间到期而终止时，会触发callback，超时时间可使用timeout属性进行设置。

xhr.ontimeout = callback;

什么是ajax? ajax的步骤？

ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。
如何使用ajax?
第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);

XMLHttpRequest对象用来和服务器交换数据。

var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。
第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

JAVA和JavaScript的区别

Java 和 JavaScript 是两门不同的编程语言。

一般认为，当时 Netscape 之所以将 LiveScript 命名为 JavaScript，是因为 Java 是当时最流行的编程语言，带有 “Java” 的名字有助于这门新生语言的传播。

它们的相同之处包括： 它们的语法和 C 语言都很相似；它们都是面向对象的（虽然实现的方式略有不同）；JavaScript 在设计时参照了 Java 的命名规则；

它们的不同之处包括：

• JavaScript 是动态类型语言，而 Java 是静态类型语言；
• JavaScript 是弱类型的，Java 属于强类型；
• JavaScript 的面向对象是基于原型的（prototype-based）实现的，Java 是基于类（class-based）的；

实习项目的难点

环境配置的问题，需要安装下载并配置编辑器环境

使用框架，路由跳转的问题

父子组件的沟通、跨层级沟通

1）父组件通过props传递数据给子组件，子组件通过emit发送事件传递数据给父组件。

父组件可以修改子组件的内容，而子组件是不能（不推荐）直接改变父组件的内容，但子组件可以通过事件触发的方式通知父组件来修改自己本身的内容。

父组件向子组件传值：都是以属性的方式传值，分为静态传值和动态传值，静态不加冒号，动态加冒号。

子组件通过props: [ ] 接收.props传递是单向的，只用于父传值给子

子组件像父组件传数据:子组件需要触发一个自定义事件，父组件同时需要监听自定义事件，当子组件触发时，父组件监听到就会执行相应的动作。

子组件：@click=$emit("自定义事件名", 参数 )

父组件 : @自定义事件名 = 自定义函数名($event)

父组件的methons :{ 自定义函数名: function(val) { val就是传递过来的值} }

$emit 与 e v e n t 是 固 定 写 法 ， 不 管 你 传 递 的 时 候 有 多 少 个 参 数 ， 接 收 时 都 是 event 是固定写法，不管你传递的时候有多少个参数，接收时都是 event是固定写法，不管你传递的时候有多少个参数，接收时都是event , 然后函数中的形参也是一个;

如果子组件传递有多个参数，就用对象的形式包起来。父组件接收时的形参也是单个参数，通过 . 的形式调用，例如：val.id , val.name

点击触发$emit方法,并且携带参数,参数名称就是自定义事件,这个事件会传递给父组件,父组件用@监听一下

2）v-model双向数据绑定。v-model默认会解析名为value的prop和名为input的事件。

3）通过访问 p a r e n t 或 者 parent或者 parent或者children对象来访问组件实例中的方法和数据

4） l i s t e n e r s 属 性 会 将 父 组 件 中 的 v − o n 事 件 监 听 器 传 递 给 子 组 件 ， 子 组 件 可 以 通 过 访 问 listeners属性会将父组件中的v-on事件监听器传递给子组件，子组件可以通过访问 listeners属性会将父组件中的v−on事件监听器传递给子组件，子组件可以通过访问listeners来自定义监听器

5）.sync属性(语法糖)

//父组件
<input :value.sync="value" />
//等同于以下写法
<input :value="value" @update:value="v => value =v" />
//子组件
<script>
	this.$emit('update:value');
</script>

总结：这样写虽然子组件看不出简化，但是使用父组件的人就用得很爽，不需要再@自定义事件名 = 自定义函数名($event),然后再父组件的methons去改变这个值

小程序的使用与平时的有什么不同

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

全局文件
app.js、app.json、app.wxss、project.config.json
小程序开发的代码构成（百度）文档
1、建工程之后默认建project.config.json—项目配置文件（工具个性化配置改变，文件代码改变）
2、app.json----配置文件（项目的基础配置）
1）pages页面路径 自动生成 （pages文件的页面）
2）window 窗口信息的更改 /配置标签
3）tabBar 底部标签栏
3、app.js的作用，用小程序app的方法创建实例。可以写全局数据
4、wxss全局样式，文件里面写样式，页面有对应的选择器即可使用

具体页面
pages文件夹里面分成每一个文件代表每一个页面
.json文件中不给选择器则默认为window
.wxml多的属性查文档
.js获取全局的实例
utils文件不是必须的
里面可以放额外的自定义的方法和js文件

页面创建
1、全局三个文件，app.js , app.json , app.wxss(名称不可更改)
2、创建pages目录文件（用来存放各个页面）
3、在pages中创建页面，再创建page（同时创建4个文件）
1）.js页面逻辑
2）.json 负责标题栏和一些状态栏
3）.wxml 管理页面有什么
4）.wxss 页面排布

flutter技术如何自学

学习Dart语言参考官方文档进行学习总结，做好笔记。

进而学习flutter文档，再完成组长分配的任务

学习公司框架内部如何实现，做好笔记。

http协议和tcp协议的定义

滚动加载–v-for、分片、替换；

虚拟列表

vue

es6的使用 var let const

promise使用与没有用它之前的好处 和遇到的问题

cookies sessionStorage和localstorage区别

相同点：都存储在客户端
不同点：

1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3.数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

箭头函数的好处，如何使用，跟之前的普通函数有什么区别

基础语法

let fn = () => {   
console.log(1)
}
fn() // 1

等价于

let fn = function () {   
console.log(1)
}fn() // 1

只有一个参数的时候，可以不用写括号

let fn = value => {    
console.log(value)
}
fn(1) // 1

没有参数或多个参数的时候，要写括号

let fn = (num1, num2) => {    
console.log(num1 + num2)
}
fn(1, 2) // 3

与变量解构结合使用

const full = ({ first, last }) => first + ' ' + last;//
等同于function full(person) {    return person.first + ' ' + person.last; }

简写，更简洁的函数

当函数体只有一条return语句时，可以省略花括号{}和return

let fn = value => value
fn(1) // 1

等价于

let fn = function (value) {  
return value
}

直接返回一个对象

let fn = (num1, num2) => ({ total: num1 * num2 })fn(10, 10) // {total: 100}

注意：返回的对象必须用括号包起来，不然这边会返回undefinded。

如果没有用括号包起来，返回的对象又有多个属性的，会直接报错，下面这样写会报错

let fn = (num1, num2) => { a: num1, b: num2 }// 报错：Uncaught SyntaxError: Unexpected token ':'

所以记得要写括号。

和普通函数的区别

1.没有this

箭头函数不会创建自己的this，它只会从自己的作用域链的上一层继承this。

重点：箭头函数中的this指向其定义时所处的作用域的this。

来看个例子：普通函数默认情况下，谁调用this就指向谁

document.addEventListener('click', function () {    console.log(this) // document})

箭头函数中的this指向其定义时所在的作用域的this

document.addEventListener('click', () => {    console.log(this) // window})

再来看一个例子：

document.addEventListener('click',
function () {   
let fn = () => {       // 虽然是通过obj对象来调用的，但还是指向document     
console.log(this) // document    
}    
let obj = {      
fn: fn    }   
obj.fn()})

2.call()、apply()、bind()调用

由于箭头函数没有this，所以也不能用call()、apply()、bind()方法来改变this指向。

var value = 1
var result = (() => this.value).call({value: 2}) // 改变this指向无效
console.log(result) // 1

3.不定参的问题：没有arguments

箭头函数没有自己的arguments对象

let testArguments = () => {   
console.log(arguments) // 报错：Uncaught ReferenceError: arguments is not defined
}
testArguments(1, 2, 3, 4)

但是箭头函数可以访问外围的arguments参数

function constant() {   
return () => arguments[0]}
var result = constant(1)
console.log(result()) // 1

4.不能通过new关键字调用

JavaScript函数有两个内部方法：[[Call]]和[[Construct]]。

当通过`new`调用函数时，执行[[Construct]]方法，创建一个实例对象，然后再执行函数体，将this绑定到实例上。

当直接调用的时候，执行[[Call]]方法，直接执行函数体。

箭头函数并没有[[Construct]]方法，不能被用作构造函数，如果通过`new`的方式调用，会报错。

let Foo = () => {}
let foo = new Foo() // TypeError: Foo is not a constructor

5.没有new.target

因为不能使用new调用，所以也没有new.target值。

关于new.target，可以参考https://es6.ruanyifeng.com/#docs/class#new-target-%E5%B1%9E%E6%80%A7

6.没有原型

由于不能使用new调用箭头函数，所以也没有构建原型的需求，于是箭头函数也不存在prototype这个属性。

let Foo = () => {};
console.log(Foo.prototype); // undefined

7.没有super

连原型都没有，自然也不能通过super来访问原型的属性，所以箭头函数也是没有super的，不过跟this、arguments、new.target一样，这些值由外围最近一层非箭头函数决定。

总结

箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数(non-method functions)，并且它们不能用作构造函数。

那么什么是 non-method functions 呢？

我们先来看看 method 的定义：

A method is a function which is a property of an object.

对象属性中的函数就被称为method，那么non-method就是指不被用作对象属性中的函数了，可是为什么说箭头函数更适合non-method呢？

让我们来看个例子就明白了：

let obj = {  i: 10, 
b: () => console.log(this.i, this),
c: function() {    console.log( this.i, this)  }}
obj.b();// undefined Windowobj.
c();// 10, Object {...}

这也更加验证了上面提到的：

箭头函数中的this指向其定义时所在的作用域的this。

obj对象不会构成单独的作用域，它所处的作用域是全局的，所以箭头函数b中的this自然就指向Window了，跟它是怎么被调用的无关。

项目的node和mysql的使用 难点

数据表怎么设置，保证她的唯一性

密码加密问题

标签：广东,console,log,前端,面试,组件,Promise,catch,函数
来源： https://blog.csdn.net/weixin_42386583/article/details/115413144

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。