补充点：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面向对象的语法更像面向对象

JS ES6补充的更多相关文章

  1. js es6 map 与 原生对象区别

    区别 object和Map存储的都是键值对组合.但是: object的键的类型是 字符串: map的键的类型是 可以是任意类型: 另外注意,object获取键值使用Object.keys(返回数组): ...

  2. js 对象补充

    js 对象 普通对象与对象简写 js 没有字典类型,只有对象类型,对象可以完全替代字典来使用 js 中对象的属性名,都采用字符串类型,所以就可以省略字符串的引号标识 对象中属性值为函数时,称之为方法, ...

  3. js ES6 多行字符串 连接字符串

    1. 以前,js多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用` ... `表示: 旧版写法 alert("你好,\n 我叫\n Olive" ...

  4. js ES6 Set和Map数据结构详解

    这篇文章主要介绍了ES6学习笔记之Set和Map数据结构,结合实例形式详细分析了ECMAScript中基本数据结构Set和Map的常用属性与方法的功能.用法及相关注意事项,需要的朋友可以参考下   本 ...

  5. JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

    1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log(“try”)  出现异 ...

  6. 2019.7月-前端面试总结（H5+C3+JS+ES6+Vue+浏览器）

    第二次面试 HTML HTML5中的新标签,举例一下 canvas绘画,本地离线存储localStorage,sessionStorage,video和audio元素,语义化元素,表单类型(date, ...

  7. js原型补充

    js定义函数: <script> function A() {} let a1 = new A(); let a2 = new A(); // 为A类添加原型 => 类似于类属性 A ...

  8. JS&ES6学习笔记（持续更新）

    ES6学习笔记(2019.7.29) 目录 ES6学习笔记(2019.7.29) let和const let let 基本用法 let 不存在变量提升 暂时性死区 不允许重复声明 块级作用域 级作用域 ...

  9. js/es6 元素拖动

    元素事件:鼠标按下事件/鼠标移动事件/鼠标松开事件 元素样式:让元素脱离文档流,采用绝对定位的方式. 一.鼠标按下事件 当鼠标在元素上面按下时,保存元素的初始偏移量和鼠标按下时的坐标,然后在状态变量里 ...

随机推荐

  1. javaScript通过URL获取参数

    // 函数方法 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=( ...

  2. MVC，MVP，MVVM基本原理

    MVC,MVP,MVVM基本原理 模式与框架,其诞生就是为了解决日益复杂的事务处理 当同一问题不断出现,人们就会总结细分出相应的问题解决办法 当需求变得庞大的时候,就会出现细分,在细分的过程中就会出现 ...

  3. JS 手札记

    addEventListener中的事件如果移除(removeEventListener)的话不能在事件中执行bind(this)否则会移除无效! // selectCurrent() // copy ...

  4. Docker 安装nginx 与端口映射

    1. 拉取镜像(网易云docker镜像仓库) docker pull hub.c.163.com/library/nginx:latest 2. 运行nignx,并做端口映射 -d 后台运行  -p映 ...

  5. Servlet学习笔记（一）

    使用Servlet所需要导入的包: java.io.*;                                                 javax.servlet.*;       ...

  6. 让Word Add-in For MediaWiki支持Word 2013

    1.下载并安装Word Add-in For MediaWiki https://www.microsoft.com/en-us/download/details.aspx?id=12298 2.在“ ...

  7. 学习Java第二周

    这是学习java的第二周,又这样不知不觉的结束了 上周想要学习的这一周也都做到了,可是觉得进度有些慢了,学习了: 1. 接口和抽象类: 2. 集合与数组: 3. 方法的定义: 4. 递归算法: 5.对 ...

  8. 安卓APP动态调试（IDA实用攻略）

    转自:http://drops.wooyun.org/mobile/5942 0x00 前言 随着智能手机的普及,移动APP已经贯穿到人们生活的各个领域.越来越多的人甚至已经对这些APP应用产生了依赖 ...

  9. 我的 2019 年 Python 文章榜单

    现在是 2020 年的第一天,我相信从昨天开始,各位的信息流里肯定充斥了各式各样的年度盘点/回顾/总结/记录之类的内容.虽然来得稍晚了,但我还是想给诸位送上这一篇文章. 我将在本文中列出自己于 201 ...

  10. Spring in action读书笔记（一） 自动化装配bean

    需要引入的ja包 <dependency> <groupId>org.springframework</groupId> <artifactId>spr ...