javascript的悬停

原创 2012年03月28日 11:18:27


我们先来看一段代码:

var scope = "global";  
function f() {   
console.log(scope);    
var scope = "local";    
console.log(scope);    
} 

f();

借助firedebug的控制台命令行编辑器,我们可以得到以下结果:

undefined   
local 

 书上的解释是,与全局变量同名的局部变量在整个函数内部覆盖全局变量。简而言之,所有函数体内的变量声明(注意,仅仅是声明)都将被提到函数体开头进行。上述代码相当于以下代码的运行结果:


var scope = "global";   
function f() {   
var scope; //声明提到这里   
console.log(scope);    
var scope = "local"; //赋值仍然在这里  
console.log(scope);    
}

f();

在说下一个问题之前,先来看卡javascript中定义函数的两种方式,调试工具同样是使用firedebug的控制台命令行编辑器。

第一种,用变量声明的方式定义函数:

var bar = function() {
           alert("bar global");   
}   

bar();

第二种,函数定义的方式定义函数:

function bar() {
           alert("bar global");   
}   

bar();

由于js“悬挂”的存在,以上两种函数定义在下面的函数中有不同表现。

第一种

var bar = function() {           
alert("bar global");   
}   

function f() {   
bar();   
var bar = function() {           
alert("bar local");      
}   
}  

f();

运行会报错,因为这种方式相当于:

 var bar = function(){  
      alert("bar global");  
}  

function f(){  
  var bar;  
  bar();  
  var bar = function(){  
        alert("bar local")  
   }  
}

f();
用变量声明的方式定义函数时候,只有声明被提到函数的开头,而用函数定义的方式定义函数时,整个函数体都会被提到函数的开头。


第二种:

function bar() {
           alert("bar global");   
}   

//bar();

function f() {      
 bar();       
function bar(){
          alert("bar local");  
     }   
}

f();


这种方式等同于:

var bar = function() {  
alert("bar global");  
}  

function f() {  
// 函数的声明和定义都悬挂到开头进行     
var bar = function() {          
alert("bar local");     
}     
bar(); 
}  

f();


这里发现,用函数定义的方式定义函数时,允许函数没定义之前就使用它。


因此,在js good parts中作者推荐是用 var bar = function(){}的方式定义函数。




PS:本文参考了网上一些关于javascript悬停的文章,加入了自己的实际操作。







版权声明:本博客已经不再更新,新博客地址:www.imbeta.cn,欢迎来访。微信公众号:程序员的诗和远方。公众号ID : MonkeyCoder-Life~~本文为博主原创文章,未经博主允许不得转载。

JS+CSS 实现 悬停广告

效果图 第一种 第二种 封装效果图第一种在onscroll方法中调用move方法 move方法中直接设置广告top为body卷曲的高度 缺点:没有缓慢移动的效果 移动的小广告...
  • mixi9760
  • mixi9760
  • 2016年07月28日 10:31
  • 481

Arcgis for Js之鼠标经过显示对象名的实现

Arcgis for Js之鼠标经过显示对象名的实现
  • GISShiXiSheng
  • GISShiXiSheng
  • 2014年12月12日 09:00
  • 3641

Android 顶部悬停

效果主要靠布局来实现的,主要使用了CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout ...
  • danfengw
  • danfengw
  • 2016年12月23日 18:03
  • 1550

ArcGIS api for javascript——鼠标悬停时显示信息窗口

描述 本例展示当用户在要素上悬停鼠标时如何显示InfoWindow。本例中,要素是查询USA州图层的QueryTask的查询结果。工作流程如下: 1.用户单击一个要素 2.要素是“加亮的”图形。...
  • qq503690160
  • qq503690160
  • 2017年06月16日 15:31
  • 960

两个Layout一个属性快速实现Android滑动顶部悬停

大家先来看一下这个效果吧,在项目中应用的场景还是蛮多的。之前在网上看到有许多实现这个效果的做法,但是基本上是在滑动视图内改动,比如获取滑动的Y值来确定悬停View的位置。在design包问世之前这种做...
  • yun1185448859
  • yun1185448859
  • 2016年12月22日 13:31
  • 1544

利用ListView实现最简单的上滑悬停 (附源码)

笔者之前在做一个项目的时候,需要实现一个特殊效果的布局,即列表顶部的布局能“下拉悬停”,也就是说,当列表往上滑动的时候,列表顶部的布局,能悬停在屏幕顶部,而不被滑出屏幕。如图所示:当列表滑动时,搜索框...
  • frained
  • frained
  • 2015年09月11日 19:47
  • 2321

【Android自定义控件】布局悬停在顶部

语言表达局限,我们先来看下效果: 好了,如果你明白了我说的效果,那就继续往下看吧! 思路是这样的: 首先,我们要自定义一个HoverScrollView,继承ScrollView,通过接口把onS...
  • JingleYe
  • JingleYe
  • 2015年12月15日 17:55
  • 3273

ScrollView向上滑动滑动到顶部悬停

首先要重写scrollview控件主要就是对scrollview的监听 /*   * ScrollView并没有实现滚动监听,所以我们必须自行实现对ScrollView的监听,   ...
  • Zhangxuexue_
  • Zhangxuexue_
  • 2016年09月12日 11:32
  • 1411

Android视图的顶部悬停的实现

项目中经常会用到,一个View悬停到顶部的情况。 这里借鉴网上的方式给出来2中实现方式。 1,利用ScrollView+ListView实现 2,利用ListView增加头部实现。 然后简单的分析了一...
  • baidu_34012226
  • baidu_34012226
  • 2016年08月26日 10:58
  • 1155

RecyclerView利用ItemDecoration实现头部悬停效果【类似微信通讯录效果】

对于RecyclerView的ItemDecoration相信大家都不会陌生,因为RecyclerView并不像ListView那样自带分割线,所以我们需要继承ItemDecoration去手动绘制分...
  • xiaxiazaizai01
  • xiaxiazaizai01
  • 2017年03月16日 17:56
  • 2253
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript的悬停
举报原因:
原因补充:

(最多只允许输入30个字)