基本介绍

  • ECMA是什么
    • European Computer Manufacturers Association(欧洲计算机制造商协会)
    • ECMA是标准
  • Javascript和ECMA的关系
    • 是ECMAScript标准的实现，有时也被混为一谈
  • JS包含三个部分
    1. ECMAScript（核心）
    2. 扩展==>浏览器端
      • DOM(文档对象模型)
      • BOM(浏览器对象模型)
    3. 扩展==>服务器端
      • Node.js
  • ES的几个重要版本
    • ES5:09年发布
    • ES6(ES2015)：15年发布，也被称为ECMA2015
    • ES7(ES2016): 16年发布，也被称为ECMA2016(变化不大)

  • can I use网站

    ES5严格模式

    严格模式介绍

  • 除了正常运行模式（混杂模式），ES5添加了第二种运行模式：“严格模式”（strict mode）

    作用

  • 消除js语法一些不合理、不严谨之处，减少一些怪异行为

  • 消除代码运行的一些不安全的地方

  • 为未来新版本的js做好铺垫

    如何使用

  • 使用：在script标签/函数里的最前面加句话： ‘use strict’;

  • 如果浏览器不支持，只解析为一条简单的语句，没有任何副作用

    严格模式对js语法和行为的具体改变

  • 必须用var声明变量

    • 否则会被当做window的一个属性

  • 禁止自定义的函数中的this指向window

    • 当构造函数不使用new时就会发生
      1. function Person(name, age){
      2. this.name = name;
      3. this.age = age;
      4. }
      5. var p1 = Person();

  • 创建eval作用域（现在eval用的很少了）

    • eval是为了安全，耗性能，应该避免使用

  • 对象不能用重名的属性

    let和const区别

    var关键字的问题

  • var关键字可以重复声明变量

  • var关键字无法限制修改（无法定义常量）

  • var关键字没有块级作用域

    • 块级作用域的好处：避免污染全局环境
    • 立即执行的匿名函数可以模拟块级作用域

      let和const

  • 都不能重复声明

  • let定义变量，可以修改；const定义常量，不可修改。
  • 都有块级作用域
    • 块级作用域==> {}

  • let最常见的应用

    • 循环给按钮添加事件
      1. <body>
      2. <button>按钮0</button>
      3. <button>按钮1</button>
      4. <button>按钮2</button>
      5. </body>
      6. <script>
      7. var btns = document.getElementsByTagName('button');
      8. for(let i = 0; i < btns.length; i++){
      9.    btns[i].onclick = function(){
      10.        alert('按钮' + i);//为了块级作用域而单独存在的i，会常驻内存。
      11.    };                   //用var也可以，需要使用闭包（才能使变量常驻内存）
      12. }
      13. console.log(btns[0].onclick);
      14. console.log(btns[1].onclick);
      15. console.log(btns[2].onclick);
      16. </script>

      var和let的区别

  • let不能重复声明，但var可以。

  • 使用let会产生块级作用域，且只在自己的作用域内生效，但var没有块级作用域的概念，它存在于函数作用域或者全局作用域。

  • var定义的变量在变量提升时会被初始化为undefined，let也会进行变量提升，但不会被初始化，存在一个不能使用的暂时性死区。

    对象的简写

  • 省略同名的属性：name: name 写成 name,

  • 省略方法的冒号和function：say:function () {} 写成 say(){}

    1. let name = "zhang";
    2. let age = 13;
    3. let obj = {
    4.   name,
    5.   age,
    6.   say(){
    7.       console.log("你管我");
    8.   }
    9. }
    10. console.log(obj);

    形参默认值

    1. function Point(x=0,y=0) {
    2. this.x=x;
    3. this.y=y;
    4. }
    5. let point=new Point(12,23);
    6. console.log(point);
    7. let point1=new Point();
    8. console.log(point1);

    解构赋值

    基本概念

    作用

  • 当需要对多个变量进行赋值时，解构赋值可以简化写法

    条件

  • 左右两边的结构需要保持一致

    规则

  • 在对象的解构赋值中，需要保持接收变量名和对象变量名一致

  • 在数组的解构赋值中，是按照位置一一传递的 ```javascript //1、普通赋值方法 let obj = {
    1. name : "zhang",
    2. age: 13
    } let name = obj.name; let age = obj.age;

//2、解构赋值->对象 let obj = { name : “zhang”, age: 13 } let {name, age, hh} = obj; console.log(name); console.log(hh);//undefined //部分赋值 let {age} = obj;

//2、解构赋值->数组 let arr = [1, 2, 3 ,4]; let [a, b, c, d] = arr; console.log(c); //部分赋值 let [a, b, c] = arr; let[,,c] = arr;

  1. <a name="p3mBq"></a>
  2. ## 应用
  3. ```javascript
  4. let obj = {
  5.     name:"zhang",
  6.     age : 13
  7. }
  8. function person({name, age}){
  9.     console.log(name);
  10.     console.log(age);
  11. }
  12. person(obj);

箭头函数

基本概念

定义

  • 箭头函数是ES6中对函数的一种简写方式
  • 适用于非方法函数 ```javascript let person1 = function(name, age){ console.log(name); }

let person2 = (name, age) => { console.log(name); } person2(‘zhang’, 13);

  1. <a name="qQ05h"></a>
  2. ### 进一步简写
  4. 1. 如果只有一个参数，参数的()可以省
  5. ```javascript
  6. let person2 = name => {
  7.     console.log(name);
  8. }
  1. 如果函数体只有一个return语句，函数体的{}和return可以省 ```javascript let person1 = function(age){ return age + 3; }

let person2 = age => age + 3; console.log(person2(13));//16

  1. <a name="Q3bNc"></a>
  2. ### 特点
  4. 1. 箭头函数不能用作构造器，和new一起用会抛出错误。这是因为箭头函数没有prototype属性，也没有constructor，因此不具备构造能力。
  5.    1. 打印prototype，不会报错，显示undefined
  6. 2. 箭头函数没有自己的this，它的this指向父级作用域的this，且不能用call、bind、apply改变
  7. 2. 箭头函数没有arguments??
  8. ```javascript
  9. let btn = document.getElementById('btn');
  10. btn.onclick = () => {
  11.     console.log(this);//window
  12. }

和普通函数的区别

  1. 形式上更简明
  2. 箭头函数不能用作构造器，不能使用new。这是由于箭头函数没有prototype属性，也没有constructor，因此不具备构造能力。
  3. 箭头函数没有自己的this，它的this指向父级作用域的this，且不能用call、bind、apply改变
  4. 箭头函数不能使用类数组arguments，如果使用会指向父级的arguments。

    使用场景

  • 本质：要用this的地方就不适合

  • 场景：非方法函数

    1. let obj = {
    2.   say:()=>{
    3.       console.log(this);
    4.   },
    5.   say2:function(){
    6.       console.log(this);
    7.   }
    8. }
    9. obj.say();//window
    10. obj.say2();//obj

    模板字符串

    作用

    简化字符串的拼接

    语法规则

  • 英 + 反引号包裹 ：`

  • 英 + dollar符号 ，大括号：${}
    1. let obj = {
    2.   name: "zhang",
    3.   age : 13
    4. }
    5. console.log(`我是${obj.name}，今年${obj.age}岁了。`);

    三点运算符

    作用

  1. 做可变参数，替代arguments。
  • 只能接收最后部分的参数 ```javascript (function a(…values){ console.log(arguments);//类数组 console.log(values);//真正的数组 }(1, 2, 3));

(function a(s, …values){ console.log(arguments);//类数组:1,2,3 console.log(values);//真正的数组:2,3 }(1, 2, 3));

(function a(s, …values, y){//报错 console.log(values); }(1, 2, 3));

  2. 2. 做扩展运算符
  3. ```javascript
  4. let arr = [2, 3, 4, 5];
  5. let arr1 = ['a', ...arr, 'b'];
  6. console.log(arr1);
  7. arr1.push(...arr);

实质

  • 调用iterator接口来遍历，只要有iterator都可以使用

  • 比如array、set

    实际应用

  • Vue中有：…mapState

    异步编程

    过去的异步编程

  1. 回调函数
  2. 事件监听 ```javascript //回调函数 function async_fun(param, callback){//把function传进来准备调用 setTimeout(()=>{ callback(‘异步操作：’ + param);//这里才真的调用 }, 1000); }

async_fun(1, function(a){ console.log(a); async_fun(2, function(a){ console.log(a); async_fun(3, function(a){ console.log(a); }) }) })

  1. <a name="O6BeB"></a>
  2. ## promise
  4. - 用同步的流程做异步的操作
  5. <a name="Wwc5d"></a>
  6. #### 本质
  8. - 本质是状态机，也就是通过设置不同的状态，来告诉用户异步操作是执行成功了还是执行失败了。
  9. - 本质是一个构造函数
  10.    - 有一个参数，这个参数是回调函数。这个回调函数有两个参数，分别是resolve和reject。
  11.       - resolve
  12.          - 设置异步操作执行成功之后怎么做
  13.          - 向外面传递异步操作执行成功之后的数据
  14.       - reject
  15.          - 设置异步操作执行成功之后怎么做
  16.          - 向外面传递异步操作执行失败之后的数据
  17.    - resolve和reject都是回调函数
  18. ```javascript
  19. new promise()

状态

  • 初始状态：pending
  • 成功状态：resolved / fulfilled (resolve回调函数就是将Promise的状态从pending设置为resolved)

  • 失败状态：rejected

    then方法

  • 作用：promise的then方法可以接收到resolve和reject传递过来的数据

  • then方法里面有两个参数，这两个参数都是回调函数

    应用

  • 超时处理

  • 封装处理ajax请求

    • 将异步函数（比如）ajax放在Promise对应的构造函数中

      实例

  • 将异步函数（比如）ajax放在Promise对应的构造函数中

  • 通过resolve和reject回调函数设置promise状态并且传递异步操作数据
  • 可以用promise的实例的then方法来接收resolve和reject回调函数传递过来的异步数据
  • 链式then：异步操作1 -> 异步操作2 -> 异步操作3 ```javascript function ajax_fun(url){ //获取ajax数据，并且设置promise状态 let promise = Promise(function(resolve, reject){
    1.   //启动异步任务
    2.   let request = new XMLHttpRequest();
    3.   request.onreadystatechange = function(){
    4.       if(request.readyState === 4){
    5.           if(request.state === 200){
    6.               let data = request.response;
    7.               resolve(data);
    8.           }else{
    9.               reject('请求失败了');
    10.           }
    11.       }
    12.   };
    13.   request.responseType = 'json';
    14.   request.open("GET", url);
    15.   request.send();
    }); return promise; } document.getElementById(‘btn’).onclick = () => {
    1. ajax_fun(XXXX).then((data)=>{
    2. console.log(data);
    3. return ajax_fun(xxxx + first_id);
    },(error)=>{
    1. console.log(error);
    }).then((data)=>{},(error)=>{}){
    1. };
    }
  1. <a name="no9qd"></a>
  2. # 面向对象
  4. - 类的定义和使用
  5.    - 通过class定义类
  6.    - 在类中通过constructor定义构造方法，构造方法来初始化类的属性
  7.    - 通过new类来创造类的实例
  8. - 类的继承
  9.    - 子类继承父类之后可以获得父类的属性和方法
  10. - 继承的具体语法
  11.    - extends
  12.    - super
  13.    - 重写
  14. ```javascript
  15.  //父类   
  16. class Person{
  17.    constructor(name, age){
  18.        this.name = name;
  19.        this.age = age;
  20.    }
  21.    showPerson(){
  22.        console.log(this.name, this.age);
  23.    }
  24. }
  25. let person = new Person('林冲', 29);
  26. console.log(person);
  27. perosn.showPerson();
  29. //子类
  30. class Student extends Person{
  31.    constructor(name, age, stuNum){
  32.        super(name, age);
  33.        this.stuNum = stuNum;
  34.     }
  35.     showPerson(){
  36.         console.log(this.name, this.age, this.stuNum);
  37.     }
  38. }
  39. let student = new Student('夏雨', 10, 22201901);