React:JS中的this和箭头函数
JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控制台的输出):
//在控制台先输入这个函数,
function Person(){
this.age = 0;
setInterval(function growUp() {
//此时的this时指向window,并不指向上面的this.age
this.age++;
},1000)
} >var p = new Person()
>p
//因为this时指向window,并不指向上面的this.age,所以没有变
<Person {age: 0}
//age是全局变量,没有给初始值,++后就变成Not a Number
>age
NaN
//给age赋初值,下面就开始++le
age = 0
0
age
5
age
8
age
10
age
14
age
16
以前流行的一种解决方法
//在控制台先输入这个函数,
function Person(){
//定义一个局部变量把当前的this放在里面,下面函数就可以使用了
let that = this;
this.age = 0;
setInterval(function growUp() {
//此时的this时指向window,并不指向上面的this.age
that.age++;
},1000)
}
//一切正常
>let p = new Person();
>p
<Person {age: 0}
>p
<Person {age: 1}
>p
<Person {age: 2}
>p
<Person {age: 3}
只有这一种解决方法?这时候箭头函数该登场了,箭头函数不会创建自己的this
;它使用封闭执行上下文的this
值。因此,在下面的代码中,传递给setInterval
的函数内的this
与封闭函数中的this
值相同,简单来说,箭头函数没有自带this,他的this是来自上一级,所以刚刚好解决这个问题:
function Person(){
this.age = 0; setInterval(() => {
this.age++; // |this| 正确地指向person 对象
}, 1000);
}
undefined
>let p = new Person();
<undefined
>p
<Person {age: 1}
>p
<Person {age: 2}
>p
<Person {age: 3}
我们再看写栗子:
function f(){console.log(this.a)}
>f()
<undefined
//此时call传入参数,这个参数可以理解为this,但对this不造成影响
>f.call({a:1})
<1
>f.apply({a:1})
<1
还有个要记的,当箭头函数要返回一个对象时,{}要用小括号括起来,比如:f = () => ({}) ,大括号表示一个对象
更多箭头函数例子:API
React:JS中的this和箭头函数的更多相关文章
- 在react jsx中,为什么使用箭头函数和bind容易出现问题
在之前的文章中,已经说明如何避免在react jsx中使用箭头函数和bind(https://medium.freecodecamp.o... 但是没有提供一个清晰的demo展示为什么要这样做. 现在 ...
- js中的this和箭头函数中的this
一.ES6 允许使用"箭头"(=>)定义函数. // var f = v => v;// 上面的箭头函数等同于: // var f = function(v) {// ...
- js中this指向、箭头函数
普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = ne ...
- 如何优雅地在React中处理事件响应&&React绑定onClick为什么要用箭头函数?
React绑定onClick为什么要用箭头函数? https://segmentfault.com/q/1010000010918131 如何优雅地在React中处理事件响应 https://segm ...
- 深入理解 React JS 中的 setState
此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...
- 从源码的角度看 React JS 中批量更新 State 的策略(下)
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...
- 从源码的角度看 React JS 中批量更新 State 的策略(上)
在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步 ...
- 从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
- JS中的日期内置函数
用JS中的日期内置函数实现在页面显示:“今天是:2013年9月26日14:32:45”. var date=new Date(Date.parse('9/26/2013 14:32:45')); ...
随机推荐
- AngularJS 指令实践指南(一)
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令.这篇教程会为你讲述如何自定义指令,以及介绍如何在 ...
- jmeter登录之-动态参数
jmeter登录之-动态参数 1.抓包查看提交的登录参数 发现参数authenticity_token是动态的,每次都不一样,所以回放的时候就会失败 2.提取动态变化的参数-后置处理器(相当于LR的关 ...
- (转)OS: 生产者消费者问题(多进程+共享内存+信号量)
转:http://blog.csdn.net/yaozhiyi/article/details/7561759 一. 引子 时隔一年再次用到 cout 的时候,哥潸然泪下,这是一种久别重逢的感动,虽然 ...
- C#中的this关键字
C# this关键字的四种用法 - 天碼行空 - 博客园 https://www.cnblogs.com/jh007/p/6120654.html C#中this关键字详解 - lin37985的专栏 ...
- PAT_A1092#To Buy or Not to Buy
Source: PAT A1092 To Buy or Not to Buy (20 分) Description: Eva would like to make a string of beads ...
- 【node】---token的原理及使用---【alley】
一.登陆的验证流程 当用户请求登录的时候,如果没有问题,我们在服务端生成一条记录,这个记录里可以说明一下登录的用户是谁,然后把这条记录的 ID 号发送给客户端,客户端收到以后把这个 ID 号存储在 C ...
- Haproxy负载均衡/动静分离(haproxy各选项详细解释)
在前端领域做负载均衡,动静分离的程序有很多,比较常用的是nginx和Haproxy,今天就说一下 Haproxy在这两方面的表现,文章参考很多网文写成,再加上自己的实验成果,文中所有解释都经过实际环境 ...
- C#WinForm 窗体回车替换Tab
/// <summary> /// 回车切换控件 /// </summary> /// <param name="sender"></pa ...
- python库argparse中type的新奇指定方法
最近在看一些项目的源码,总是能学到好多东西. 关于arparse中type的类型指定 不止可以指定常规类型,还可以加一些自己类型判断,具体用法如下(来源): def str2bool(v): &quo ...
- 2018湘潭大学程序设计竞赛【E】
题目链接:https://www.nowcoder.com/acm/contest/105/E 题意:给你美食种类和查询次数,告诉你美味度和价格,给你固定钱数,问你最多能吃到多少美味度的食物.(X真是 ...