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. HDFS客户端的权限错误：Permission denied

    报错:Permission denied: user=root, access=WRITE, inode="hadoop":hadoop:supergroup:rwxr-xr-x ...

  2. [20190213]学习bbed-恢复删除的数据.txt

    [20190213]学习bbed-恢复删除的数据.txt --//以前也做过类似测试,当时在用bbed做verify时错误都不处理,当时的想法就是能读出就ok了.--//而且当时也做成功,纯粹是依葫芦 ...

  3. Oracle的实例恢复解析

    在数据库服务器异常断电重启后,数据库会进行实例恢复,那么实例恢复的过程中Oracle做了什么操作呢?参考官网在这里做一下解释,菜鸟水平有限,欢迎勘正. 首先说下实例恢复的定义: Instance re ...

  4. 3. svg学习笔记-基本形状和画笔属性

    svg中可以绘制的基本图形有线段,矩形,多边形,圆,椭圆,分别来看一下这些基本图形: 线段 使用<line>元素创建一条线段,格式如下: <line x1=" start- ...

  5. python——虚拟环境之virtualenvwrapper-win（windows10,64位）

    1 问题描述 当M个项目需要N个版本的python环境配置时(M>N)时,我们没有必要对每个项目都创建一个虚拟环境,只需要创建N个虚拟环境即可.这样节省了大量存储空间(特别是当M远大于N时).但 ...

  6. March 01st, 2018 Week 9th Thursday

    Let bygones be bygones. 过去的就让它过去吧. What happened has happened, it cannot be undone, so just leave it ...

  7. 聚类——K-means

    聚类——认识K-means算法 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 一.聚类与分类 聚类: 无监督学习.聚类是在预先不知道欲划分类的情况下, ...

  8. 团队作业—预则立&&他山之石

    团队作业-预则立&&他山之石 Deadline: 2017.10.24 22:00pm 作业要求 一.确立团队选题,建立和初步熟悉团队git的协作方式.项目后续的代码.文档都要通过gi ...

  9. nginx tcp负载均衡 （Module ngx_stream_upstream_module）

    Example ConfigurationDirectives     upstream     server     zone     state     hash     least_conn   ...

  10. Apache Spark技术实战之6 --Standalone部署模式下的临时文件清理

    问题导读 1.在Standalone部署模式下,Spark运行过程中会创建哪些临时性目录及文件? 2.在Standalone部署模式下分为几种模式? 3.在client模式和cluster模式下有什么 ...