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. [20190227]简单探究tab$的bojb#字段.txt

    [20190227]简单探究tab$的bojb#字段.txt --//上午做了删除tab$表,其对应索引i_tab1的恢复,我一直以为这个索引会很大,没有想到在我的测试环境仅仅139个键值.--//查 ...

  2. C#面向对象 1

    using System; using System.Collections.Generic; using System.Collections; using System.Linq; using S ...

  3. Win10 C盘桌面文件右上方的两个蓝色箭头解决方案

    之前看网上有很多桌面蓝色箭头的解决方案,也进行了一些尝试 可是每次Win10系统更新之后蓝色箭头就会重新显示. 最终方案:将建立在桌面的C盘文件移到D盘,桌面创建对应的快捷方式. 一劳永逸,暴力破解.

  4. 基于SurfaceView的可拖动视频控件

    视频播放控件(一) 可拖动,变换SurfaceView public class DragSurfaceView extends SurfaceView implements View.OnTouch ...

  5. BIZHUB184打印机提示维修召唤（m2）修复

    其他不用管,按照操作直接干:菜单键--常用设置--左键---左键---常用设置--左键---右键      咦  神奇的进入了service mode  服务模式 选择CLEAR DATA 项---- ...

  6. 【算法】LeetCode算法题-Palindrome Number

    这是悦乐书的第144次更新,第146篇原创 今天这道题和回文有关,即从前往后和从后往前是一样的,如"上海自来水来自海上"就是一个回文字符串,如整数121就是回文数,这些都是和回文相 ...

  7. March 10th, 2018 Week 10th Saturday

    All good things must come to an end. 好景无常. Love is when the other person's happiness is more importa ...

  8. ECharts图表之柱状折线混合图

    Echarts 官网主页  http://echarts.baidu.com/index.html Echarts 更多项目案例  http://echarts.baidu.com/echarts2/ ...

  9. vue-引入外部js文件的方法和常量

    1.方法调用 a:  js文件(static/js/public.js) //函数的定义 返回上一页 export function goback(laststep) { laststep } b: ...

  10. Python selenium ActionChains 基本操作

    ActionChains类继承自object类,但是需要为其传入一个driver对象,即ActionChains(driver) 此类常用于模拟鼠标键盘操作,其API列表如下: perform()   ...