javascript的做用域

时间 2019-11-29

原文原文链接

毕业了最近在找工做，面试一家公司遇到了许多javascript的题，由于只是之前稍微了解了一点，遇到了一些之前没接触的东西。许多的面试题里面会有读程序的题，当时不会作回来一搜发现这些题都是在考js的做用域。javascript

1、JavaScript做用域html

JavaScript变量实际上只有两种做用域，全局变量和函数的内部变量。在函数内部任何一个地方定义的变量(var scope)其做用域都是整个函数体。
全局变量：指的是window对象下的对象属性。
做用域划分：基于上下文，以函数进行划分的，而不是由块划分的。
强调两点：
1. 在同一做用域中，JavaScript是容许变量的重复定义，而且后一个定义将覆盖前一个定义。
2. 函数内部若是不加关键字var而定义的变量，默认为全局变量。java

var scope="global"; 
function t(){ 
  console.log(scope); //"global" 
  scope="local"
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"local" 
 
 
 
 
var scope="global"; 
function t(){ 
  console.log(scope); //"undefined" 
  var scope="local"
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"global"

在变量解析过程当中首先查找局部的做用域，而后查找上层做用域。在第一段代码的函数当中没有定义变量scope，因而查找上层做用域（全局做用域），进而进行输出其值。可是在第二段代码的函数内定义了变量scope（不管是在console以后仍是以前定义变量，都认为在此做用域拥有变量scope），因而再也不向上层的做用域进行查找，直接输出scope。可是不幸的是此时的局部变量i并无赋值，因此输出的是undefined。面试

//因此根据函数做用域的意思，能够将上述第二段代码重写以下： 
var scope="global"; 
function t(){ 
  var scope; 
  console.log(scope); //“local”
  scope="local"
  console.log(scope); //“local”
} 
t();

因为函数做用域的特性，局部变量在整个函数体始终是由定义的，咱们能够将变量声明”提早“到函数体顶部。数组

var b; //第1步 
function fun(){  
  b = "change";  
}  
alert(b);//输出undefined，因为第1步只定义未赋值 
  
  
var b; //第1步 
function fun(){  
  b = "change";  
} 
fun(); //调用上述函数 
alert(b); //输出change

当使用var声明一个变量时，建立的这个属性是不可配置的，也就是说没法经过delete运算符删除。
2、做用域实例闭包

<html> 
<head> 
  <script type="text/javascript"> 
    function buttonInit(){ 
      for(var i=1;i<4;i++){ 
        var b=document.getElementById("button"+i); 
        b.addEventListener("click",function(){ alert("Button"+i);},false); 
      } 
    } 
    window.onload=buttonInit; 
  </script> 
</head> 
<body> 
  <button id="button1">Button1</button> 
  <button id="button2">Button2</button> 
  <button id="button3">Button3</button> 
</body> 
</html>

依次弹出button1,button2,button3,当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert("Button"+i);}这个匿名函数中没有i，根据做用域链，因此到buttonInit函数中找，此时i的值为4，因此弹出”button4“。函数

3、利用js闭包实现循环绑定事件this

<html> 
<head> 
  <title>闭包</title> 
</head> 
<body> 
  <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
  </ul> 
  <script type="text/javascript"> 
    function tt(nob) { 
      this.clickFunc = function() { 
        alert("这是第" + (nob + 1) + "记录"); 
      } 
    } 
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的全部li的对象数组 
    for (var i = 0; i<= list_obj.length; i++){ 
      console.log(list_obj[i]) 
      list_obj[i].onmousemove = function(){ 
        this.style.backgroundColor = "#cdcdcd"; 
      } 
      list_obj[i].onmouseout = function() { 
        this.style.backgroundColor = "#FFFFFF"; 
      } 
      //list_obj[i].onclick = function() { 
      // alert("这是第" + i + "记录"); //不能正常获取 alert出来的都是：“这是第6记录” 
      //} 
      var col = new tt(i); //调用tt函数 
      list_obj[i].onclick = col.clickFunc; //执行clickFunc函数 
    } 
  </script> 
</body> 
</html>

这里的for循环中一开始就会循环完毕，若是不是经过tt（）传入的nob记录的话，就不能正常获取alert出来的数。code