vue详解--- es5和es6的基本语法

ES6新特性详解：let、const、模板字符串与函数及类的对比

最新推荐文章于 2024-08-21 17:00:15 发布

原创

最新推荐文章于 2024-08-21 17:00:15 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了ES6中的let和const的特性和区别，包括它们的作用域、提升和声明规则。同时，讲解了模板字符串的使用方法，以及ES5和ES6函数的不同，包括匿名函数和箭头函数的表达形式。此外，还探讨了在ES5和ES6中自定义对象内封装函数的不同，特别是箭头函数导致的this指向变化。最后，简要对比了ES5和ES6中类的写法，包括构造函数和方法的定义。

1. es6的基本语法

let：
特点：   
1.a是局部作用域的function xx(){let a = 'xxoo';}  if(){let a = 'ss';} 
2.不存在变量提升  
3.不能重复声明（var可以重复声明）  ,var声明的不能用let再次声明,反之也是
4 let声明的全局变量不从属于window对象，var声明的全局变量从属于window对象。

关于第4个特点的简单说明：
	ES5声明变量只有两种方式：var和function。
	ES6有let、const、import、class再加上ES5的var、function共有六种声明变量的方式。
	还需要了解顶层对象：浏览器环境中顶层对象是window.
	ES5中，顶层对象的属性等价于全局变量。var a = 10; window.a 
	ES6中，有所改变：var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说ES6开始，全局变量和顶层对象的属性开始分离、脱钩，目的是以防声明的全局变量将window对象的属性造成污染，因为window对象是顶层对象，它里面的属性是各个js程序中都可以使用的，不利于模块化开发，并且window对象有很多的自有属性，也为了防止对window的自由属性的污染，所以在ES6中将顶层对象和全局变量进行隔离。
	举例：
		var a = 1;
		console.info(window.a);  // 2
		
		let b = 2;
		console.info(window.b); //undefined

// var a;  -- undefined
console.log(a); -- undefined
var a = 10;

var b = 'xx';
console.log(c);  -- 报错
let c = 'xx'；


const ：特点：  1.局部作用域  2.不存在变量提升  3.不能重复声明  4.一般声明不可变的量
const pi = 3.1415926;
//pi = 'xx' -- 报错

模板字符串：tab键上面的反引号，${变量名}