文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. class原型
    2. 2.2. 解决办法

Defined

最常见的问题是关于onClick内为什么普通的调用this会出现undefined.
复现:

1
2
3
4
5
6
7
8
9
class Test extend Component {
clickMe() {
console.log(this);
}

render(
<button type="button" onclick={this.clickMe}>Click Me</button>
)
}

Main()

class原型

从原因说起, ES6的class原型是以function和原型链的设计模式制作的.
以下为例子:

[email protected]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//  ES6
class User {
constructor(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
fullName() {
return `${this.firstName} ${this.lastName}`
}
}

let user = new User('David', 'Chen')
user.fullName() // David Chen
// 以上的类定义语法非常直观,它跟以下的 ES5 语法是一个意思:
function User(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}

User.prototype.fullName = function() {
return '' + this.firstName + this.lastName
}

所以既然是function, 他就必须遵守this作用域的限定, function内部会产生一个context, 指向直接调用的目标.具体请看这: about-this

解决办法

  1. 用arrow function的this继承包含该function
    1
    2
    3
    render(
    <button type="button" onclick={()=>{this.clickMe()}}>Click Me</button>
    );

解释: ()=>{}他的context就是调用它的function Test(也就是class Test), 那么this也就能解释调用到了clickMe函数.
再说clickMe函数, 由于是function, 他的context继承了直接调用函数也就是arrow function, 由于arrow function的context就是该class,
所以clickMe也就调用了class.

  1. 使用bind()直接绑定this
    简单解释一下, 相当于提前对this的判定做出了结算.

PS. 还有由于语法问题, 所以无法出现that=this这种做法.

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. class原型
    2. 2.2. 解决办法