写在前面
进入工作,越发感觉原生JavaScript
对于一名前端开发的重要性。各种前端框架
、工具
什么的,一天一个样,让人眼花缭乱。但是就算变化再多,底层依然是原生JS
实现的。学好JS
,上手这些新东西,就没有多高的难度了。深感自己JavaScript
还有很多坑要填,这里再重新系统地学习一遍JavaScript
,一周一篇,毕竟自己不是那么有恒心的人,希望自己能坚持下去!
关于JavaScript
什么是JS?
很多人天天用JavaScript
,却对于什么是JavaScript
都不太清楚,作为前端开发工作者就太不应该了~
简单地说JavaScript
是一门轻量级的脚本语言,浏览器充当解释器。比如Chrome的V8
引擎就是目前主流的JS
解释器。
JS
执行时,在同一个作用域内是先解释再执行。解释的时候会编译function
和var
这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值。
关于
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
中新增了两种变量声明方式,分别是let
和const
。
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();