函数的扩展——箭头函数this的使用
箭头函数中的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的使用的更多相关文章
- 关于ES6-{块级作用域 let const 解构赋值 数组 字符串 函数的扩展 箭头函数}
关于ES6 块级作用域 任何一对花括号({})中的语句集都属于一个块,在块中声明的变量在代码块外都是不可访问的,称之为块级作用域,ES5以前没有块级作用域 let let 是ES6新增的声明变量的一种 ...
- ES6扩展——箭头函数
1.箭头函数 在es6中,单一参数的单行箭头函数语法结构可以总结如下: const 函数名 = 传入的参数 => 函数返回的内容,因此针对于 const pop = arr => arr. ...
- JavaScript的函数申明、函数表达式、箭头函数
JavaScript中的函数可以通过几种方式创建,如下. // 函数声明 function getName() { return 'Michael' } // 函数表达式 const getName ...
- js中箭头函数 及 针对箭头函数this指向问题引出的单体模式
ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数, ...
- react 中 函数bind 和箭头函数
用bind形式 方便测试,含有this时候最好用bind形 其他情况用箭头函数 含有this的时候也可以用箭头函数
- ES6 - Note3:数组、对象与函数的扩展
一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,leng ...
- ES6 入门系列 - 函数的扩展
1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...
- ES6入门之函数的扩展
函数js原有的: 属性:arguments[].caller(调用该函数的引用,注意与callee分别开,callee指的是调用函数本身经常在递归中出现).length(形参个数).prototype ...
- ES5-ES6-ES7_函数的扩展
call()/apply()/bind()的用法 Function.prototype.bind(obj) :将函数内的this绑定为obj, 并将函数返回 function foo() { cons ...
随机推荐
- 【ZJOI2007】捉迷藏 小小的总结
2019-01-09 22:56:33 终于终于把这道题目做掉了... 做了两个晚上..不知道为什么自己如此之笨.. 在洛谷上断断续续一共交了24次,感觉自己都要被封号了. 昨天花半个晚上从零开始研究 ...
- left join on 和where条件的放置(转)
http://blog.csdn.net/muxiaoshan/article/details/7617533
- 如何在JMeter中使用ForEach控制器
Jmeter中的ForEach Controller遍历变量数组. 在这个JMeter教程中,我们将使用ForEach控制器循环访问JSON数组. 有时我们需要解析响应并提取某些信息.例如,在测试AP ...
- 【Sass初级】嵌套选择器规则
在CSS中,我们都知道所有代码都在一个“根级别”的选择器中,每个CSS的样式声明都写嵌套的话,那意客味需要写很多的代码. 今天我要带领大家进入到Sass的最基本原则中.这就是所谓的“基础规则(Ince ...
- 关系型数据库---MySQL---数据库设计三大范式
1.第一范式: 1.1.1 数据表的每个数据列具有原子性: 1.1.2 同一个数据表中内容相似的数据列必须消除: 2.第二范式: 第一范式的基础上,每个数据表只描述一件事: 3.第三范式: 第二范式的 ...
- Shell分割字符得到数组
#!/bin/bash p=$(hadoop fs -ls /tgl/data |awk '{print $8}') #要将$a分割开,先存储旧的分隔符 OLD_IFS="$IFS" ...
- 在东京生活的中国IT程序员
应之前文章的博友邀请,我来开一篇在日本东京生活的中国IT程序员自谈,文中的讨论对象多为我自己或者是我的中国人(前)同事,有以偏概全之处还请包涵. 首先,我之前说日本的IT并不发达,不发达到什么程度呢? ...
- WPF 动态加载主题由zip
经典主题的方式 主题战略 加载速度 本机支持 (不需要额外的代码) 支持代码为主题 (捆绑代码 & 资源成单独的文件) 支持资源层次结构中导航 动态加载 动态卸载 轻松地编辑和编译 (不需要安 ...
- MVC的viewPage 通用属性运用。
试想下在MVC的前端页面JS或者html中需要使用多语言,而后端的多语言是维护在资源文件中的,前端如果使用的话需要使用AJAX频繁的获取,一个页面中可能会存在大量的需要语言转换的地方,频繁使用AJAX ...
- 使用 swift3.0高仿新浪微博
项目地址:https://github.com/SummerHH/swift3.0WeBo 使用 swift3.0 高仿微博,目前以实现的功能有,添加访客视图,用户信息授权,首页数据展示(支持正文中连 ...