JavaScript中的this
Tags： JavaScript 开发
[toc]
最近在学习ReactNative，免不了被坑在JS上，跟Java和Objective-C不同，JS方法里的this显得很另类，有点令人困惑。
什么是this
要说清this是什么，可以从Function.prototype.call()方法说起，这个方法近似于function调用的原始实现，它的方法签名是这样的：
fun.call(thisArg[, arg1[, arg2[, ...]]])
其中thisArg代表的就是方法里的this，而其他参数，则是arg1、arg2以可变长度参数的形式传递。调用的过程和结果如下：
function hello(thing) {
console.log(this + " says hello " + thing);
}
hello.call("Yehuda", "world") //=> Yehuda says hello world
JavaScript里的其他方法调用方式大致可以看做这个调用的语法糖[1]。
在ES5前，function里的this默认会是window或者global对象，而使用了严格模式的ES5，全局function里的this将会是undefined：
// this:
hello("world")
// desugars to:
hello.call(undefined, "world");
对于一个方法来说this并不是一成不变，具体是什么取决于调用这个方法的时机：
function hello(thing) {
console.log(this + " says hello " + thing);
}
person = { name: "Brendan Eich" }
person.hello = hello;
person.hello("world") // still desugars to person.hello.call(person, "world")
hello("world") // "[object DOMWindow]world" //具体环境决定
通常我们把this形容为上下文就是因为这个。
那么问题来了
JavaScript中，我们经常要将方法传递给其他方法，当做回调函数，比如最近学习的ReactNative，JSX中经常要将方法作为参数传递：
render() {
return (
<ListView dataSource={this.props.dataSource} renderRow={this._renderRow}
/>
)
}
...
_renderRow(itemData) {
return (
<TouchableHighlight onPress={this._rowPressed} >
...not important
</TouchableHighlight>
)
}
_rowPressed() {
...not important
}
细心的盆友看出来了，我这样写是不行的，ListView的renderRow方法是由react执行的，它调用_renderRow的时候，上下文this必然不是声明render方法所在的实例，_renderRow方法里的this._rowPressed必然是undefined。
JavaScript中Function是一等类型，可以被显式传递，所以必然会出现上下文不对的问题，在没有深入研究过的开发者手中，往往忽视这个问题，写出大坑。
如何使this确定
bind
这个问题也困扰了JS开发者很久，如何解决呢？
在ES5之前，人们通过一个简单方法帮助改正错误的this：
var person = {
name: "Brendan Eich",
hello: function(thing) {
console.log(this.name + " says hello " + thing);
}
}
var boundHello = function(thing) { return person.hello.call(person, thing); }
boundHello("world");
尽管我们可以在任何地方调用boundHello方法，可是boundHello实际上是对上下文和原始hello方法进行了封装，所以最终hello里的this始终是person。
这个方法最终被ES5引入的Function.prototype.bind方法所替代，所以现在我们的代码里可以这样使用：
var boundHello = person.hello.bind(person);
boundHello("world") // "Brendan Eich says hello world"
所以，前文里面困扰了我的ReactNative问题，解决方法也许是：
render() {
return (
<ListView dataSource={this.props.dataSource} renderRow={this._renderRow.bind(this)}
/>
)
}
...
_renderRow(itemData) {
return (
<TouchableHighlight onPress={this._rowPressed.bind(this)} >
...not important
</TouchableHighlight>
)
}
_rowPressed() {
...not important
}
而考虑到ReactNative，render方法的性能要求，不能在render过程中创建新方法，所以最终解决方案是这样的：
constructor() {
super()
this._renderRow = this._renderRow.bind(this)
this._rowPressed = this._rowPressed.bind(this)
}
render() {
return (
<ListView dataSource={this.props.dataSource} renderRow={this._renderRow}
/>
)
}
...
_renderRow(itemData) {
return (
<TouchableHighlight onPress={this._rowPressed} >
...not important
</TouchableHighlight>
)
}
_rowPressed() {
...not important
}
另外bind(this)在ES6里还有新语法糖：
this._renderRow = ::this._renderRow
this._rowPressed = ::this._rowPressed
不过在Babel的实现中说明了这个语法是highly experimental的，所以最后用不用，follow your heart~
Fat Arrow
ES6引入了箭头匿名方法，它的方法体里的this是会绑定给初始化它的实例的，所以constructor里的方法也可以改为：
this._renderRow = (rowData) => this._renderRow(rowData)
this._rowPressed = () => this._rowPressed()
这种方法的缺点是参数个数是固化的，如果想处理原方法的更多参数，需要在这里显式写出这些参数，不太灵活，毕竟我们只想绑定this，不关心参数。
鸣谢
bind新语法
what's 'this'
jsx中不推荐使用bind和箭头函数
mozilla bind文档
谢谢收看
-
严格来说不是，只是近似，方便下文讲解。 ↩
