一、箭头函数
* 作用: 定义匿名函数* 基本语法: 租房合同协议下载 * 没有参数: () => console.log('xxxx') * 一个参数: i => i+2 * 大于一个参数: (i,j) => i+j * 函数体不用大括号: 默认返回结果 * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回* 使用场景: 多用来定义回调函数* 箭头函数的特点： 1、简洁 2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this 3、扩展理解： 箭头函数的this看外层的是否有函数， 伤感心情 如果有，外层函数的this就是内部箭头函数的this， 如果没有，则this是window
<!DOCTYPE html><html lang="en"><head> <meta chart="UTF-8"> <title>06_箭头函数</title></head><body> <button id="btn1">测试箭头函数this_1</button> <button id="btn2">测试箭头函数this_2</button> <button id="btn3">测试箭头函数this_3</button> <button id="btn4">测试箭头函数this_4</button><script type=列子汤问"text/javascript"> /* ES5写法： let fun = fu高行建nction () { console.log('fun()') } fun() */ /* ES6箭头函数写法： let fun = () => console.log('fun()') fun() */ // 按左边形参情况分类： //1.没有形参 let fun1 = () => console.log('fun1()') fun1() //2.只有一个形参的时候：()可以省略 let fun2 = a => console.log('fun2()') fun2() //2.两个及两个以上的形参的时候：()不可以省略 let fun3 = (x,y) => cosaturday怎么读nsole.log(x + y) fun3(10,20) // 按右边函数体情况分类： //1.函数体只有一条语句或表达式的时候：{}可以省略，会自动返回语句执行的结果或者是表达式的结果（加了{}，则需要return返回） let fun4 = (x,y) => x+y console.log(fun4(100,200)) /*let fun4 = (x,y) => { return x+y } console.log(fun5(100,200))*/ //2.函数体有两条及以上的语句或表达式的时候：{}不可以省略 let fun5 = (x,y) => { console.log(x,y) return x + y } console.log(fun5(1000,2000)) //箭头函数的特点：没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this let btn1 = document.getElementById('btn1') let btn2 = document.getElementById('btn2') let btn3 = document.getElementById('btn3') let btn4 = document.getElementById('btn4') btn1.onclick = function () { alert(this) // 正常函数内this指向调用他的函数，这里是HTMLButtonElement } btn2.onclick = () => { alert(this) // 箭头函数this指向处在的对象，这里看外层是否有函数，没有就是window } let obj = { tClick:function () { btn3.onclick = () => { alert(this) // 箭头函数的this看外层的是否有函数，这里有，内部箭头函数的this等于外层函数的this指向调用它的obj } } } obj.tClick() let obj1 = { tClick: () => { btn4.onclick = () => { alert(this) // 箭头函数的this看外层的是否有函数，这里没有，内部箭头函数的this则指向window } } } obj1.tClick() function Person() { this.obj = { showThis : () => { console.log(this); // Person{} } } } let fun6 = new Person(); fun6.obj.showThis();</script></body></html>本文地址：https://blog.csdn.net/edc3001/article/details/85962949
本文发布于:2023-04-07 12:19:32，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/d035cb25084fec57d6451030837933a3.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：【ECMAScript 5.doc
本文 PDF 下载地址：【ECMAScript 5.pdf
| 留言与评论（共有 0 条评论） |
