关于ES6 用箭头函数后的 this 指向问题
最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了,
中间自然离不开 () => { console.log(‘箭头函数的this是指向哪的问题’)};
var obj2 = {
id: 2333,
test: () => console.log(this)
}
obj2.test();//window
obj2.test.call(obj2);//window
那么我要这里 test函数的this 指向 obj2 是要怎么做呢
来分析下上面代码, 转换成 ES5 写法的this指向:
var obj2 = {}; // window.obj2 = {};
obj2.id = 2333; // window.obj2 = { id: 2333; }
var _this = this;
obj2.test = function(){console.log(_this);}
用箭头函数时, this是指向 最初定义变量时的this, 即 window.obj2 的 window
改一下, 变得很复杂了
var obj2 = {
id: 2333,
test: function(){
(()=>{
console.log(this)
})()
}
}
obj2.test();//obj2
obj2.test.call(obj2);//obj2
其实还有一种写法:
function Obj(){
this.id = 2333;
this.test = () => console.log(this);
}
var obj2 = new Obj();
**************************************************
总结:
1. 箭头函数的this不能用call()或者apply()进行绑定
2. 箭头函数的 this 永远指向该函数构造时的环境。
... 现在还没再nodeJs环境中 用箭头函数, 只知道 浏览器的顶级对象是 window, node环境是 global , 后面深入学习node之后再总结..
关于ES6 用箭头函数后的 this 指向问题的更多相关文章
- 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题
首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数 函数 ...
- ES6扩展——箭头函数
1.箭头函数 在es6中,单一参数的单行箭头函数语法结构可以总结如下: const 函数名 = 传入的参数 => 函数返回的内容,因此针对于 const pop = arr => arr. ...
- ES6学习--箭头函数
1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...
- ES6中箭头函数的作用
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
- 初步探究ES6之箭头函数
今天要介绍的是ES6中的箭头函数. 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression ...
- ES6 箭头函数下的this指向和普通函数的this对比
首先在网上摘抄借鉴了一段代码, 然后再这段代码里面进行分析,通过比较ES6的箭头函数和普通函数的this指指向, 分析其中的不同之处.下面就是代码片段var name = "window&q ...
- Es6中箭头函数与普通函数的区别
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...
- es6的箭头函数和es5的function函数区别
一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...
- es6的箭头函数
1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 ( )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...
随机推荐
- struts中用kindeditor实现的图片上传并且显示在页面上
做公司网站的时候由于需要在内容属性中加入图片,所以就有了这个问题,本来一开始找几篇文章看都是讲修改kindeditor/jsp/file_manager_json.jsp和upload_json.js ...
- 关于keil5使用注意事项(预定义、路径包含)
2017.12.17 下午 终于在不用keil5自带添加库的基础上0 error的新建了一个工程.磕磕绊绊搞了快一个下午,各种小问题搞到崩溃. 首先是库文件添加路径的问题 ,只要是你工程中用到的头文 ...
- Mysql Index extends优化
Innodb通过自动把主键列添加到每个二级索引来扩展它们: CREATE TABLE t1 ( i1 , i2 , d DATE DEFAULT NULL, PRIMARY KEY (i1, i2), ...
- JAVA正则表达式 Pattern和Matcher
java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 1.简介: java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. ...
- 如何使用mysql命令行
现在向大家介绍mysql命令行下,从数据库的建立到表数据的删除全过程,希望对网友有所帮助 方法/步骤 1.登陆mysql 打cmd命令终端,如果已经添加了mysql的环境变量,可以直接使用命令 mys ...
- 2.supervisor实时监控程序存活状态
1.supervisor是一款python开发的一个client/server服务,是一款进程管理工具,支持linux/unix系统,但是不支持windows系统. 它可以很方便的监听.启动.停止.重 ...
- Selenium自动化测试脚本中三种等待时间简介
为了提高脚本的稳定性,我们需要在脚本中增加等待时间 第一种:强制等待 Thread.sleep():固定休眠时间设置,Java的Thread类里提供了休眠方法sleep,导入包后就能使用 sleep( ...
- 深入浅出docker
笔者在海外工作多年,所以文中多用英文单词,有些时候是为了更精准的描述,请见谅.希望这篇随笔能帮大家入门docker.由于在海外连博客园有些慢,所以我图片用的比较少,以后再考虑一下如何更好的解决图片上传 ...
- 第二章 在HTML中使用JS
script 标签 属性 src : 可选 包含要执行的外部文件 type : 表示编写代码使用的脚本语言的内容类型(MINI类型) text/javascript async: 可选 只对外部脚 ...
- Android: 工具使用备忘
Gradle Gradle本地路径设置 如果在AndroidStudio内设置了使用local的Gradle路径,就直接放那边,啥问题都不会有.如果使用推荐的设置,那么更新的时候很有可能会有问题. 在 ...