JavaScript申明变量
变量是用于存储信息的"容器"。
一、引入
1.定义:
在 JavaScript 中创建变量被称为“声明”变量。JavaScript中变量声明又分为显示声明和隐式声明。其中显示声明中,被“声明”变量之前的关键词有var、let、const、function、class、import ;另外,在隐式声明中,隐式变量是全局变量,如果在函数中,显示声明变量为局部变量,隐式声明为全局变量。
二、显示声明变量和隐式声明变量的区别?
1.显示声明变量
在ES5阶段,用var定义变量。没有块的概念,可以跨块访问,不能跨函数访问;存在变量提升。
ES6之后,除了之前的var定义变量,还有let、const、function、class、import
(1)var声明变量
var a; //undefined
var声明的变量可以不初始化赋值,输出是undefined,不会报错;
var b = 10,c = true;
var声明的变量可以修改,存在变量提升(大多数语言都有块级作用域,但JS使用var声明变量时,以function划分作用域,大括号“{}”去无法限值var的作用域);
var声明的变量作用域是全局的或者是函数级的;
var声明的变量在window上;
var定义的变量可以修改,如果不初始化会输出undefined,不会报错;
var 声明的变量在window上,用let或者const去声明变量,这个变量不会被放到window上;
很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域,因此用var声明的变量具有变量提升的效果;
var 声明的变量作用域是全局的或者是函数级的;
var可以重复声明:var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误;如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色;如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响;
(2)let声明变量
需要”javascript 严格模式”:'use strict';
let 不能重复声明
不会预处理,
不存在变量提升
let声明的变量作用域是在块级域中,函数内部使用let定义后,对函数外部无影响(块级作用域)
可以在声明变量时为变量赋值,默认值为undefined,也可以稍后在脚本中给变量赋值,在生命前无法使用(暂时死区)
(3)const声明变量
const定义的变量不可以修改,而且必须初始化
该变量是个全局变量,或者是模块内的全局变量;可以在全局作用域或者函数内声明常量,但是必须初始化常量
如果一个变量只有在声明时才被赋值一次,永远不会在其它的代码行里被重新赋值,那么应该使用const,但是该变量的初始值有可能在未来会被调整(常变量)
创建一个只读常量,在不同浏览器上表现为不可修改;建议声明后不修改;拥有块级作用域
const 代表一个值的常量索引 ,也就是说,变量名字在内存中的指针不能够改变,但是指向这个变量的值可能 改变
const定义的变量不可修改,一般在require一个模块的时候用或者定义一些全局常量
常量不能和它所在作用域内其它变量或者函数拥有相同名称
(4)function
function命令用于定义(声明)一个函数:
function sum() { var sum++ return sum; }
函数声明后不会立即执行,需要调用的时候才执行;
对支持ES5和ES6浏览器环境在块作用域内有一定区别,所以应避免在块级作用域内声明函数。
声明了一个名为 sum的新变量,并为其分配了一个函数定义
{}之间的内容被分配给了 sum
(5)class
class作为ES6的语法糖,是声明类的方式。下面为简单使用的示例:
class Point { constructor (x, y) { this.x = x; this.y = y; } toString () { return this.x + ':' + this.y; } }
//使用Object.assign() 为对象添加方法属性
Object.assign(Point.prototype, { getX () { return this.x; }, getY () { return this.y; } }) let p1 = new Point(1,2); console.log(p1.toString()); //1,2 console.log(p1.getX()); //1 console.log(p1.getY()); //2 console.log(Object.keys(Point.prototype)); // ["getX", "getY"]
示例2:
class Point2 { constructor(xingBie, chineseName) { this.xingBie = xingBie; this.chineseName = chineseName; } getXingBie(){ return `您的性别为${this.xingBie }`; } getChineseName(){ return `您的中文名为${this.chineseName}`; } }
var yogel = new Point2("男","油垢")
console.log(yogel.getXingBie(),yogel.getChineseName())
方法之间不需要逗号分隔
toString () {} 等价于 toString: function () {}
你仍然可以使用Point.prototype
你可以用Object.assign()一次性扩展很多方法
类内部定义方法多是不可以枚举的
constructor(){}是一个默认方法,如果没有添加,会自动添加一个空的。
constructor默认返回实例对象(this),完全可以指定返回其他的对象。
必须用new调用
不存在变量提升
当用一个变量去接受class时,可以省略classname
es6不提供私有方法
使用extends继承
(6)import
ES6引入了自己的模块系统。通过export导出,import导入。
与CommonJS不同的是,它是获取模块的引用,到用的时候才会真正的去取值。
2.隐式声明变量
coste = 15; // 赋值语句其实隐式的声明了变量coste,类型为数字,占用8个字节(64位浮点格式)
console.log(coste) //15 所有隐式声明的变量默认都是全局变量,无论函数内外
隐式声明的变量默认都是全局变量,无论函数内外
显式声明的变量不能用 delete 删除 因为它的 configurable: false,而隐式声明的变量 configurable: true
隐式声明变量虽然一定程度带来了方便,但是程序的可读性降低,无形之中会制造bug,应谨慎使用
三、应用示例
1)变量声明提升
var a = 6; function test() { a = 600; console.log(a); console.log(this.a); var a; console.log(a); } test();
结果:
评论