js中不容小觑的var声明

在学习vue相关课程中，有一次跟着老师敲代码，写出了如下代码：

var Child = {template:`<div @click='handleClick'><slot></slot></div>`,methods:{handleClick(){this.$bus.$emit( 'change' );},},mounted(){var self = this;counter = 0;this.$bus.$on( 'change',function(){ counter  ;console.log( "you clicked " counter " times" );} );}};

将组件注册到app实例后，实例化3个子组件，在点击触发'click'的时候，打印效果如下：

点击一次执行3次可以理解，因为每个子组件都给prototype里的$bus总线push了自己的事件处理函数，但理论上来讲，每个组件实例化的过程中，都会调用自己的mounted钩子，在钩子里因为闭包的存在，形成可保存的作用域，所以，每个实例都有自己独立的的context( 如counter )，即：应该执行3次，但counter不应该累加，应该出现3个'you clicked 1 times'。

觉得迷糊，我自己又按照自己的理解写了一遍代码，运行，结果好好的，就是上述期待效果，问题在哪呢？

将两个文件逐行对比后，定位到了问题：

正确的版本

出问题的版本

两个版本之间唯一的差别是，counter变量一个用var声明了，一个没有，于是赶紧搜起...看到这么一篇文章，其中与我的问题相关的核心描述在此：

看到此处，豁然开朗，所以不加var的变量都绑在了全局window对象上，不会再根据mounted钩子函数的执行单独创建作用域了，所有child实例push到$bus里的事件处理函数访问的都是window.counter，所以数值累加就是正常表现了。

看来js代码中var的使用不容小觑，对于声明的任何一个变量都要做到胸有成竹，是不是要绑在window上做全局用？如果不是，一定要加var,使其在自身作用域内运行，防止污染全局。

js中不容小觑的var声明相关推荐

JS中的let和var的区别
ES6 新增了let命令,用来声明局部变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 在ES6之前,我们都是用var来声明变量,而且JS只有函 ...
js中的let和var
在ES6中,应该尽量使用const和let来声明变量,而尽量避免使用var. var的缺点是它的作用域比较混乱,使用let能够保证清晰的作用域. 下面看一个小例子. var x = 3; if(x== ...
js中定义变量加var和不加var的区别
这个问题其实我在面试的时候有被问到过,当时我记得我回答的很模糊,面试官看到我好像不太清楚,又问我是不是可以不加var定义变量... 正好昨天做项目的时候想到这个问题,觉得这种细节上的问题才是拉开差距的 ...
js中定义变量之②var let const的区别
var 上一篇文章有讲过,是js定义变量的关键词. 但是在es6中,新添加了两个关键词,用于变量声明的关键词:let 和const 接下来就说一下var let 和const的区别: 首先说var 用 ...
关于JS中的 NEW 和VAR
很多人都觉得在javascript声明一个变量,加var和不加var没有什么区别,实际上是一个错误的观点,如果在函数外面,也就是说在window区域加不加var确实是一样,因为都会是全局变量的效果,而 ...
JavaScript学习笔记——JS中的变量复制、参数传递和作用域链
今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...
js 中声明变量 “提前”
1.变量定义提升: 声明语句: (1)var声明语句: 变量声明语句会被"提前"至脚本或者函数的顶部,但是初始化的操作则还在原来var语句的位置执行.例如,下面的例子,所示: fu ...
php声明js变量类型,js中变量是什么以及有哪些类型
在js中,变量是存储信息的容器:JavaScript中有两种类型的变量:局部变量和全局变量. js如何声明变量? 在js中,可以使用关键词"var"或者"let" ...
Node.js中文件上传与multer模块的应用
必要:首先multer模块应用前提是在HTML的form表单中标签内设置属性enctype="multipart/form-data"是必须的,这样才可以上传文件,方式为post ...

js中不容小觑的var声明

js中不容小觑的var声明相关推荐

最新文章

热门文章