站长资讯网
最全最丰富的资讯网站

es6声明变量的方法有哪些

声明变量的方法:1、使用var命令,语法“var 变量名;”;2、使用function命令;3、使用cosnt命令,语法“const 变量名;”;4、使用let命令,语法“let 变量名”;5、使用import命令;6、使用class命令。

es6声明变量的方法有哪些

本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

ES5 只有两种声明变量的方法:var命令和function命令。

ES6 除了添加letconst命令,还有两种声明变量的方法:import命令和class命令。

所以,ES6 一共有 6 种声明变量的方法。

(1) var命令

var a ;  //undefined var b = 1;
  • var定义的变量可以修改,如果不初始化会输出undefined,不会报错
  • var 声明的变量在window上,用let或者const去声明变量,这个变量不会被放到window上
  • 很多语言中都有块级作用域,但JS没有,它使用var声明变量,以function来划分作用域,大括号“{}” 却限定不了var的作用域,因此用var声明的变量具有变量提升的效果
  • var 声明的变量作用域是全局的或者是函数级的

(2)function命令

function add(a) {   var sum = a + 1;   return sum; }
  • 声明了一个名为 add的新变量,并为其分配了一个函数定义
  • {}之间的内容被分配给了 add
  • 函数内部的代码不会被执行,只是存储在变量中以备将来使用

(3) cosnt命令

const a;     //报错,必须初始化 const b = 1;
  • const定义的变量不可以修改,而且必须初始化
  • 该变量是个全局变量,或者是模块内的全局变量
  • 如果一个变量只有在声明时才被赋值一次,永远不会在其它的代码行里被重新赋值,那么应该使用const,但是该变量的初始值有可能在未来会被调整(常变量)
  • 创建一个只读常量,在不同浏览器上表现为不可修改;建议申明后不修改;拥有块级作用域
  • const 代表一个值的常量索引 ,也就是说,变量名字在内存中的指针不能够改变,但是指向这个变量的值可能 改变
  • const定义的变量不可修改,一般在require一个模块的时候用或者定义一些全局常量
  • 可以在全局作用域或者函数内声明常量,但是必须初始化常量

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

(4) let命令

let a;  //undefined let b = 1;  function add(b) {   let sum = b + 1;   return sum; } let c = add(b);
  • 需要”javascript 严格模式”:'use strict';
  • 不存在变量提升
  • 不允许重复声明
  • let声明的变量作用域是在块级域中,函数内部使用let定义后,对函数外部无影响(块级作用域)
  • 可以在声明变量时为变量赋值,默认值为undefined,也可以稍后在脚本中给变量赋值,在生命前无法使用(暂时死区)

(5) import命令

1、ES6引入了自己的模块系统。通过export导出,import导入。

2、与CommonJS不同的是,它是获取模块的引用,到用的时候才会真正的去取值。

3、例如js中:

  let student = [     {       name: 'xiaoming',       age: 21,     },     {       name: 'xiaohong',       age: 18     }   ]   export default student; // 这种导出方式,你可以在import时指定它的名称。

4、在app.js中我们就可以这样用:

  import StudentList from './student.js'; //指定名称   console.log(StudentList[0].name); //xiaoming

(6) class命令

1:class作为es6的语法糖,实际上es5也可以实现的。

  class Point {     constructor (x, y) {       this.x = x;       this.y = y;     }     toString () {       return this.x + ',' + this.y;     }   }
//上面是一个类   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"]
  • 方法之间不需要逗号分隔

  • toString () {} 等价于 toString: function () {}

  • 你仍然可以使用Point.prototype

  • 你可以用Object.assign()一次性扩展很多方法

  • 类内部定义方法多是不可以枚举的

  • constructor(){}是一个默认方法,如果没有添加,会自动添加一个空的。

  • constructor默认返回实例对象(this),完全可以指定返回其他的对象。

  • 必须用new调用

  • 不存在变量提升

  • 当用一个变量去接受class时,可以省略classname

  • es6不提供私有方法。

2:使用extends继承

class ThreeDPoint extends Point {     constructor (x, y, z) {       console.log(new.target); //ThreeDPoint       super(x, y);       this.z = z; }     toString () {       return super.toString() + ',' + this.z;     }     static getInfo() {       console.log('static method');     }     get z() {       return 4;     }     set z(value) {       console.log(value);     } }   ThreeDPoint.getInfo(); // "static method"   let ta = new ThreeDPoint(2,3,4);   console.log(ta.toString()); //2,3,4   console.log(ta.z); // 4   ta.z = 200; // 200   console.log(Object.getPrototypeOf(ThreeDPoint)); //Point
  • constructor中必须调用super,因为子类中没有this,必须从父类中继承。

  • 子类的__proto__属性总是指向父类

  • 子类的prototype属性的__proto__总是指向父类的prototype

  • Object.getPrototypeOf()获取父类

  • super作为方法只能在constructor中

  • super作为属性指向父类的prototype.

  • 在constructor中使用super.x = 2,实际上this.x = 2;但是读取super.x时,又变成了父类.prototype.x。

  • 原生构造函数是无法继承的。

  • get set 方法可以对属性的赋值和读取进行拦截

  • (静态方法不能被实例继承。通过static声明

  • 静态属性只能 ThreeDPoint.name = “123” 声明 (与static没什么关系)

【推荐学习:javascript高级教程】

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号