变量

变量，顾名思义，就是会变化的量。

我们可以用变量来存储信息。

example.js

var numOne = 10;
var numTwo = 20;
var result = numOne+numTwo;

console.log("result: " + result);

其中 numOne、numTwo、result 都是变量。

我们可以通过变量存储信息，进行计算，信息的传输等。

变量的命名

变量可以使用短名称(a/b)，也可以使用描述性更好的名称(name, age)。

小提示：实际编程中推荐为变量起描述性好的名字。

命名规则

变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感

变量的声明

JS 中创建一个变量，又称之为声明一个变量。

关键字

使用关键字 var 进行变量的声明

var name;

注意，只声明变量，其值是 undefined 的。

变量赋值

在生命变量之后，可以进行赋值。

name = "cat";

声明并赋值

上述步骤可以一步完成

var name = "cat";

一次声明多个变量

var name = "cat", color="black", age = 1;

let 与 var

此处作为初学者，可以暂时跳过。

let MDN

let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。

使用方式和 var 类似。

let 允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是，它声明的变量只能是全局或者整个函数块的。

作用域规则

let声明的变量只在其声明的块或子块中可用，这一点，与var相似。
二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

PS：这个例子可以看出 var 还是有些陷阱的，一般推荐使用 let 来声明变量。

简化内部函数代码

当用到内部函数的时候，let会让你的代码更加简洁。

var list = document.getElementById('list');

for (let i = 1; i <= 5; i++) {
  let item = document.createElement('li');
  item.appendChild(document.createTextNode('Item ' + i));

  item.onclick = function(ev) {
    console.log('Item ' + i + ' is clicked.');
  };
  list.appendChild(item);
}

// to achieve the same effect with 'var'
// you have to create a different context
// using a closure to preserve the value
for (var i = 1; i <= 5; i++) {
  var item = document.createElement('li');
  item.appendChild(document.createTextNode('Item ' + i));

  (function(i){
    item.onclick = function(ev) {
      console.log('Item ' + i + ' is clicked.');
    };
  })(i);
  list.appendChild(item);
}

模仿私有接口

在处理构造函数的时候，可以通过let绑定来共享一个或多个私有成员，
而不使用闭包

var Thing;

{
  let privateScope = new WeakMap();
  let counter = 0;

  Thing = function() {
    this.someProperty = 'foo';

    privateScope.set(this, {
      hidden: ++counter,
    });
  };

  Thing.prototype.showPublic = function() {
    return this.someProperty;
  };

  Thing.prototype.showPrivate = function() {
    return privateScope.get(this).hidden;
  };
}

console.log(typeof privateScope);
// "undefined"

var thing = new Thing();

console.log(thing);
// Thing {someProperty: "foo"}

thing.showPublic();
// "foo"

thing.showPrivate();
// 1

导航目录

目录导航

JS-03-变量，js关键字var与let的区别

变量