之前在看《React 学习之道》中文版的时候,下面的例子执行报错,
import React, { Component } from 'react';
import './App.css';
const list = [
{
title: 'React',
url: 'https://facebook.github.io/react/',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0
},
{
title: 'Redux',
url: 'https://github.com/reactjs/redux',
author: 'Dan Abramov, Andrew Clark',
num_comments: 2,
points: 5,
objectID: 1
},
];
class App extends Component {
constructor(prop){
super(prop);
this.state={
list:list
};
this.onDismiss = this.onDismiss.bind(this);
}
onDismiss(id){
const updateList = this.state.list.filter(item=>{return item.objectID !== id;});
this.setState({list:updateList});
}
render() {
return (
{
this.state.list.map(function(item){
return (
);
})
}
);
}
}
export default App;
react完全是菜鸟,比较了下,书里面写的是this.state.list.map(item =>{}) 而我的代码里是this.state.list.map(function(item){});
原来后面的方式,this.onDismiss 中this的上下文是map()函数,函数里面当然没有onDismiss的定义了,应该用第一种箭头函数的定义方式,这样this.onDismiss的this就是这个类了,可以找到onDismiss了。还是javascript的基础不扎实啊。
转下别人的说明:
普通函数中的this:
1. this总是代表它的直接调用者, 例如 obj.func , 那么func中的this就是obj
2.在默认情况,没找到直接调用者, 则this指的是 window
3.在严格模式下,没有直接调用者的函数中的this是 undefined
4.使用call,apply, bind(ES5新增)绑定的, this指的是 绑定的对象
普通函数中的this:
1. this总是代表它的直接调用者, 例如 obj.func , 那么func中的this就是obj
2.在默认情况,没找到直接调用者, 则this指的是 window
3.在严格模式下,没有直接调用者的函数中的this是 undefined
4.使用call,apply, bind(ES5新增)绑定的, this指的是 绑定的对象
箭头函数中的this
1. 默认指向在定义时作用域, 它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window(即继承父级的this);
下面通过一些例子来研究一下 this的一些使用场景
原因:箭头函数不会自动绑定局部变量,如this,arguments,super(ES6),new.target(ES6)等
所以箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用
---------------------
作者:天蒙蒙亮
来源:CSDN
原文:https://blog.csdn.net/qq_38719039/article/details/80925240
版权声明:本文为博主原创文章,转载请附上博文链接!