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. ResNet网络的训练和预测

    ResNet网络的训练和预测 简介 Introduction 图像分类与CNN 图像分类 是指将图像信息中所反映的不同特征,把不同类别的目标区分开来的图像处理方法,是计算机视觉中其他任务,比如目标检测 ...

  2. 包及权限配置&java存储机理绘制

    包及权限配置 包的声明和导入 //声明 package aa.bb.cc; public class A{;} class B{;} //即在java输出目录aa.bb.cc中放入编译后的A.clas ...

  3. 深入理解java虚拟机笔记Chapter3-垃圾收集器

    垃圾收集器 垃圾收集(Garbage Collection,GC),它的任务是解决以下 3 件问题: 哪些内存需要回收? 什么时候回收? 如何回收? 本节补充知识: ① s:Survivor区 新生代 ...

  4. Spring Boot WebFlux-导读

    背景 大家都知道,Spring Framework 是 Java/Spring 应用程序跨平台开发框架,也是 Java EE(Java Enterprise Edition) 轻量级框架,其 Spri ...

  5. 从1+1=2来理解Java字节码从1+1=2来理解Java字节码

    编译"1+1"代码 首先我们需要写个简单的小程序,1+1的程序,学习就要从最简单的1+1开始,代码如下: 写好java类文件后,首先执行命令javac TestJava.java ...

  6. 「10.14」小P的2048(模拟)·小P的单调数列(性质,DP)·小P的生成树(乱搞)

    A. 小P的2048 模拟.....又没啥可说的,以后要认真打打模拟题了... B. 小P的单调数列 考场$n^2log(n)$的SB思路有人听吗 正解当然不是这样, 事实上我们每次选取的只有一段区间 ...

  7. canvas小画板——（3）笔锋效果

    画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"> ...

  8. 免费获取思维导图Mindmaster会员教程

    免费获取思维导图Mindmaster会员教程 步骤一.下载安装 搜索亿图官方网页,下载安装免费版Mindmaster思维导图. 步骤二.点击登录 打开Mindmaster思维导图,点击登录,可以使用微 ...

  9. 升级openssl并重新编译Nginx

    在漏洞扫描的时候出现"启用TLS1.0"的安全漏洞,描述为:不被视为 PCI 数据安全标准,推荐使用TLS1.2及以上版本: 我这边服务器使用的是CentOS7,默认自带的open ...

  10. Centos ulimit设置

    1.三处配置 1. 系统编译时默认设置文件(centos7新增) 服务配置 /etc/systemd/system.conf 用户配置 /etc/systemd/user.conf 2. PAM模块配 ...