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);  // 2let 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键上面的反引号，${变量名}来插入值  类似于python的三引号 """adfadsf"""，可以写多行文本
另外还可以通过它来完成字符串格式化
示例：let bb = 'jj';var ss = `你好${bb}`;console.log(ss); -- '你好jj'

2. es5和es6的函数对比

    //ES5写法function add(x){return x}add(5);//匿名函数var add = function (x) {return x};add(5);//ES6的匿名函数let add = function (x) {return x};add(5);//ES6的箭头函数,就是上面方法的简写形式let add = x => {console.log(x);return x};console.log(add(20));//更简单的写法，但不是很易阅读let add = x => x;console.log(add(5));多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个()let add = (x,y) => x+y;

3. 自定义对象中封装函数的写法

   //es5对象中封装函数的方法var name = 'xx';var person1 = {name:'xx',age:18,f1:function () {  //在自定义的对象中放函数的方法console.log(this);console.log(this.name)}};  //es5对象中封装函数的方法var name = 'xx';var person1 = {name:'xx',age:18,f1:function () {  //在自定义的对象中放函数的方法console.log(this);let aa = {aaa:'xx',af:()=>{console.log(this)}}aa.af()}};//<h1 id='d1'>xxx</h1>//document.getElementById('d1').onclick = function(){this.innerText;};person1.f1();  //通过自定对象来使用函数//ES6中自定义对象中来封装箭头函数的写法let username = 'xx'; //-- window.usernamelet person2 = {name:'xx',age:18,//f1:function(){};f1: () => {  //在自定义的对象中放函数的方法console.log(this); //this指向的不再是当前的对象了，而是指向了person的父级对象(称为上下文)，而此时的父级对象是我们的window对象，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}console.log(window);//还记得window对象吗，全局浏览器对象，打印结果和上面一样：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}console.log(this.username)  //'子俊'}};person2.f1(); //通过自定对象来使用函数person2 -- window.person2//而我们使用this的时候，希望this是person对象，而不是window对象，所以还有下面这种写法let person3 = {name:'xx',age:18,//f1:function(){};//f1(){}f1(){  //相当于f1:function(){},只是一种简写方式,称为对象的单体模式写法，写起来也简单，vue里面会看用到这种方法console.log(this);//this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}console.log(this.name)  //'超'}};person3.f1()let name2 = 'xx';let person2 = {name2:'xx',age:18,f1:() => {  console.log(this);console.log(this.name2)  }};person2.f1();

4. es5和es6的类写法对比（了解）

<script>//es5写类的方式function Person(name,age) {//封装属性this.name = name;  //this--Python的selfthis.age = age;}//封装方法，原型链Person.prototype.f1 = function () {console.log(this.name);//this指的是Person对象, 结果：'超'};//封装方法，箭头函数的形式写匿名函数Person.prototype.f2 = ()=>{console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}  this指向的是window对象};var p1 = new Person('xx',18);p1.agep1.f1();p1.f2();//其实在es5我们将js的基本语法的时候，没有将类的继承，但是也是可以继承的，还记得吗，那么你想，继承之后，我们是不是可以通过子类实例化的对象调用父类的方法啊，当然是可以的，知道一下就行了，我们下面来看看es6里面的类怎么写class Person2{constructor(name,age){ //对象里面的单体模式，记得上面将函数的时候的单体模式吗，这个方法类似于python的__init__()构造方法，写参数的时候也可以写关键字参数 constructor(name='超2',age=18)//封装属性this.name = name;this.age = age;}  //注意这里不能写逗号showname(){  //封装方法  console.log(this.name);}  //不能写逗号showage(){console.log(this.age);}}let p2 = new Person2('x2',18);p2.showname()  //调用方法  'x2'//es6的类也是可以继承的，这里咱们就不做细讲了，将来你需要的时候，就去学一下吧，哈哈，我记得是用的extends和super</script>

vue详解--- es5和es6的基本语法相关推荐

【Linux驱动开发】设备树详解（二）设备树语法详解
活动地址:CSDN21天学习挑战赛 [Linux驱动开发]设备树详解(一)设备树基础介绍 [Linux驱动开发]设备树详解(二)设备树语法详解 [Linux驱动开发]设备树详解(三)设备树Kern ...
Vue详解及综合案例
一.Vue简介 1.1 简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式的js框架,发布于 2014 年 2 月.与其它大型框架不同的是,Vue 被设计为可以自底 ...
Vue详解+实战分析
文章目录备注一.Vue简介简介 MVVM--双向数据绑定模式其他MVVM实践者为什么使用Vue.js 两大核心要素二.Vue开发引入Vue 快速体验注释 1.插值表达式 {{}} 注释 ...
一套史诗级版vue详解!
文章目录一.vue官方脚手架 1.初识vue 2.使用vue的方式(2种) 3.搭建vue开发环境 4.vue的重要版本 5.使用@vue/cli进行vue开发环境的构建 6.vue基础知识 1.数 ...
vue详解（一）概述和基础语法
文章目录第一章 Vuejs 概述 1 什么是vuejs 2. 为什么要学习Vuejs 3.vuejs版本1和版本2的区别 4.MVC和MVVM的区别第二章 Vue基础语法 2.1 第一个Vuejs ...
Promise使用详解2（ES6中的Promise）
2015年6月, ES2015 (即 ECMAScript 6 . ES6 ) 正式发布.其中 Promise 被列为正式规范,成为 ES6 中最重要的特性之一. 1,then()方法简 ...
Vue — 详解mixins混入使用
前言当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch.mounted等),如果我们在每个组件中去重复定义这些属 ...
python格式化字符串语法_详解Python3 中的字符串格式化语法
一.旧式的字符串格式化 % 操作符参考以下示例: >>> name = "Eric" >>> "Hello, %s." % ...
python语法详解大全_笔记：Python 语法要点汇总
Python 是一门解释型语言,无需编译和链接 Python 解释器交互模式脚本模式源码编码默认情况下,Python 源文件是 UTF-8 编码指定源文件的字符编码 # -*- coding ...

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

1. es6的基本语法

2. es5和es6的函数对比

3. 自定义对象中封装函数的写法

4. es5和es6的类写法对比（了解）

vue详解--- es5和es6的基本语法相关推荐

最新文章

热门文章