昔洛 的个人博客

Bug不空,誓不成佛

目录
JavaScript top 属性 学习中遇到的一个坑
/        

JavaScript top 属性 学习中遇到的一个坑

JS 学习过程中遇到的一个变属性的坑

在写代码时,变量的定义都是有意义有语义的去起它的名字,比如 username,password,userTarget,useAbility 等,方向类的命名有,up,down,left,right,位置类的命名也诸如 top、bottom、left、right 等,而在 JavaScript 中, top 这个词不能轻易地使用,原因如下:

在 JavaScript 中,top 是 window 的一个属性。

有如下代码:

var top = document.getElementById('top');
var bottom = document.getElementById('bottom');
var left = document.getElementById('left');
var right = document.getElementById('right');

top.onclick = function() {
	console.log('顶部');
};
bottom.onclick = function() {
	console.log('底部');
};
left.onclick = function() {
	console.log('左边');
}
right.onclick = function() {
	console.log('右边');
}

上面代码中,比如我 html 上面有 4个按钮,点击 top、bottom、left、right 四个按钮分别会打印出 顶部、底部、左边、右边,然而实际效果是,不管点击那个按钮会有’顶部’打印出来,甚至不可思议的是我点击浏览器的可视区域,也会打印出’顶部’,然后经过查阅相关资料发现 top 其实是 window 的一个属性,并且这个属性的意义是:返回顶级窗口,即浏览器窗口,并且属性为只读,无法修改的,所以第一行代码即使获取 top 按钮元素对象也无法让 ‘top’ 这个变量存取。因为全局下 var 声明的变量全部都归属于 window。

解决 top 变量不能使用的方案

  • top 既然是全局作用下也是 window 一个属性,如果非要使用 top 变量,那么就不在全局作用域下使用 top
  • 局部作用域
    • 在 JavaScript var 声明的变量只存在于两种作用域下,一种是函数下的局部作用域,另外就是全局作用域,那么使用 var top 的话只能使用函数来执行,代码可以修改为如下:
     (function () {
            var top = document.getElementById('top');
            console.log(top);
            top.onclick = function () {
                console.log('顶部');
            };
        }());	
    

    上面代码使用立即执行函数的方式,声明了局部变量 top

    • 使用 let 声明代码块作用域
    {
    	let top = document.getElementById('top');
    	top.onclick = function() {
    		 console.log('顶部');
    	};
    }
    

    let 声明的变量具有块级的生命周期,也不会有提权的效果。

  • 直接改变量名,不同 top huaji

image.png

(゚д゚)σ弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌弌⊃
评论
歌名 - 歌手
0:00