最近写完小程序后, 开始学习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 指向问题的更多相关文章

  1. 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题

    首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数 ...

  2. ES6扩展——箭头函数

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

  3. ES6学习--箭头函数

    1. 箭头函数基本形式 let func = (num) => num; let func = () => num; let sum = (num1,num2) => num1 + ...

  4. ES6中箭头函数的作用

    我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...

  5. 初步探究ES6之箭头函数

    今天要介绍的是ES6中的箭头函数. 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression ...

  6. ES6 箭头函数下的this指向和普通函数的this对比

    首先在网上摘抄借鉴了一段代码, 然后再这段代码里面进行分析,通过比较ES6的箭头函数和普通函数的this指指向, 分析其中的不同之处.下面就是代码片段var name = "window&q ...

  7. Es6中箭头函数与普通函数的区别

    Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...

  8. es6的箭头函数和es5的function函数区别

    一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...

  9. es6的箭头函数

    1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 (  )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...

随机推荐

  1. Spark环境搭建(下)——Spark安装

    1. 下载Spark 1.1 官网下载Spark http://spark.apache.org/downloads.html 打开上述链接,进入到下图,点击红框下载Spark-2.2.0-bin-h ...

  2. c#中winform窗口的隐藏与显示

    最近在做一个C# 的winform客户端程序,要实现在打开新的窗口时将原来打开的窗口关闭,但是想在关闭新打开的窗口是将原来的那个窗口再次打开,在网上查找各种资料,找了很多代码,都是通过窗口.Hide( ...

  3. 基于TypeScript装饰器定义Express RESTful 服务

    前言 本文主要讲解如何使用TypeScript装饰器定义Express路由.文中出现的代码经过简化不能直接运行,完整代码的请戳:https://github.com/WinfredWang/expre ...

  4. 任务驱动 搭建SSM开发环境

    本篇主要阐述(IntelliJ IDEA + Maven + Spring + Spring MVC + Mybatis)搭建 为什么想要搭建ssm? 近期正好自己有一个小的点子要实现,恰好这学期开了 ...

  5. SQL语句整理1

    THEN '月卡' THEN '周卡' THEN '季度卡' THEN '年卡' ELSE '未知卡类型' END AS '卡类型' FROM SL_Register_Info Left join用法 ...

  6. PLSQL 注册码

    注册码:Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769 password:xs374ca 本人版本 Versio ...

  7. dedecms====phpcms 区别==[工作]

    {template "content","header"}{dede:include filename="head.htm"/} ----- ...

  8. Codeforces 900C Remove Extra One 模拟

    题目链接:900C Remove Extra One 题意: 首先record是指这个数比数列前面的所有数都大,给了n个数(1-n),删掉一个数,让整个数列的record值达到最大. 题解: 刚开始我 ...

  9. 谷歌扩展程序设置ajax请求允许跨域(极少人知道的解决方案)

    前言: 跨域问题一直是个老生常谈的问题,在实际开发过程中,跨域的问题常常会让开发者非常的头疼. 常用的几种跨域解决方案: 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Lev ...

  10. javascript函数之arguments

    function foo(x,y,z){ console.info (arguments.length); //2 实际的参数个数 console.info(arguments[0]); //传入的第 ...