函数的扩展——箭头函数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 ...
随机推荐
- 原生js 的ajax封装
/** * 封装ajax函数(包括跨域) * @method ajax * @param option :{type:"post" or "get" 请求方式, ...
- IT兄弟连 JavaWeb教程 异步请求对象的API
Ajax的核心是XMLHttpRequest对象(xhr),xhr为向服务器发送请求和解析服务器响应提供了接口,能够以异步的方式从服务器获取新数据. xhr的主要方法有: ● void open(S ...
- 剑指Offer的学习笔记(C#篇)-- 序列化二叉树
题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 一 . 理解题意 二叉树的序列化,是将一个结构化的东西变成扁平化的字符串,序列化二叉树或者是反序列化二叉树就是二叉树和扩展二叉树遍历序列之间的 ...
- Python-13-pass,del和exec
1.pass就是什么都不做 >>> pass >>> 2. 对于你不再使用的对象, Python通常会将其删除(因为没有任何变量或数据结构成员指向它) . &g ...
- [題解](函數下整點個數?)luogu_P4132_BZOJ_2659_算不出的等式
兩個都是一次函數,下取整就是整點個數,兩個函數k剛好成倒數,所以最後發現會組合成一個矩形 (為啥要考慮重複與否的問題???) 然而這樣會不會重複計算點數呢 我們發現因為取的是圖像下的整數點 所以要想重 ...
- Django之ORM跨表操作
Django之ORM表查询及添加记录 一.创建表 - 书籍模型: 书籍有书名和出版日期,一本书可能会有多个作者,一个作者也可以写多本书,所以作者和书籍的关系就是多对多的关联关系(many-to-man ...
- Main函数中的参数argc,argv的使用简单解析
本篇文章是对Main函数中的参数argc,argv的使用进行了简单的分析介绍,需要的朋友参考下: C/C++语言中的main函数,经常带有参数argc,argv,如下: int main(int a ...
- 洛谷-P3927 SAC E#1 - 一道中档题 Factorial
原址 题目背景 数据已修改 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢阶乘.而SOL菌很喜欢研究进制. 这一天,SOL君跟SOL菌炫技,随口算出了n的阶乘. ...
- 牛客NOIP提高组(二)题解
心路历程 预计得分:100 + 40 + 30 = 170 实际得分:100 + 30 + 0 = 130 T2有一个部分分的数组没开够RE了. T3好像是思路有点小问题.. 思路没问题,实现的时候一 ...
- 访问权限修饰符-static-final-this-super-匿名对象
1.this关键字的作用 1)调用本类中的属性; 2)调用本类中的构造方法;且只能放首行,且必须留一个构造方法作为出口,即不能递归调用 3)表示当前对象; 2.匿名对象 ...