ES6 箭头函数及this

1、箭头函数

<script type="text/javascript">

    //以前定义函数

    let fun=function () {

        console.log('123');

    }

    fun();

    //现在可以简化下，用箭头函数

    let fun1=()=>{

        console.log('123');

    }

    fun1();

    //然后假如函数体只有一条语句或者是表达式的时候{}可以省略

    let fun2=()=>console.log(123);

    fun2();

    //加形参情况

    let fun3=(a)=>console.log(a);

    fun3('123');

    //只有一个形参的时候 ()可以省略

    let fun4=a=>console.log(a);

    fun4('123');

    //多个形参

    let fun5=(x,y)=>console.log(x,y);

    fun5('123','456')

</script>

2、this

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是再定义的时候所在的对象就是它的this

箭头函数的this看外层是否有函数，

　　如果有，外层函数的this就是内部调用箭头函数的this

　　如果没有，则this是window

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn1">按钮1</button>

<button id="btn2">按钮2</button>

<script type="text/javascript">

    let btn1=document.getElementById('btn1');

    let btn2=document.getElementById('btn2');

    btn1.onclick=function(){

        alert(this);//按钮1 这里的this是 调用的时候的btn1对象；

    };

    btn2.onclick=()=>{

        alert(this);//按钮2，this是window对象；

    }

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn1">按钮1</button>

<button id="btn2">按钮2</button>

<script type="text/javascript">

    let btn1=document.getElementById('btn1');

    let btn2=document.getElementById('btn2');

    //不用箭头函数

    let obj1={

        name:'jack',

        age:11,

        getName(){

            btn1.onclick=function(){

                console.log(this);

            }

        }

    }

    obj1.getName();//this 就是按钮1

    let obj2={

        name:'jack1',

        age:11,

        getName() {

            btn2.onclick =()=>console.log(this);

        }

    }

    obj2.getName();//this 就是 obj2,因为箭头函数是定义再对象的回调方法里，所以这里的this是obj2；

</script>

</body>

</html>

ES6 箭头函数及this的更多相关文章

  1. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  2. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  3. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  4. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  5. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  6. ES6 箭头函数（Arrow Functions)

    ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...

  7. ES6箭头函数基本用法

    ES6箭头函数基本用法 ``` window.onload = function(){ alert(abc); } //箭头函数 window.onload = ()=>{ alert(&quo ...

  8. ES6 箭头函数this指向问题

    var name = "window"; var person1 = { name: "person1", show1: function() { consol ...

  9. Vue ES6箭头函数使用总结

    Vue ES6箭头函数使用总结   by:授客 QQ:1033553122   箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 ...

  10. ES6 -箭头函数 ，对象的函数解构

    ES6 -箭头函数: //es6 中的箭头函数和扩展 //es5的写法 // function add(a,b){ // return a + b; // } // add(1,2); //3 fun ...

随机推荐

  1. 微信架构 & 支付架构（下）

    微信架构 & 支付架构(下) 3. 管理网络请求 首先看看原来 iOS 处理支付网络请求的缺陷: 原来支付的请求,都是通过一个单例网络中心去发起请求,然后收到回包后,通过抛通知,或者调用闭包的 ...

  2. GPU端到端目标检测YOLOV3全过程（下）

    GPU端到端目标检测YOLOV3全过程(下) Ubuntu18.04系统下最新版GPU环境配置 安装显卡驱动 安装Cuda 10.0 安装cuDNN 1.安装显卡驱动 (1)这里采用的是PPA源的安装 ...

  3. 基于Android平台的图书管理系统的制作（2）

    上一篇讲解了制作图书管理系统的初衷与要求,和app首页的代码. 下面来介绍图书管理系统的服务对象:学生 学生类的设计: 个人信息:账号.密码.姓名.学号.邮箱.年龄. 借阅信息:借阅总数(不超过十本) ...

  4. 【NX二次开发】批量数字签名的方法，解决自己电脑编译的dll在用户正版NX无法使用的问题

    在UG5.0开始,所有开发的DLL都要"签名"后才能被客户端上正版的NX调用. 1. 如果是基于c++开发的dll,使用如下方法可以顺利签名成功(这里借用网上现有的文字和图片) 1 ...

  5. Lambda表达式和函数式接口

    写在有道笔记中,链接地址.欢迎各位看官提出意见交流讨论 http://note.youdao.com/noteshare?id=147109f1bf7f3ae97c43d77891e6ebc8 Lam ...

  6. 【题解】PIZZA 贪心

    题目描述 Michael请N个朋友吃馅饼,但是每个朋友吃且仅吃一个馅饼的1/4.1/2或3/4.请你编程求出Michael至少需要买多少个馅饼. 输入输出格式 输入格式: 输入文件的第一行是整数N:接 ...

  7. MySQL：一条更新语句是如何执行的

    目录 引言 更新流程图 更新流程说明 第一步:更新数据 数据页内存 Change Buffer 第二步:缓存日志内容 redo log buffer binlog cache 第三步:日志写入磁盘 两 ...

  8. [源码解析] 深度学习分布式训练框架 horovod (7) --- DistributedOptimizer

    [源码解析] 深度学习分布式训练框架 horovod (7) --- DistributedOptimizer 目录 [源码解析] 深度学习分布式训练框架 horovod (7) --- Distri ...

  9. 《手把手教你》系列基础篇之（三）-java+ selenium自动化测试- 启动三大浏览器（上）（详细教程）

    1.简介 前边宏哥已经将环境搭建好了,今天就在Java项目搭建环境中简单地实践一下: 启动三大浏览器.按市场份额来说,全球前三大浏览器是:IE.Firefox.Chrome.因此宏哥这里主要介绍一下如 ...

  10. 面向.NET开发人员的Dapr- actors 构建块

    原文地址:https://docs.microsoft.com/en-us/dotnet/architecture/dapr-for-net-developers/actors The actor m ...