类的声明
ECMAScript6中有一种与其他语言中类似的类特性: 类声明
同时它也是ECMAScript6中最简单的类形式
要声明一个类
class Student{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}
new Student('Li').sayName();
然后强调一下构造器中的this
其值会被绑定到调用this
的函数的最近的父对象
var person = {
first: 'John',
last: 'Smith',
full: function() {
console.log(this.first + ' ' + this.last);
},
personTwo: {
first: 'Allison',
last: 'Jones',
full: function() {
console.log(this.first + ' ' + this.last);
}
}
};
person.full();
//输出 'John Smith'
person.personTwo.full();
//输出 'Allison Jones'
这里React构造函数中经常写的
class Toggle extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
}
bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.
也就是说, this.handleClick.bind(this); 这句代码执行之后会创建一个新函数, 然后把这个函数赋值给等号左边的原函数引用( 当然你也可以起名叫 this.newHandleClick )
rendor函数中的
<button onClick={this.handleClick}> {this.state.isToggleOn ? ‘ON’ : ‘OFF’} </button>
调用的实际上是新函数, 调用这个新函数的this值也就赋给了bind的参数this, 也就传入了handleClick函数的内部
如果去掉这句绑定, 那么构造函数中的this和handleClick函数中的this就成了不同的this