01-先了解ES6语法

1.声明变量let和const

<script type="javascript">

    //es5声明变量 var 先声明，后赋值

    //var a = 10;

    //console.log(a);

    //因变量提升 导致 1.var声明的变量属于 全局作用域;

    //2.var声明的变量存在覆盖现象;

    var a;

    console.log(a);

    {

        a = 20;

        //var a = 30;

    }

    console.log(a);

    //打印结果：i=10

    for (var i = 0; i<10; i++){

    }

    console.log(i);

    //es6声明变量 let和const

    //let 声明变量的好处：1.属于局部作用域；2.没有覆盖现象

    //const 声明的是 常量, 1.这个常量一旦声明 就不可修改；2.局部作用域；

    const pai = 3.14;

</script>

2.模板字符串

语法:` ${变量名} `

注：` ` 是tab键上面的反引号。

<body>

<ul>

    <li>

        <a href="javascript:;">

            <img src="" alt="">

        </a>

    </li>

</ul>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script type="javascript">

    //es6模板字符串

    /*

    let name='hyp';

    let age=18;

    // `` 使用反引号

    let desc=`${name}的年龄是${age}`;//'hyp的年龄是18'

    console.log(desc);

    */

    //示例

    let imgSrc = './1.png';

    $(function () {

        $('ul').append(

            `<ul>

                <li>

                    <a href="javascript:;">

                        <img src="${imgSrc}" alt="">

                    </a>

                </li>

            </ul>`

        );

    })

</script>

</body>

3.函数的书写

es6箭头函数的书写：

function() {} 等价于 ()=>{}

箭头函数的使用 带来的问题：

    1.使用使用箭头函数this的指向发生了改变

    2.使用箭头函数 arguments 不能使用
<script type="text/javascript">

    /*

    普通函数

    function add(a,b) {

        return a+b;

    };

    alert(add(1,2));

    */

    /*

    // 函数对象

    var add  = function (a,b) {

        return a+b;

    };

    alert(add(3,4))

    */

    /*

    var add = (a,b)=>{

        return a+b;

    };

    alert(add(3,7))

    */

    /*

    var person = {

        name:"alex",

        age: 20,

        fav:function () {

            console.log('喜欢AV');

            // this指的是当前的对象

            console.log(this.age);

        }

    };

    person.fav();

    */

    /*

    var person = {

        name:"alex",

        age: 20,

        fav: () => {

            // this的指向发生了改变,指向了定义person的父级对象 window

            console.log('喜欢AV');

            console.log(this);

        }

    };

    person.fav();

    */

    /*

    var person = {

        name:"alex",

        age: 20,

        fav: function () {

            console.log('喜欢AV');

            // this指的是当前的对象

            console.log(this);

            console.log(arguments[0])

        }

    };

    person.fav('哈哈哈');

    */

    var person = {

        name:"alex",

        age: 20,

        fav: (content) =>{

            // this的指向发生了改变,指向了定义person的父级对象 window

            console.log('喜欢AV');

            console.log(this);
　　　　　　　//arguments 是实参，此处结果为 undefined

            // console.log(arguments)

        }

    };

    person.fav('哈哈哈');

</script>

4.对象的创建

es6中对象的单体模式

fav(){} 等价于 function fav(){} 等价于 var fav = function(){}
<script type="text/javascript">

    // 字面量方式创建对象

    /*

    var person = {

        name:"alex",

        age: 20,

        fav:function () {

            console.log('喜欢AV');

            // this指的是当前的对象

            console.log(this.age);

        }

    };

    person.fav();

    */

    // es6中对象的单体模式

    var person = {

        name:"alex",

        age: 20,

        fav(){
　　　　　　  //此处的this 指的是 当前对象Object；
　　　　　　  //使用单体模式 解决了 箭头函数的this指向的问题 和 arguments 也可以使用了

            console.log(this);

            console.log(arguments);

        }

    };

    person.fav();

</script>

5.es6中类的概念class

<script type="text/javascript">

    /*

    function Person(name,age){

        this.name = name;

        this.age = age;

    }

    Person.prototype.showName = function(){

        alert(this.name);

    };

    // 使用new关键字来创建对象

    var p = new Person('alex',19);

    p.showName()

    */

    // es6中创建对象的方式 使用class

    class Person{
　　　　 //constructor 相当于 __init__

        constructor(name,age){

            this.name = name;

            this.age = age;

        }
　　　　 //函数

        showName(){

            alert(this.name);

        }

    }

　　// 相当于实例化对象

    var p2 = new Person('张三',20);

    p2.showName();

</script>

6.global对象

ES5 的顶层对象，本身也是一个问题，因为它在各种实现里面是不统一的。

　　1.浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。

　　2.浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。

　　3.Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this变量，但是有局限性。

　　1.全局环境中，this会返回顶层对象。但是，Node 模块和 ES6 模块中，this返回的是当前模块。

　　2.函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。

　　3.不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。
　　  但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是两种勉强可以使用的方法。
// 方法一

(typeof window !== 'undefined'

   ? window

   : (typeof process === 'object' &&

      typeof require === 'function' &&

      typeof global === 'object')

     ? global

     : this);

// 方法二

var getGlobal = function () {

  if (typeof self !== 'undefined') { return self; }

  if (typeof window !== 'undefined') { return window; }

  if (typeof global !== 'undefined') { return global; }

  throw new Error('unable to locate global object');

};
// CommonJS 的写法

require('system.global/shim')();

// ES6 模块的写法

import shim from 'system.global/shim'; shim();

上面代码可以保证各种环境里面，global对象都是存在的。

// CommonJS 的写法

var global = require('system.global')();

// ES6 模块的写法

import getGlobal from 'system.global';

const global = getGlobal();

上面代码将顶层对象放入变量global。

Vue(一)之ES6基础的更多相关文章

  1. vue初体验-ES6 基础知识补充 let 和const

    本人水平有限,如内容有误,欢迎指正,谢谢. let  : 主要特点: 1.作用域只局限于当前代码块.2.使用let 声明的变量作用域不会被提升.3.在相同的作用域下不能声明相同的变量.4.for循环体 ...

  2. ES6 基础

    转载自:ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来 ...

  3. 新手必看ES6基础

    ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...

  4. vue学习笔记之基础篇

    本文主要记录学习vue的一些基础内容及常用知识点的记录. 1.搭建脚手架 vue init webpack vue-demo 初始化一个使用webpack打包的vue项目 npm install 安装 ...

  5. 【Vue】组件的基础与组件间通信

    转载:https://segmentfault.com/a/1190000016409329 Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue .x 提 ...

  6. 用vue.js学习es6（一）：基本工具及配置

    一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...

  7. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

  8. webstorm中es6语法报错，.vue文件中es6语法报错

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

  9. webstorm中.vue报错(es6语法报错)-转

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

随机推荐

  1. Key Lookup开销过大导致聚集索引扫描

    以前总结过一篇文章SQL SERVER中什么情况会导致索引查找变成索引扫描 介绍了几种索引查找(Index Seek)变成索引扫描(Index Scan)的情形.昨天写一篇文章的时候,也遇到了一个让人 ...

  2. Linux平台下RMAN异机恢复总结

    下面总结.整理一下RMAN异机恢复这方面的知识点,这篇笔记在个人笔记里面躺了几年了,直到最近偶然被翻看到,遂整理.总结一下.如下所示,个人将整个RMAN异机恢复分为准备工作和操作步骤两大部分.当然,准 ...

  3. 虚拟机-linux系统中图形界面和命令行界面切换

    linux系统中图形化界面和命令行界面之间的切换可以分为两种,临时性切换和永久性切换. 临时性切换即切换后只对本次生效,系统重启后界面还是默认界面. 永久性切换即切换后系统开机后永远处于的界面. 临时 ...

  4. java 结合反射、泛型、注解获取泛型对象

    由于自己也不是特别的理解,不能做过多的解释,因为这些是问过老师做出来的,我还没有学到这里.如果有解释错误的 指出来我改正一下.见谅~(如果学到这里了,会完善) 工具类(SQLUtil)核心代码: pa ...

  5. AI学习---基于TensorFlow的案例[实现线性回归的训练]

    线性回归原理复习 1)构建模型               |_> y = w1x1 + w2x2 + -- + wnxn + b        2)构造损失函数               | ...

  6. ubuntu 打开eclipse出现A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be ... 解决方法（转载）

    原创作者:http://www.cnblogs.com/jerome-rong/archive/2013/02/19/2916608.html Java RunTime Environment (JR ...

  7. JavaScript显示文本框后自动获取焦点

    废话少说,见官方文档: 他的用法是:document.getElementById('username').focus();                   这样写在display:block;显 ...

  8. (2)Python索引和切片

  9. 【vue】vue +element 搭建项目，点击空白处关闭弹窗

    <template> <div class="step2"> <el-button @click="togglePanel($event)& ...

  10. 010_vim和python整合开发

    一.vim-go使用经验总结 Official Webset: https://github.com/fatih/vim-go-tutorial :GoFmt #格式化golang代码 二. 1. 一 ...