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. HanLP汉语言分析框架

    HanLP(Han Language Processing)是由一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环境中的应用. HanLP具备功能完善.性能高效.架构清晰.语料时新. ...

  2. MSSQL 如何采用sql语句 获取建表字段说明、字段备注、字段类型、字段长度

    转自: http://www.maomao365.com/?p=4983 <span style="color:red;font-weight:bold;">下文讲述- ...

  3. Powershell远程执行命令

    $Username = 'xx' $Password = 'xx' $ComputerName='xx' $pass = ConvertTo-SecureString -AsPlainText $Pa ...

  4. 谁记录了mysql error log中的超长信息

    [问题] 最近查看MySQL的error log文件时,发现有很多服务器的文件中有大量的如下日志,内容很长(大小在200K左右),从记录的内容看,并没有明显的异常信息. 有一台测试服务器也有类似的问题 ...

  5. CharacterController平滑移动到某点

    通常使用CharacterController控制玩家移动时,我们都会写以下代码: void Update() { var move = (moveTarget - transform.Positio ...

  6. vscode中配置php的xdebug

    vscode中配置php的xdebug vscode配置php的xdebug,步骤如下: 1. 安装phpdebug插件: PHP Debug 2.网上下载php的xdebug扩展(注意根据自己的ph ...

  7. 几个常用dos网络命令

    ping www.baidu.com 测试网络的同时,查看ip地址 1. 如图:百度的ip为  14.215.177.39.浏览器直接输入ip即可进入百度首页. 另外还有,14.215.177.38 ...

  8. 排序算法之冒泡排序的思想以及Java实现

    1 基本思想 设排序表长为n,从后向前或者从前向后两两比较相邻元素的值,如果两者的相对次序不对(A[i-1] > A[i]),则交换它们,其结果是将最小的元素交换到待排序序列的第一个位置,我们称 ...

  9. Leancloud+Valine打造Hexo个人博客极简评论系统

    以下配置是基于Next主题6.1.0版本 效果见个人博客的最下方评论. Leancloud配置 首先访问Leancloud官网https://leancloud.cn/ 有Github账号的小伙伴可以 ...

  10. 【PS技巧】如何拼图

    1.材料准备 根据对图片的内容表达,粗略的“计划”,每张图片摆放位置及尺寸.C与D等高,C/D与B叠高后与A等高.C与D叠宽后与B等宽. 2.记录每张图片原始大小 (1)双击工作区,打开待拼接图片 ( ...