第1章 ES6简单用法

编辑本文章

阮一峰(ES6)

一、ES6中的let和const声明变量

　　1、JavaScript的var声明变量：

　　因变量提升，导致var声明的变量属于全局作用于。所以var声明变量存在覆盖现象。

2、let声明变量：

a、属于局部作用域

b、没有覆盖现象

3、const声明的是常量：

a、const声明的常量一旦创建后不可修改

b、const声明的常量属局部作用域

二、ES6模板字符串

${变量名}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>let和const的使用</title>
</head>
<body>

</body>
<script type="application/javascript">
    let name="ya";
    let age=18;
    //用反引号
    var desc=`欢迎${name}，今年${age}岁了`
    console.log(desc)
</script>
</html>
View Code

 

三、ES6箭头函数书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6箭头函数书写</title>
</head>
<body>

</body>
<script type="application/javascript">
    //普通函数声明方式
    function add(a,b) {
        return a+b
    }
    //函数对象方式
    var add=function (a,b) {
        return a+b
    }
    //ES6声明方式
    var add=(a,b)=>{
        //执行体
        return a+b
    }
    var persion={
        name:"ya",
        age:18,
        fav:function () {
            //这里this指当前函数
            console.log(this);
            return "fav";
        }
    }
    var persion={
        name:"ya",
        age:18,
        fav: ()=> {
            //这里this指向了定义person的父级对象
            console.log(this);
            return "fav";
        }
    }
</script>
</html>
View Code

 

箭头函数使用带来的特性：

1、函数内部的this对象发生了改变，值向创建对象的父级

2、arguments不能使用

四、对象的创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象创建</title>
</head>
<body>
<script type="application/javascript">
    //ES6中对象创建
    var persion={
        name:"ya",
        age:18,
        fav() {
            //对象的单体模式
            //这里的this值对象自己，arguments参数也可直接使用
            console.log(this);
            return "fav";
        }
    };
</script>
</body>
</html>
View Code

 

 单体模式：

1、this标示对象本身

2、arguments参数可用

五、ES6中类的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6中类的使用</title>
</head>
<body>
<script type="application/javascript">

    /*
    //常规对象创建
    function Person(name, age) {
        this.name=name;
        this.age=age;
    }
    Person.prototype.showName=function () {
        alert(this.name)
    }
    //使用关键字new来创建对象
    var p=new Person('ya',18)
    p.showName()
    */

    //ES6中创建对象的方式，使用class语法
    class Person{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }//这里不能加逗号
        showName(){
            alert(this.name)
        }
    };
    var p2=new Person('huang',18)
    p2.showName()
    
</script>
</body>
</html>
View Code

 

 

 

 

 

 

posted @ 2019-06-05 19:27  丫丫625202  阅读(144)  评论(0)  编辑  收藏  举报