ES6 箭头函数以及this
时间:2020-05-26
本文章向大家介绍ES6 箭头函数以及this,主要包括ES6 箭头函数以及this使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
es6箭头函数
es6推出了箭头函数,用来简化定义匿名函数;
基本语法:
let func1=function(){ console.log('普通无参匿名函数'); } func1(); let func2=()=>console.log('箭头函数'); func2();
执行效果一样:
let func2=()=>console.log('箭头函数');
这个括号是方法参数,里面可以写形参;=>后面的内容是方法体;
假如有一个参数的时候,这么写:
let func3=(c)=>console.log(c,'箭头函数,一个参数');
func3('参数一');
当然一个参数的时候,括号可以省略(我个人习惯,还是不省略,不然看着别扭)
let func4=c=>console.log(c,'箭头函数,一个参数,括号可以省略');
func4('参数一');
// 两个或者两个以上参数情况 (括号不能省略)
let func5=(a,b)=>console.log(a,b);
func5(1,2);
// 箭头函数,只有一条语句,可以省略大括号{}
let func6=()=>{ console.log('箭头函数,只有一条语句,可以省略大括号{}'); } func6();
// 函数体,多条语句,要用大括号{}
let func7=(a,b)=>{ let c=a+b; return c; } console.log(func7(1,2));
// 特殊情况 假如不加花括号,表达式返回最终结果;
let func8=(a,b)=>a+b
console.log(func8(1,4));
// 重要特性 箭头函数没有this,所以this是定义的时候,外部所在的对象是它的this。不是调用的时候的this;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn"> 按钮 </button> </body> <script type="text/javascript"> let func1=function(){ console.log('普通无参匿名函数'); } func1(); let func2=()=>console.log('箭头函数'); func2(); let func3=(c)=>console.log(c,'箭头函数,一个参数'); func3('参数一'); let func4=c=>console.log(c,'箭头函数,一个参数,括号可以省略'); func4('参数一'); let func5=(a,b)=>console.log(a,b); func5(1,2); let func6=()=>{ console.log('箭头函数,只有一条语句,可以省略大括号{}'); } func6(); // 函数体,多条语句,要用大括号{} let func7=(a,b)=>{ let c=a+b; return c; } console.log(func7(1,2)); // 特殊情况 假如不加花括号,表达式返回最终结果; let func8=(a,b)=>a+b console.log(func8(1,4)); // 重要特性 箭头函数没有this,所以this是定义的时候,外部所在的对象是它的this。不是调用的时候的this; let name='marry'; let obj={ name:'jack', age:20, /*getName:()=>{ console.log(this.name) }*/ getName:function(){ document.getElementById('btn').onclick=()=>{ console.log(this) } console.log(this.name) }, getName2:() =>{ document.getElementById('btn').onclick=()=>{ console.log(this.name) } } }; obj.getName(); obj.getName2(); </script> </html>
外部let name=’‘marry无法访问到,换成var去定义就可以
原文地址:https://www.cnblogs.com/zsh-blogs/p/12963347.html
- 使用awr来分析sesson leak问题(r3笔记第78天)
- 弹窗层效果的实现(非jQuery实现)
- 简单的导航栏实现
- js实现css3的过渡,需要注意的一点(浏览器优化)
- 居中详解
- 通过pl/sql计算程序的运行时间(r3笔记第77天)
- 操作系统存储管理和oracle数据库(第一篇) (r3笔记第76天)
- 关于虚拟索引的学习(r3笔记第75天)
- python数据挖掘:能不能找出吃货最佳住宿点?
- 解决ajax跨域请求 (总结)
- Python+Selenium+PIL+Tesseract真正自动识别验证码进行一键登录
- 在深度学习TensorFlow 框架上使用 LSTM 进行情感分析
- python玩微信:如何获得自己微信的好友统计信息
- 关于不可见索引的学习(r3笔记74天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Laravel Eloquent ORM 实现查询表中指定的字段
- Yii框架 session 数据库存储操作方法示例
- 使用laravel指定日志文件记录任意日志
- php实现微信小程序授权登录功能(实现流程)
- PHP封装请求类实例分析【基于Yii框架】
- php 多继承的几种常见实现方法示例
- PHP中通过getopt解析GNU C风格命令行选项
- laravel高级的Join语法详解以及使用Join多个条件
- laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
- 使用laravel的Eloquent模型如何获取数据库的指定列
- php 使用 __call实现重载功能示例
- laravel excel 上传文件保存到本地服务器功能
- PHP用swoole+websocket和redis实现web一对一聊天
- Yii框架布局文件的动态切换操作示例
- 关于laravel 子查询 & join的使用