ES6

ECMAScript 6认知

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMA：国际标准组织

let，var和const命令

let： 是用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
　　先声明后使用，不存在变量提升，不能重复定义,但是可以修改，（let块级作用域）

var： 既可以先声明后使用，也可以先使用后声明，这样不会报错，会打印undified,
　　而let必须是先声明后使用，如果没有声明就会报错，为全局作用域

const: 声明的变量，只声明常量 ，一旦声明 不可改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

</head>
<body>
<script type="text/javascript">
     // <!--声明变量 一个{}为一个作用域 -->
    //  var 既可以先声明后使用，也可以先使用后声明 全局 ---> 变量提升
    {
        var a = 12;
    }
    // 变量提升
    console.log(a);

    // let 块级作用域
     {
        let b = 12;
    }
    console.log(b);   // 报错


     // const  只声明常量 ，一旦声明 不可改变
    const c = 13;
    c = 14;
    console.log(c)   //  报错
</script>

</body>
</html>

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>

    </li>
</ul>
<script type="text/javascript">
 
    //  2： 模板字符串`` , r如果你想插入变量${变量名}
    var name = 'study',who = 'me';
//    var str = name+","+who+"学习使我快乐";

    var str = `${name},${who}学习使我快乐`;
    console.log(str);    // study,me学习使我快乐


     var url = 'http://www.cnblogs.com/jassin-du/';
     $('ul>li').append(
        `<a href=${url}></a>`
    )
</script>

</body>
</html>

箭头函数 =>

    // 箭头函数 =>
     var add2 = (a,b)=>{
         console.log(a-b)
    };
    add2(5,4);  // 1

    //  字面量方式声明对象
    var person = {
        name:'lishi',
        age:18,
        fav:()=> {
            // 使用箭头函数会改变this的指向，指向了父级元素
            console.log(this);  // window
            console.log(this.name) // lishi

        }
    };
    person.fav();

对象的单体模式

--- （解决箭头函数的指向问题）

    // 4 对象的单体模式 -->解决箭头函数的指向问题
    var person2 = {
        name: 'lishi',
        fav(){
            console.log(this)
        }
    };

    person2.fav()  // 指向对象

面向对象

// 对象的三大特性 封装 继承 多态 

// 函数的作用：封装一块代码，复用，作用域 解决代码的重用性 ，我们写“僵尸代码”， 代码可维护性特别差 

// 继承的作用：少写 特点：子类继承父类，拥有父类的所有属性和方法，还可以有自己的属性和方法


// 多态: 代码可重性  解耦合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    // 对象的三大特征  封装 继承 多态
/*
    //  es5的构造对象方式   使用构造函数来创建对象

    //  构造对象唯一的不同，函数名首字母大写
    function Animal(name,age) {
        // 点语法  set语法和get语法
        this.name = name;       // 属性
        this.age = age;

        // get语法
//        this.name  直接console

    }
    Animal.prototype.showName = function () {
        console.log(this.name)
    };

    var a = new Animal("大黄",8);

    console.log(a.age);   // 8
    a.showName();         // 大黄
*/
    // es6 是使用class构造函数
    class Animal{
        // 里面用对象的单体模式添加函数
        constructor(name = "大黄",age = 8){
            this.name = name;
            this.age = age;
        }
        showName(){  // 函数
            console.log(this.age)
        }
    }
    var a = new Animal();
    a.showName();   // 8



</script>


</body>
</html>