箭头函数相当于定义时候,普通函数.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. JSON 之 SuperObject(11): TSuperTableString、TSuperAvlEntry

    JSON 之 SuperObject(11): TSuperTableString.TSuperAvlEntry - 万一 - 博客园http://www.cnblogs.com/del/archiv ...

  2. 设计模式一: 单例模式(Singleton)

    简介 单例模式是属于创建型模式的一种(另外两种分别是结构型模式,行为型模式).是设计模式中最为简单的一种. 英文单词Singleton的数学含义是"有且仅有一个元素的集合". 从实 ...

  3. scikit-learn 决策树 分类问题

    1.Demo from sklearn import tree import pydotplus import numpy as np #李航p59表数据 #年龄,有工作,有自己房子,信贷情况,类别 ...

  4. java应用的优化【转】

    XX银行网银系统是一套全新的对公业务渠道类系统,经过两年的建设,将逐步对外提供服务. 该系统融合了原来多个对公渠道系统,并发量是以前多个系统之和,吞吐量要求将大幅上升.为了使广大对公客户使用系统时获得 ...

  5. POJ1321 棋盘问题(简单搜索)

    题意: 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子的所有可行的摆放 ...

  6. 《剑指offer》把数组排成最小的数

    本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:

  7. [原创]基于Zynq Linux环境搭建(三)

    此篇编译Kernel 解压: [#17#17:26:56 FPGADeveloper@ubuntu ~/Zybo_Demo]$tar zxvf *.tar.gz 进入到文件kernel文件夹中,cle ...

  8. spring boot 启动

    启动spring boot java -jar tuia-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod 查找进程 ps aux|grep tuia- ...

  9. ajax的xmlHttpRequest异步请求和Springmvc的sendRedirect失效问题

    参考: Ext 提交表单用的异步提交Ajax.Ajax在发送请求时后台返回的数据(json或者html页面)在其回调函数中处理.  你这个相当于后台把Center_right.jsp页面已经返回给前台 ...

  10. bzoj 4842 [Neerc2016]Delight for a Cat 最小费用最大流,线性规划

    题意:有n个小时,对于第i个小时,睡觉的愉悦值为si,打隔膜的愉悦值为ei,同时对于任意一段连续的k小时,必须至少有t1时间在睡觉,t2时间在打隔膜.如果要获得的愉悦值尽 量大,求最大的愉悦值和睡觉还 ...