天天看點

08. vue - var let const

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <script>
    // 1. 變量作用域:變量在什麼範圍内可用
    // {
    //  var name = "why";
    // }
    // console.log(name);  // why
 
    // 2. 沒有塊級作用域引起的問題:運作中,數值容易被篡改
    // var func;
    // if(true){
    //  var name = 'why';
    //  func = function(){
    //    console.log(name);
    //  };
    // }
    // name='abcd';
    // func();//abcd
 
    // 3. 沒有塊級作用域引起的問題:for的塊級
    // var btns = document.getElementsByTagName('button');
    // for (var i = 0; i < btns.length; i++) {
    //  btns[i].addEventListener('click', function () {
    //    console.log(i);
    //  })
    // }
    // 一直列印 5
 
    // 4. 為什麼閉包可以解決問題:函數是一個作用域
    // 隻要函數有作用域
    // ES5之前:if和for都沒有塊級作用域的概念,
        //          是以很多時候,必須借助于function的作用域來解決應用外面的變量問題
    // function abcd(a){  // a是一個确定的值
    //      console.log(a);
    // }
    // abcd('abcd');
    // var btns = document.getElementsByTagName('button');
    // for (var i = 0; i < btns.length; i++) {
    //  (function (i) {
    //    btns[i].addEventListener('click', function () {
    //      console.log(i);
    //    });
    //  })(i);
    // }
 
    // var 的 {} 沒有塊級作用域
    // let的使用,形成作用域,{}是作用域
    // const btns = document.getElementsByTagName("button");
    // for(let i=0; i<btns.length; i++){
    //  btns[i].addEventListener('click', function(){
    //    console.log(i);
    //  })
    // }
 
    // const
    // 1. 一旦給const修飾的标志符被指派之後,不能修改
    // const name='abcd';
    // name='efgd';//錯誤
 
    // 2. 在使用const定義标志符必須進行指派
    // const name;  //錯誤
    
    // 3. 常量的含義是指指向的對象不能修改,但是可以改變對象内部的屬性
    // obj 的位址不改變就好,其他可以改變,對象裡的屬性值可以改
    const obj = {
      name: 'why',
      age: 18,
      height: 1.44
    };
    obj = {};  // 錯誤
    
    obj.name='huang' //  可以
 
  </script>
</body>
 
</html>