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')); ...
随机推荐
- delphi基础篇之数据类型之一:1.简单类型(Simple)
1.简单类型(Simple) 简单类型包括实数类型(Real)和有序类型(Ordinal).有序类型又包括整数类型.字符类型.布尔类型.枚举类型和子界类型等. 1-1.有序类型 有序类型是一个有序数的 ...
- unzip失败,unzip:报错End-of-central-directory signature not found、scp:报错no space left on device
文章目录 问题 解决 拓展 问题 通过rz命令传本地文件到本地服务器,失败. 通过scp命令尝试报错: no space left on device 意思是目的机器内存不够用了,但是传过去了,但是没 ...
- 7、Appium常用API
嗯,官网已经介绍的很全了.会选几个常用API后期整理. Appium常用API地址:http://appium.io/docs/cn/writing-running-appium/appium-bin ...
- PAT_A1012#The Best Rank
Source: PAT A1012 The Best Rank (25 分) Description: To evaluate the performance of our first year CS ...
- playbackRate控制音频播放倍速
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 剑指offer——71扑克牌中的顺子
题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...
- next()nextLine()以及nextInt()的区别及用法【转载】
next().nextLine().nextInt()作为scanner内置的方法,常常让人傻傻分不清楚,今天在这里记下他们的区别以及以此区别为出发点的用法:他们的区别在于对于空格的处理方式不同,以及 ...
- 第十五章 例行性工作(crontab)--循环执行的例行性工作调度 crontab(定时任务)
循环执行的例行性工作调度 crontab(定时任务) 15.1 例行性工作调度 不考虑硬件与服务器的链接状态,Linux帮助提醒很多任务. Linux例行性工作是如何进行调度的? Linux调度就是通 ...
- 高程(三)--- Date
Date类型使用UTC(国际协调时间)1970年1月1日0时0分始到现在的毫秒数来保存日期的. 所以当我们知道毫秒数时,还需要通过计算才能获取年月日时分秒. 一.获取时间对象 Date提供了2个方法: ...
- 49-Ubuntu-其他命令-1-文件软链接
序号 命令 作用 01 ln -s 被链接的原文件 链接文件 建立文件的软链接,用通俗的方式讲类似于Windows下的快捷方式 注意: 没有-s选项建立的是一个硬链接文件--->>两个文件 ...