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 : ,
name : '小红' ,
} ,
{
id : ,
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 : ,
name : '小红' ,
} ,
{
id : ,
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 >
这个问题通常初学者都会碰到，之后慢慢就会形成习惯，会非常自然的规避掉这个问题。
浮点数精度问题 ► ◄对象属性访问问题声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92468