es6重点

es6的class 的出现 基本上可以替代了es5的构造函数和原型,使之代码结构上更加简洁。

0. class

1. 属性

2. 方法

3. 继承 extends

4. 构造函数 constructor

5. 方法重写 override：子类方法覆盖父类，super.父类方法()

6. 父类的构造函数 super ：子类有构造方法且使用this前，必须使用super()

0. es6 属性的定义 写法有两种

1 直接在构造函数内 constructor this.name=name

2 可以写在 大括号内

函数默认值

你好默认值+>

function show(msg = '你好', str = "你我都好") {

console.log(msg, str);

}

// 输入实参我就替换 没有我就输出我自己（默认）

show(); // 没有传递参数 输出你好 你我都好

show('大家好'); // 输出 大家好 你我都好

show('大家好', "世界美好"); // 输出 大家好

对象简写和对象方法简写

1 变量名如果和你的对象的属性名一致 可以简写

let username='悟空'

const obj = { username }

2 对象的方法 简写

const obj ={

say(){ // 简写的方法

}

}

函数默认值

定义函数的同时,可以给形参一个默认值

解构

提供更加方便获取数组中元素或者对象中属性的写法

获取数组中的元素

元素交互顺序

获取对象中的属性

拓展运算符 || 剩余运算符

通过 ...符号来获取剩下的参数

函数内 数组内 对象内获取

set（）去重

理解

永远不会有重复元素的对象

可以理解为不重复的数组

1 set对象 是es6 才推出

2 主要的功能 去重处理

set.add(1);

3 set是一个对象，不是一个数组！！

4 实现 使用set转成数组的时候，需要考虑 （set对象转-数组 数组 - 转成对象）

数组 - 转成对象 new Set(beforeArr)

set对象转-数组 const arr=[...set];

语法：

函数的四种调用模式

1.函数调用模式

如果一个函数不是一个对象的属性时，就是被当做一个函数来进行调用的。此时this指向了window

2.方法调用模式

当一个函数被保存为对象的一个属性时，我们称之为一个方法。当一个方法被调用时，this被绑定到当前对象

const obj = {
  sayHi:function(){
    console.log(this);//在方法调用模式中，this指向调用当前方法的对象。
  }
}
obj.sayHi();

3.构造函数调用模式

如果函数是通过new关键字进行调用的，此时this被绑定到创建出来的新对象上。

function Person(){
  console.log(this);
}
Person();//this指向什么？
var p = new Person();//this指向什么？

4.方法借用模式

也叫上下文模式,分为 apply 与 call

call（）

call方法可以调用一个函数，并且可以指定这个函数的this指向

    const RichWumon = {
      name: "富婆",
      say: function () {
        console.log(this.name, " 我要重金求子");
      }
    }
​
    const obj = {
      name: "屌丝"
    }
​
    RichWumon.say();            // 富婆
    RichWumon.say.call(obj);    // 屌丝

call应用

0. 将伪数组转成数组

    let divs = document.querySelectorAll('div');
    // let divs = document.body.children;
    console.log(divs);
​
    function change(nodelist) {
        console.log(Object.prototype.toString.call(nodelist));
        return Array.prototype.slice.call(nodelist);
​
    }

apply

就是apply()方法接受的是一个包含多个参数的数组。而call()方法接受的是若干个参数的列表

可以利用apply 将 刚才的call 的代码修改一下

    const RichWumon = {
      name: "富婆",
      say: function () {
        console.log(this.name, " 我要重金求子");
      }
    }
​
    const obj = {
      name: "屌丝"
    }
​
    RichWumon.say();            // 富婆
    RichWumon.say.apply(obj);   // 屌丝

apply应用

1.简化log方法

    // 简化log方法
    function log() {
        // 不需要改变this
        console.log.apply(console, arguments);
    }

bind方法

bind() 方法创建一个新的函数, 可以绑定新的函数的this指向

var name = '张三';
function Fn(){
    this.age = 1;
    
    console.log(this.name + this.age);
}
​
Fn();           // 张三 1
​
// 返回值：新的函数
// 参数：新函数的this指向，当绑定了新函数的this指向后，无论使用何种调用模式，this都不会改变。
let obj = {
    name:'小强',
}
const newFn = Fn.bind(obj);
newFn();        // 小强 1

1 创建数组的方式 有两种

const arr = ['a', 'b', 'c']; // 字面量 常用-直接和简单的写法

2 数组 也是可以被new

const arr = new Array('a', 'b', 'c');

console.log(arr);

es5原型链

原型链prototype

一个对象 它可以通过 prototype 来 找到被它继承父亲的方法

如果一个对象从底层触发 可以通过 prototype 一层一层往上找到 继承的关系 = 原型链

作用

1 如果我需要给 某个数据 （字符串、数组、对象） 统一添加一个方法 ，可以直接在原型上添加

2 初学者 不要乱在原型上定义方法 - 影响巨大

备注：DNA 存在于你整个家族 不只是父亲和儿子

异步和同步

异步

1 代码是执行， 但是结果不会马上得到

1 你寄出一封信 信 马上到 目的人手中

2 你妈妈出门喊你回家吃饭， 你马上就回到家了

3 你刚刚做上出租车， 你马上到家了？

2 可以同时做多件事

1 你现在再大街上 和 三个大妈在吵架

每一个人 同时在输出 - 你先骂我 - 你骂我了

同步

1 代码是执行了，但是结果会马上得到

1 你同桌 给你一拳 马上就会感觉到痛

2 饮水机大水 一按下按键 水出来

3 你现在把你加 电源开关关掉 立马就断网

2 按顺序一件一件做事

1 核酸检查

排队的一个人一个人在进行