2-19⼩程序中this指向
this
在函数执⾏时，this 总是指向调⽤该函数的对象。要判断 this 的指向，其实就是判断 this 所在的函数属于谁。
this 出现的场景分为四类，简单的说就是：
有对象就指向调⽤对象
没调⽤对象就指向全局对象
⽤new构造就指向新对象
通过 apply 或 call 或 bind 来改变 this 的所指。
1）函数有所属对象时：指向所属对象
函数有所属对象时，通常通过 . 表达式调⽤，这时 this ⾃然指向所属对象。⽐如下⾯的例⼦：
var myObject = {value: 100};
console.log(this.value);  // 输出 100
// 输出 { value: 100, getValue: [Function] }，
// 其实就是 myObject 对象本⾝
console.log(this);
return this.value;
};
console.Value()); // => 100
getValue() 属于对象 myObject，并由 myOjbect 进⾏ . 调⽤，因此 this 指向对象 myObject。
2) 函数没有所属对象：指向全局对象
var myObject = {value: 100};
var foo = function () {
console.log(this.value) // => undefined
console.log(this);// 输出全局对象 global
};
foo();
return this.value;
};
console.Value()); // => 100
在上述代码块中，foo 函数虽然定义在 getValue 的函数体内，但实际上它既不属于 getValue 也不属于 myObject。foo 并没有被绑定在任何对象上，所以当调⽤时，它的 this 指针指向了全局对象 global。
据说这是个设计错误。
3）构造器中的 this：指向新对象
js 中，我们通过 new 关键词来调⽤构造函数，此时 this 会绑定在该新对象上。
var SomeClass = function(){
this.value = 100;
}
var myCreate = new SomeClass();
console.log(myCreate.value); // 输出100
顺便说⼀句，在 js 中，构造函数、普通函数、对象⽅法、闭包，这四者没有明确界线。界线都在⼈的⼼中。
4) apply 和 call 调⽤以及 bind 绑定：指向绑定的对象
apply() ⽅法接受两个参数第⼀个是函数运⾏的作⽤域，另外⼀个是⼀个参数数组(arguments)。
call() ⽅法第⼀个参数的意义与 apply() ⽅法相同，只是其他的参数需要⼀个个列举出来。
简单来说，call 的⽅式更接近我们平时调⽤函数，⽽ apply 需要我们传递 Array 形式的数组给它。它们是可以互相转换的。var myObject = {value: 100};
var foo = function(){
console.log(this);
};
foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }
var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }
在⼩程序中我们⼀般通过以下⽅式来修改data中的数据
this.setData({
index1: e.detail.value
})
⽐如在函数⾥⾯修改数据
bindFaChange1: function (e) {
this.setData({
index1: e.detail.value
})
}
但是当我们通过wx.request请求⽹络数据成功后绑定数据时候报以下错误
this.setData is not a function
代码如下：
doCalc:function(){
url: url,
method:'POST',
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
if (de == 0){
this.setData({
maxCount: res.data.maxCount
});
}
}
})
}
这是因为this作⽤域指向问题 ，success函数实际是⼀个闭包 ， ⽆法直接通过this来setData
那么需要怎么修改呢？
我们通过将当前对象赋给⼀个新的对象
var that = this;
然后使⽤that 来setData就⾏了
完整代码
doCalc:function(){
var _this = this;
代码转换url: url,
method:'POST',
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
if (de == 0){
that.setData({
maxCount: res.data.maxCount
});
}
}
})
}
另外说⼀下 ， 在es6中 ， 使⽤箭头函数是不存在这个问题的
例如 ：
setTimeout( () => {
console.pe + ' says ' + say)
}, 1000)
当我们使⽤箭头函数时，函数体内的this对象，就是定义时所在的对象，⽽不是使⽤时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有⾃⼰的this，它的this是继承外⾯的，因此内部的this就是外层代码块的this。
箭头函数⾥⾯根本没有⾃⼰的this，⽽是引⽤外层的this。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。