avalonJS中this使用的注意事项

最新推荐文章于 2025-08-06 16:42:26 发布

weixin_30826095

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhang134you/p/7149756.html

本文探讨了MVVM框架中this指针的指向问题，特别是在JavaScript模型中如何处理不同上下文中this的变化。通过具体示例展示了在视图模型（VM）内部及通过视图（V）调用方法时this的不同行为，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this指针一般是基于宿主环境而存在的一个变量，一般是指向宿主对象，而对于MVVM框架来说，一方面需要在VM中创建对自身对象的操作，同时也可以在V（view）中使用到VM中定义到的方法，以下代码帮助理解：

//JS 模型

var vm = avalon.define({

　　$id:'vmID',

　　$getData: function(){

　　　　console.log(this);　// this指针的指向因着调用位置的不确定而不确定
　　}

})

avalon.ready(function(){

　　vm.$getData();

})

// DOM结构

<div ms-controller="vmID">

　　<a href="javascript:void(0);" ms-click="$getData()">获取数据</a>

</div>

　　这样一来，对于方法在VM模型中使用打印的便是VM对象，而对于在DOM节点中使用的模型对象方法调用时，打印的便是DOM节点对象，给予此在MVVM框架中使用this指针时务必要小心。

解决方案可以是，不要直接使用VM对象中的$getData()方法，而是重新定义一个方法:

//JS 模型

var vm = avalon.define({

　　$id:'vmID',

　　$getData: function(){

　　　　console.log(this);　 //this指针的指向不确定
　　},
　　$jump: function(){
　　　　console.log(this);  //this指针指向DOM节点对象
　　　　vm.$getData();  //vm指向模型对象
　　}

})

avalon.ready(function(){

　　vm.$getData();

})

// DOM结构

<div ms-controller="vmID">

　　<a href="javascript:void(0);" ms-click="$jump()">获取数据</a>

</div>

转载于:https://www.cnblogs.com/zhang134you/p/7149756.html