JS ES6补充

补充点：1、let const 　　2、字符串模板　　3、箭头函数　　4、对象的单体模式　　5、面向对象

一、定义变量

A、var

特点：

1、定义全局变量

2、可以重复定义

3、变量名提升

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>声明变量</title>
</head>
<body>
    <script>
        {
            var a =66;
            console.log('in'+ a);
        }
        // 在块级作用域的变量，可以在全局中使用
        // 1.var 定义的是全局变量
        console.log('out'+ a);
        // 2.var可以重新定义变量
        var a = 88;
        console.log('new'+a);
        // 3.变量名提升
        // 过程 var b -> 提升， 打印 b, b没有赋值，结果：undefined
        console.log(b);     //undefined
        var b = 10;
    </script>
</body>
</html>

B、let

特点：

1、块级变量

2、在同一作用域中，不可以重新定义

3、不支持变量名提升

{
    let b = 5;
    console.log('b1', b)
}
// 1.let 声明块级变量
// console.log('b2', b);    // b is not defined
let b = 10;
console.log('b3', b)

// 2.let 不能重新声明变量
// let b = 20;
// console.log('b4', b)    // Identifier 'b' has already been declared

// 3. let不支持变量提升
console.log(c);     // Cannot access 'c' before initialization
let c = 2;

C、const

特点：

1、定义常量

2、在同一作用域中，不能重复定义

3、不支持变量提升

const a = 10;
// 1.const 定义的是常量，常量不能被修改
// a = 20;
// console.log(a)  // Assignment to constant variable.

// 2. 不能重复声明
// const a = 20;
// console.log(a)  // Identifier 'a' has already been declared


// 3. const 定义变量，不支持变量提升
console.log(b);
const b = 30;   // Cannot access 'b' before initialization

二、字符串模板

1、反引号(table键，上面的键)

2、格式：${变量名}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串模板</title>
</head>
<body>
    <script>
    var name = 'tom';
    var age = 24;
    // 注意：
    // 1. 反引号
    // 2.${变量名}
    var info = `${name},今年${age}岁!!!`;
    console.log(info)    
    
    </script>
</body>
</html>

三、箭头函数

A、简介

格式：

f = function(a, b){} ---> f = (a, b)=>{}

注意：

1、形参为一个数时，括号可以省略不写

2、{}中只要return 时，{}也可以省略不写

B、箭头函数的坑

1、this

传统函数的this，指向调用的对象

箭头函数的this，指向声明对象的对象

// 字面量方式创建对象
var person = {
    name: 'tom',
    age: 24,
    inf0: function(){
        // 1. 普通函数 this 指向 调用 对象 既 person
        console.log(this);   // {name: "tom", age: 24, inf0: ƒ}
    }
};
person.inf0();

// 字面量方式创建对象
var person2 = {
    name: 'alex',
    age: 43,
    info: ()=>{
        // 1.箭头函数 this 指向 声明 对象 及 windows
        console.log(this);  // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }
};

person2.info();

2、arguments

    // 2.箭头函数不能使用 arguments
    var foo = function(){
        console.log(arguments);  // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    }
    foo(1, 2, 3);

    var bar = ()=>{
        console.log(arguments);     // Uncaught ReferenceError: arguments is not defined
    }
    bar(3, 2, 1);

四、对象的单体模式

目的：解决箭头函数的this坑

// 字面量方式创建对象
var person = {
    name: 'tom',
    age: 34,
    // 格式对比：
    // info: ()=>{}
    // info(){}
    info(){
        console.log(this.name);     // tom
    }
}
person.info();

五、面向对象

1、ES5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    // 构造函数的方法创建对象，注意名字要大写
    function Person(name, age){
        self.name = name;
        self.age = age;
    }
    // 创建该对象的方法
    Person.prototype.showname = function(){
        console.log(self.name);
    }
　　 // 实例化对象
    var p1 = new Person('tom', 24);
    p1.showname();      // tom
    </script>
</body>
</html>

ES6

// 定义类
class Person{
    // 构造方法
    constructor(name, age){
        self.name = name;
        self.age = age;
    }
    // 自定义方法
    showname(){
        console.log(self.name);
    }
}

// 实例化对象
var p2 = new Person('tom', 24);
// 调用方法
p2.showname();  // tom

注意：ES6面向对象的语法比ES5面向对象的语法更像面向对象

猜你喜欢