箭头函数相当于定义时候,普通函数.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. Python爬虫从入门到进阶(1)之Python概述及爬虫入门

    一.Python 概述 1.计算机语言概述 (1).语言:交流的工具,沟通的媒介 (2).计算机语言:人跟计算机交流的工具 (3).Python是计算机语言的一种 2.Python编程语言 代码:人类 ...

  2. AWK如何打印从某一列到最后一列的内容

    awk -F " "  '{for (i=4;i<=NF;i++)printf("%s ", $i);print ""}' file

  3. [加密解密]CryptoAPI简介

    CryptoAPI概述 Windows CryptoAPI是Microsoft 公司提出的安全加密应用服务框架,也是PKI推荐使用的加密 API.它提供了在Win32 环境下使用认证.编码.加密和签名 ...

  4. ubuntu 16.04扩充root 分区

    ubuntu使用过程中,提示root分区剩余空间不足,剩余200多M时还可以进行一些操作,剩余几M时拷贝等命令都不能够执行. 扩充root分区步骤如下: 1.查看root分区所在位置: 命令: sud ...

  5. zabbix批量监控域名下nginx的访问50x状态码数量

    背景: 购物车相关的站点某些页面经常出现502,如果超过一些阈值则需要报警给管理员知道 .自动发现脚本的编写 # vim /usr/local/zabbix_agents_3.2.0/scripts/ ...

  6. JDBC连接MariaDB:数据传输加密

    环境:win7+springboot+mybatis+mariadb 需求说明: 未做安全加固前用wireshark抓包: 可以很明显看到用户名.数据库和 SQL,这种情况是有安全风险的. 1.下载o ...

  7. Django学习笔记(http协议与django安装)

    Django入门 HTTP协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于万维网(WWW:World Wide Web )服务器与本地浏览器 ...

  8. 网络抓包教程之tcpdump

    现在的移动端应用几乎都会通过网络请求来和服务器交互,通过抓包来诊断和网络相关的bug是程序员的重要技能之一.抓包的手段有很多:针对http和https可以使用Charles设置代理来做,对于更广泛的协 ...

  9. Java集合图谱

    比较 是否有序 是否允许元素重复 Collection 否 是 List 是 是 Set AbstractSet 否 否 HashSet TreeSet 是(用二叉排序树) Map AbstractM ...

  10. 如何解决 kubernetes 重启后,启来不来的问题

    参考了 https://blog.csdn.net/nklinsirui/article/details/80855415 最近在调研 kubeneter ,准备把线上的服务器架构再调整下,然后模拟各 ...