首页 Javascript正文

JavaScript申明变量

启明SEO Javascript 2022-09-18 23:33:34 1149 1 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声明的变量作用域是全局的或者是函数级的;


  1. var声明的变量在window上;

  2. var定义的变量可以修改,如果不初始化会输出undefined,不会报错;

  3. var 声明的变量在window上,用let或者const去声明变量,这个变量不会被放到window上;

  4. 很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域,因此用var声明的变量具有变量提升的效果;

  5. var 声明的变量作用域是全局的或者是函数级的;

  6. var可以重复声明:var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误;如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色;如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响;


2)let声明变量


需要”javascript 严格模式”:'use strict';

  1. let 不能重复声明

  2. 不会预处理,

  3. 不存在变量提升

  4. let声明的变量作用域是在块级域中,函数内部使用let定义后,对函数外部无影响(块级作用域)

  5. 可以在声明变量时为变量赋值,默认值为undefined,也可以稍后在脚本中给变量赋值,在生命前无法使用(暂时死区)


(3)const声明变量


  1. const定义的变量不可以修改,而且必须初始化

  2. 该变量是个全局变量,或者是模块内的全局变量;可以在全局作用域或者函数内声明常量,但是必须初始化常量

  3. 如果一个变量只有在声明时才被赋值一次,永远不会在其它的代码行里被重新赋值,那么应该使用const,但是该变量的初始值有可能在未来会被调整(常变量)

  4. 创建一个只读常量,在不同浏览器上表现为不可修改;建议声明后不修改;拥有块级作用域

  5. const 代表一个值的常量索引 ,也就是说,变量名字在内存中的指针不能够改变,但是指向这个变量的值可能 改变

  6. const定义的变量不可修改,一般在require一个模块的时候用或者定义一些全局常量

  7. 常量不能和它所在作用域内其它变量或者函数拥有相同名称


(4)function


function命令用于定义(声明)一个函数:

function sum() {
  var sum++
  return sum;
}
  1. 函数声明后不会立即执行,需要调用的时候才执行;

  2. 对支持ES5和ES6浏览器环境在块作用域内有一定区别,所以应避免在块级作用域内声明函数。

  3. 声明了一个名为 sum的新变量,并为其分配了一个函数定义

  4. {}之间的内容被分配给了 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();

结果:

JavaScript申明变量


评论

启明SEO微信

有什么问题欢迎添加微信咨询

好文推荐

实时访客入口页面出现bd_vid=标识是什么原因

实时访客入口页面出现bd_vid=标识是什么原因

最近查看百度实时访客,总是会看到入口页面会多......

有了微信视频号,但是没有发布权限,怎么开通

有了微信视频号,但是没有发布权限,怎么开通

视频号是微信在2020年1月19号开始内测的......

如何用python抓取爱企查企业信息

如何用python抓取爱企查企业信息

前段时间,经理让我去找一些企业的信息,我平常......

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

服务器配置低,宝塔面板安装IIS总是安装不上怎么办

对于一般企业网站或者博客来说,对服务器的配置......

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

如何修改浏览器指纹,Canvas指纹、Webgl指纹、Audio指纹修改方法?

修改浏览指纹的方法其实也是很简单,主要使用到......

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

win10下安装MYSQL后,提示Can't connect to MySQL server on localhost (10061)相关问题解决方法

我遇到的问题是电脑原先安装过mysql,卸......