JavaScript复习笔记(一):变量

写在前面

进入工作,越发感觉原生JavaScript对于一名前端开发的重要性。各种前端框架工具什么的,一天一个样,让人眼花缭乱。但是就算变化再多,底层依然是原生JS实现的。学好JS,上手这些新东西,就没有多高的难度了。深感自己JavaScript还有很多坑要填,这里再重新系统地学习一遍JavaScript,一周一篇,毕竟自己不是那么有恒心的人,希望自己能坚持下去!

关于JavaScript

什么是JS?

很多人天天用JavaScript,却对于什么是JavaScript都不太清楚,作为前端开发工作者就太不应该了~
简单地说JavaScript是一门轻量级的脚本语言,浏览器充当解释器。比如Chrome的V8引擎就是目前主流的JS解释器。

JS执行时,在同一个作用域内是先解释再执行。解释的时候会编译functionvar这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值。

关于JavaScript是如何诞生的,可以参考阮一峰的网络日志Javascript诞生记。

JavaScript与ECMAScript

ECMAScript其实是欧洲标准化组织ECMA为JavaScript提供的标准化方案,方便各个浏览器厂商,包括开发者按照一定规范开发。

变量

变量声明

在JS中,第一次用都某个变量时,应该先进行变量声明。

使用var,进行变量声明,可以声明全局局部变量。如果不赋值,则输出undefined

    var a = 1;
    console.log(a)  //1
    var b;
    console.log(b)  //undefined

直接赋值,相当于声明一个全局变量,不建议使用。(并会导致JavaScript编译时产生一个严格警告。)

    a = 1;
    console.log(a)  //1

声明多个变量,可以用;隔开。也可以,隔开,不用连续使用var

    var a = 1;
    var b = 2;
    var c = 3;
    console.log(a,b,c) //1,2,3
   
    var x = 1,
        y = 2,
        z = 3;
    console.log(x,y,z) //1,2,3

ES6中新增了两种变量声明方式,分别是letconst

let声明块范围局部变量。使用let只在所在的代码块中有效、如:在for循环以及if判断中。

可理解为大括号内{}的为代码块

{
    var a = 1;
    let b = 2;
}
console.log(a); //1
console.log(b); //ReferenceError: a is not defined.

for(var i=0;i<10;i++){
    var a = 1;
    let b = 2;
}
console.log(a); //1
console.log(b); //ReferenceError: a is not defined

const即constants(常量)的缩写。字如其名,使用const定义的是只能读的常量不能改写。

const a = 10;
console.log(a); //10
a = 5;
console.log(a); //10

var b = 10;
console.log(b); //10
b = 5;
console.log(b); //5

变量提升

引用稍后声明的变量,不会引发异常。称为变量声明提升(hoisting);而提升后的变量将返回undefined 值,所以即使在使用或引用某个变量之后存在声明和初始化操作,仍将得到 undefined 值。

/*
 例子1
 */
console.log(a === undefined); //"true"
var a = 3;


/*
 例子 2
 */
var luffy = "my love";

(function() {
  console.log(luffy); // undefined
  var luffy = "one piece";
})();

一个函数中所有的var语句应尽可能地放在接近函数顶部的地方,这样增加代码的清晰度

  • 函数表达式与函数声明

JS在预解析的过程中,会将变量声明和函数表达式提升,现将所用变量拿到并不赋值相当于返回undefined。因此函数表达式函数声明有所区别。

(function(){
  fn1(); //ReferenceError: f1 is not defined
  fn2();
 
  var fn1 = function(){};
  function fn2(){}
})();

变量的作用域

全局变量局部变量的区别,可以简单地理解为函数外的即局部变量,在函数内的为局部变量

全局变量除非被删除,会一直占用内存。
局部变量只在函数执行时存在,执行完毕后会被删除。尽量避免声明全局变量。

读取变量的过程中,内部函数可以访问外部函数的局部变量。外部函数不能访问内部函数的局部变量。

/*
内部函数可以访问外部的变量
*/
var mars = 'cool';
function scope(){
    console.log(mars);  //输出'cool' 
}
scope();
/*
外部不能访问内部函数的变量
*/
console.log(mars); //输出' mars is not defined'
function scope(){
    var mars = 'so cool';
}

同时存在相同的全局和局部变量,采取就近原则

var mars = 'cool';
function scope(){
    var mars = 'handsome';
    console.log(mars);  //输出'handsome' 
}
scope();

需要注意的是在新的作用域内,会重新预解析,执行一遍,这就用到了之前变量提升的知识

var mars = 'cool';
function scope(){
    console.log(mars);  //输出'undefined' 
    var mars = 'handsome';
}
scope();

你可能感兴趣的:(JavaScript复习笔记(一):变量)