一、定义函数的方式

//1.function
const aaa = function () { }
//2.对象字面量中定义函数
const obj = {
bbb() { }
}
//3.ES6中的箭头函数
const ccc = (参数) => { }

二、箭头函数的参数和返回值

1、参数问题

//1.1两个参数
const sum = (num1, num2) => {
return num1 + num2
}
//1.2一个参数(括号可以省略)
const power = num => {
return num * num
}

2、返回值

//2.1代码块中有多行代码时正常写

const test = () => {
console.log('11111')
console.log('22222')
}
//2.2代码块中有一行代码时省略大括号
const power = num => num * num

三、箭头函数中的this

//1.什么时候使用箭头函数函数:当把一个函数作为另一个函数的参数的时候
setTimeout(function () {
console.log(this) //window
},1000) setTimeout ( () => {
console.log(this) //window
},1000) const obj = {
aaa() {
setTimeout(function () { //函数调用是通过call,call会把window作为第一个参数传进去
console.log(this) //window
}) setTimeout(() => { //箭头函数没有自己的this,只会一层一层向外查找
console.log(this) //aaa obj对象
})
}
}
obj.aaa() const obj = {
aaa() {
setTimeout(function () { //函数调用是通过call,call会把window作为第一个参数传进去
setTimeout(function (){
console.log(this) //window
}) setTimeout( () => {
console.log(this) //window
})
}) setTimeout(() => { //箭头函数没有自己的this,只会向外作用域一层一层向外查找
setTimeout(function (){
console.log(this) //window
}) setTimeout( () => {
console.log(this) //aaa obj对象
})
})
}
}
obj.aaa()

总结:

箭头函数没有自己的this,他是在定义函数的时候绑定的,而不是在执行过程中绑定的,它继承了定义函数的对象,例如:

function Person () {
this.name = 'lihh',
this.age = 18,
setInterval(() => {
console.log (this)
console.log('我叫' + this.name + '今年' + this.age)
}, 1000);
} let p = new Person()

打印结果是this指向了Person

再看下面这种非箭头函数:

function Person () {
this.name = 'lihh',
this.age = 18,
setInterval(function () {
console.log (this)
console.log('我叫' + this.name + '今年' + this.age)
}, 1000);
} let p = new Person()

打印结果是this指向了window,这是由于setInterval跟setTimeout调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

四、使用箭头函数的好处

1.解决了匿名函数的this指向问题

上面例子打印结果为undefined,是因为此时this指向的是window对象,然而window对象上面并没有绑定name和age属性,所以找不到

五、什么时候不能使用箭头函数

(待补充)

箭头函数以及this指向问题的更多相关文章

  1. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  2. 箭头函数的this指向

    es6的箭头函数中this指向是跟普通function中的this指向不同的,普通function的this指向取决于调用function的对象, 而箭头函数的this指向取决于声明它的对象,看下面这 ...

  3. 箭头函数的this指向问题-一看就懂

    OK,对于箭头函数的this 用一句话概括:箭头函数中的this指向的是定义时的this,而不是执行时的this. 如果上面这句话听的是懂非懂或者完全不懂的,没关系,下面会有案例讲解. 举个栗子 来看 ...

  4. ES6箭头函数及this指向

    箭头函数(=>):函数简写 无参数:() => {} 单个参数:x => {} 多个参数:(x, y) => {} 解构参数:({x, y}) => {} 嵌套使用:部署 ...

  5. 箭头函数的this指向问题

    this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.正是因为它没有this,所以也就不能用作构造函数 ...

  6. ES6箭头函数与this指向

    一.ES6箭头函数 ES6之前的语法想要定义一个函数,如图example1,ES6之后定义一个函数如图example2,相比较之下简洁了很多 二.函数的this指向 非箭头函数,谁调用函数this指向 ...

  7. ES6——>let,箭头函数,this指向小记

    let let允许你声明一个作用域被限制在块级中的变量.语句或者表达式. 还是那个经典的问题:创建5个li,点击不同的li能够打印出当前li的序号. 如果在for循环中使用**var**来声明变量i的 ...

  8. 关于箭头函数的this指向问题

    document.onclick = function(){ // 普通函数的this是在运行的时候才临时绑定的,也就是说,函数不运行,你绝对不可能知道this是谁 // 下面这个函数如果是自调用,t ...

  9. 箭头函数this的指向

    箭头函数的this 什么是箭头函数,箭头函数是es6的新特性,其出现就是为了更好的表示(代替)回调函数 // 箭头函数 (arg1, arg2) => {} // 当箭头函数只有一个参数 arg ...

随机推荐

  1. PHP垃圾回收深入理解

    转摘于http://www.cnblogs.com/lovehappying/p/3679356.html PHP是一门托管型语言,在PHP编程中程序员不需要手工处理内存资源的分配与释放(使用C编写P ...

  2. 洛谷P1120 小木棍 [数据加强版](搜索)

    洛谷P1120 小木棍 [数据加强版] 搜索+剪枝 [剪枝操作]:若某组拼接不成立,且此时 已拼接的长度为0 或 当前已拼接的长度与刚才枚举的长度之和为最终枚举的答案时,则可直接跳出循环.因为此时继续 ...

  3. PageObject设计模式 在selenium 自动化测试里面的应用

    PageObject设计模式1. Web自动化测试框架(WebTestFramework)是基于Selenium框架且采用PageObject设计模式进行二次开发形成的框架. 2. web测试时,建议 ...

  4. 1204C Anna, Svyatoslav and Maps

    题目大意 给你一个有向图和一个路径 让你在给定路径中选出尽量少的点使得新路径的最短路长度和原路径相等 给定路径相邻两点间距离为1 分析 先floyd求出两点间最短路 之后每次对于点i找到所有跟它的最短 ...

  5. JS-Promise-先上传文件再提交表单

    很久前就使用过 Bootstrap File Input 上传文件,将上传文件返回的信息和表单一并提交回去. 最开始的时候是让用户手动点上传文件,然后再点提交表单: 之后尝试了写在回调里,不过这样会写 ...

  6. git如何撤销工作区的修改

    对工作区中文件的修改分为三种情况: (1)还没有git add (2)已经git add (3)已经git add,并再次进行修改 对于第一种情况,直接使用git checkout -- 文件,即可撤 ...

  7. log4j配置及异常、解决办法

    配置: ### set log levels ### D只有一个E也只有一个 log4j.rootLogger = debug,stdout,D,E ### 输出到控制台 ### log4j.appe ...

  8. thymeleaf 下拉选框回显选中

    参考了许多,最后以这种方法实现了.尽管有些愚蠢,初步学习阶段.不知道为什么用th:field会报错.网上有些是用field来解决回显问题的. <select name="positio ...

  9. Codeforces 1156E Special Segments of Permutation(单调栈)

    可以用单调栈直接维护出ai所能覆盖到的最大的左右范围是什么,然后我们可以用这个范围暴力的去查询这个区间的是否有满足的点对,一个小坑点,要对左右区间的大小进行判断,只需要去枚举距离i最近的一段区间去枚举 ...

  10. [NOIP2016]借教室

    NOIP2012提高组D2T2. 这道题目非常基础,正解貌似是二分+差分数组,在这里提供一种线段树的思路. 很容易发现题目让我们每次修改一段区间,然后我们只需要看每一个区间内有没有负数就可以了.可以用 ...