箭头函数中的this指向的是定义时的this,而不是执行时的的this 。

  举例:

  

案例中,我们的obj对象中有一个属性x和一个属性show( )方法,show( )通过this打印出x的值,结果是undefined。这是为什么呢?难道x的值不是100吗?

  没错,x的值确实是100,但问题出在了this上,当代码执行到了setTimeout( )的时候,此时的this已经变成了window对象(setTimeout( )是window对象的方法),已经不再是obj对象了,所以我们用this.x获取的时候,获取的不是obj.x的值,而是window.x的值,再加上window上没有定义属性x,所以得到的结果就是:undefined。

            箭头函数闪亮登场

  

同样的一段代码,唯一的不同就是setTimeout中,原本的匿名函数用箭头函数代替了,你可以往上翻,对比着看两段代码的不同之处。此外,最大的不同的是打印结果,用箭头函数编写的这段代码,成功地打印出了我们想要的结果:100。

        为什么会这样?正如本文开头说的那样:箭头函数中的this指向的是定义时的this,而不是执行时的this

   当定义obj的show( )方法的时候,我们在箭头函数编写this.x,此时的this是指的obj,所以this.x指的是obj.x。而在show()被调用的时候,this依然指向的是被定义时候所指向的对象,也就是obj对象,故打印出:100。

总结 :箭头函数的this指向的是定义时的this对象,而不是执行时的this对象。

函数的扩展——箭头函数this的使用的更多相关文章

  1. 关于ES6-{块级作用域 let const 解构赋值 数组 字符串 函数的扩展 箭头函数}

    关于ES6 块级作用域 任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域 let let 是ES6新增的声明变量的一种 ...

  2. ES6扩展——箭头函数

    1.箭头函数 在es6中,单一参数的单行箭头函数语法结构可以总结如下: const 函数名 = 传入的参数 => 函数返回的内容,因此针对于 const pop = arr => arr. ...

  3. JavaScript的函数申明、函数表达式、箭头函数

    JavaScript中的函数可以通过几种方式创建,如下. // 函数声明 function getName() { return 'Michael' } // 函数表达式 const getName ...

  4. js中箭头函数 及 针对箭头函数this指向问题引出的单体模式

    ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...

  5. react 中 函数bind 和箭头函数

    用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数

  6. ES6 - Note3:数组、对象与函数的扩展

    一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,leng ...

  7. ES6 入门系列 - 函数的扩展

    1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...

  8. ES6入门之函数的扩展

    函数js原有的: 属性:arguments[].caller(调用该函数的引用,注意与callee分别开,callee指的是调用函数本身经常在递归中出现).length(形参个数).prototype ...

  9. ES5-ES6-ES7_函数的扩展

    call()/apply()/bind()的用法 Function.prototype.bind(obj) :将函数内的this绑定为obj, 并将函数返回 function foo() { cons ...

随机推荐

  1. SpringBoot进阶教程(五十九)整合Codis

    上一篇博文<详解Codis安装与部署>中,详细介绍了codis的安装与部署,这篇文章主要介绍介绍springboot整合codis.如果之前看过<SpringBoot进阶教程(五十二 ...

  2. python 扩展注册功能装饰器举例

    db_path='db.txt'def get_uname(): while True: uname=input('请输入用户名:').strip() if uname.isalpha(): with ...

  3. Nginx 最新版源码编译安装 包含常用模块作用及所需依赖

    第一部分 Nginx最新版源码编译安装 1. 使用的模块 模块1:http_rewrite_module 基于正则匹配来实现重定向.依赖PCRE库,见依赖1 模块2:http_gzip_module ...

  4. Codeforces Round #565 (Div. 3) C. Lose it!

    链接: https://codeforces.com/contest/1176/problem/C 题意: You are given an array a consisting of n integ ...

  5. Codeforces Round #563 (Div. 2) A. Ehab Fails to Be Thanos

    链接:https://codeforces.com/contest/1174/problem/A 题意: You're given an array aa of length 2n2n. Is it ...

  6. 072 Edit Distance 编辑距离

    给出两个单词 word1 和 word2,找出将 word1 转换成 word2 所使用的最少的步骤数 (每个操作记为一步).你可以对一个单词进行以下三种操作:a) 插入一个字符b) 删除一个字符c) ...

  7. 开源分布式Job系统,调度与业务分离-如何创建周期性的HttpJob任务

    项目介绍: Hangfire:是一个开源的job调度系统,支持分布式JOB!! Hangfire.HttpJob 是我针对Hangfire开发的一个组件,该组件和Hangfire本身是独立的.可以独立 ...

  8. springboot+shiro+cas实现单点登录之cas server搭建

    CAS是YALE大学发起的一个开源项目,旨在为web应用系统提供一种可靠的单点登录方法.它主要分为client和server端,server端负责对用户的认证工作,client端负责处理对客户端受保护 ...

  9. form-data、x-www-form-urlencoded、raw、binary的区别

    1.form-data: 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件时 ...

  10. 就来推荐一本2018年研究的Web书《移动Web前端高效开发实战》

    一线互联网公司Web前端团队实战经验总结,涵盖移动Web前端开发各个关键技术环节,包括移动开发核心技术.常用布局方案.MV*类新时代框架.预编译技术.性能优化.开发调试.混合式应用.单元测试.工程化等