登陆可实现PC、移动端同步进度.
this 使用问题
大部分开发者都会合理、巧妙的运用 this
关键字。
初学者容易在 this
指向上犯错,如下面这个 Vue 组件
:
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
// 发送post请求
const post = (cb) => {
// 假装发了请求并在200ms后返回了服务端响应的内容
setTimeout(function() {
cb([
{
id: 1,
name: '小红',
},
{
id: 2,
name: '小明',
}
]);
});
};
new Vue({
el: '#app',
data: function() {
return {
list: [],
};
},
mounted: function() {
this.getList();
},
methods: {
getList: function() {
post(function(data) {
this.list = data;
console.log(this);
this.log(); // 报错:this.log is not a function
});
},
log: function() {
console.log('输出一下 list:', this.list);
},
},
});
</script>
这是初学 Vue
的同学经常碰到的问题,为什么这个 this.log()
会抛出异常,打印了 this.list
似乎也是正常的。
这其实是因为传递给 post
方法的回调函数,拥有自己的 this,有关内容可以查阅 this章节。
不光在这个场景下,其他类似的场景也要注意,在写回调函数的时候,如果在回调函数内要用到 this
,就要特别注意一下这个 this
的指向。
可以使用 ES6 的箭头函数
或者将需要的 this 赋值给一个变量,再通过作用域链的特性访问即可:
<div id="app"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
// 发送post请求
const post = (cb) => {
// 假装发了请求并在200ms后返回了服务端响应的内容
setTimeout(function() {
cb([
{
id: 1,
name: '小红',
},
{
id: 2,
name: '小明',
}
]);
});
};
new Vue({
el: '#app',
data: function() {
return {
list: [],
};
},
mounted: function() {
this.getList();
},
methods: {
getList: function() {
// 传递箭头函数
post((data) => {
this.list = data;
console.log(this);
this.log(); // 报错:this.log is not a function
});
// 使用保留 this 的做法
// var _this = this;
// post(function(data) {
// _this.list = data;
// console.log(this);
// _this.log(); // 报错:this.log is not a function
// });
},
log: function() {
console.log('输出一下 list:', this.list);
},
},
});
</script>
这个问题通常初学者都会碰到,之后慢慢就会形成习惯,会非常自然的规避掉这个问题。
- 还没有人评论,欢迎说说您的想法!