箭头函数相当于定义时候,普通函数.bind(this)
箭头函数根本没有自己的this,导致内部的this就是定义时候的外层代码块中的this。
外层代码块中的this,则取决于执行时候环境上下文context中的this
并不是所有的{}都可以代表是上下文环境或者代码块,例如  {x:1,y:2} ,就是简简单单的对象。
但是function () {
  这里是代码块,有上下文context环境,例如参数,属性,变量等
}

还有就是context为window(global)的情况。

通过实例来分析箭头函数的this。

var name = 'nnmm'

var obj = {
  name: 'name1',
  func: () => {    //不推荐这样的方式(使用对象字面量的时候,最好不要在其定义的方法里使用箭头函数)
    console.log(this.name)
  },
  func1: function (){
    console.log(this.name)
  },
  son: {
    name: 'name-son',
    func: function(){
      console.log(this.name)
    },
    func1: ()=>{
      console.log(this.name)
    }
  }
}
obj.func()
obj.func1()
obj.son.func()
obj.son.func1()

obj.func为箭头函数,定义它的this为外层上下文的this,即为window(global)。

var obj1={
  num:4,
  fn:function(){
    var f=() => {
      console.log("hello----->",this);  //此处的this取决与外层代码fn函数的执行环境
      setTimeout(() => {
        console.log("world----->",this); //此处的this取决与外层代码fn函数的执行环境
      });
    }
    f();
  }
}
obj1.fn();
var f = obj1.fn;
f();

理解es6 中 arrow function的this的更多相关文章

  1. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

  2. [ES6] 06. Arrow Function =>

    ES6 arrow function is somehow like CoffeeScirpt. CoffeeScript: //function call coffee = -> coffee ...

  3. 理解ES6中的Iterator

    一.为什么使用Iterator 我们知道,在ES6中新增了很多的特性,包括Map,Set等新的数据结构,算上数组和对象已经有四种数据集合了,就像数组可以使用forEach,对象可以使用for...in ...

  4. 理解ES6中的Symbol

    一.为什么ES6引入Symbol 有时候我们在项目开发的过程中可能会遇到这样的问题,我写了一个对象,而另外的同时则在这个对象里面添加了一个属性或是方法,倘若添加的这个属性或是方法是原本的对象中本来就有 ...

  5. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

  6. 深入理解 ES6中的 Reflect

    阅读目录 一:Reflect.get(target, name, receiver) 二:Reflect.set(target,name,value,receiver) 三:Reflect.apply ...

  7. 理解ES6中的Promise

    一.Promise的作用 在ajax请求数据的过程中,我们可以异步拿到我们想要的数据,然后在回调中做相应的数据处理. 这样做看上去并没有什么麻烦,但是如果这个时候,我们还需要做另外一个ajax请求,这 ...

  8. 深入理解javascript中的Function.prototye.bind

    函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this上下文的时候,你真正需要的其 ...

  9. 理解javascript中的Function.prototype.bind

    在初学Javascript时,我们也许不需要担心函数绑定的问题,但是当我们需要在另一个函数中保持上下文对象this时,就会遇到相应的问题了,我见过很多人处理这种问题都是先将this赋值给一个变量(比如 ...

随机推荐

  1. JS遍历数组的操作(map、forEach、filter等)

    1.map的用法 定义:原数组被“映射”成对应新数组 代码示例: var users = [ {name: "张含韵", "email": "zhan ...

  2. Codeforces 544E K Balanced Teams (DP)

    题目: You are a coach at your local university. There are nn students under your supervision, the prog ...

  3. .Net Core ----通过XUnit进行接口单元测试(带请求头及参数)并用output输出结果

    最近在做core的接口单元测试,所以在这拿出来分享一下,添加XUnit的nuget包 话不多说,直接上代码了: 输出结果(需要的命名空间using Xunit.Abstractions;): ITes ...

  4. ApowerMirror投屏(手机投屏电脑、电脑投屏到手机)

    使用步骤    1. 亲测 使用Apowersoft ApowerMirror v1.4.2.zip版本      2.Apowersoft ApowerMirror v1.4.2.zip 解压安装 ...

  5. @Autowired mapper 层次 bean 带红线

    在利用@Autowired 注解创建bean 时候 有时间会带有下滑红色横线 给人一种报错的感觉 下面是去除红线的办法 将颜色红色error 等级降低为黄色warn  即可

  6. unity 如何在botton AddListen中传递参数调用函数

    使用Deleget方法包含该函数即可. levelItem.GetComponent<Toggle().onValueChanged.AddListener(SetSelectedLevel(l ...

  7. Nginx TLS SNI 不同域名多443转发

    依赖 yum -y install pcre-devel openssl openssl-devel library 编译: mkdir /data/nginx/ -p ./configure --p ...

  8. Java Mybatis实现主从同步

    import org.springframework.jdbc.datasource.lookup.AbstractRoutingDataSource; public class DynamicDat ...

  9. 利用Graphviz绘制逻辑关系依赖图

    说明:在很多情况下,需要将复杂且有些规律的代码整理成逻辑片段,这个时候就需要画图,很多时候图比代码更加直观 Graphviz是一个比较好的绘图工具,可以通过简单的代码绘制出复杂的逻辑图,且其代码就像平 ...

  10. 一步步建立 Vue + Cesium 初始化项目

    一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...