day15 es5和es6新增

JavaScript的构成

• DOM 操作文档

• BOM 操作浏览器

• ECMAScript ( 基础语法 )

ECMAScript

ECMAScript简称为ES , ( ECMA欧洲计算机协会 ) , ES分为不同的版本 :

常用的版本有ES3 ( 常用的所有浏览器都支持,都可以直接解析) , ES5 ( 大部分的高版本浏览器都能支持 ) , ES6 ( 部分浏览器支持,但存在兼容问题,不能直接解析,必须先编译成ES3才能解析 , bable.js 是进行es版本编译的 , ) ,ES7...及以后都称为ES6

• ES3 (常用版本)

• ES5 (更加规划范和更加简易化 2015.10)

• ES6 (模块化编程 基于ES5更加简易化 2016.4)

 

ES5新增内容

一.严格模式

概述 : 我们普通书写的js代码,并没有特别多的规划,甚至在某些事件可以随意发挥,这种模式被称为怪异模式. 相对而言一种更加规范化的模式被称为严格模式

严格模式的使用

使用 "use strick"进行声明 , 它的声明位置必须在第一行 ( 一般用于源码书写 )

严格模式的特性

1. 声明一个变量必须具备关键词 ( var , let , const )

2. 函数内的this不会指向window , this是undefined

3. 禁止八进制相关的方法

4. 函数内argument的形参和实参不同步

5. 函数只能在声明函数的地方进行声明

// 怪异模式
var a = 10
b = 20
console.log(a)  //10
consoloe.log(b) //20

// 严格模式
// 声明必须在一行
"use strick" 
// 声明一个变量必须要有关键词
c = 30
console.log(c) // c没有定义
// 严格模式中函数内的this不能指向window
function fn(){
    console.log(this)
}
fn() //this 是undefined

二.数组新增的高阶函数

概述 :

以函数作为参数的函数叫做高阶函数

新增的相关函数 :

1 . 遍历 : map , forEach

• forEach : 有两个参数,第一个是函数,第二个是参数(一般不用,无意义)

// forEach: 
// 函数内有三个参数,第一个是值(每个成员),第二个是下标,第三个是数组
// forEach没有返回值,js函数内参数如果不需要可以不传
var arr = [11, 22, 33, 44]
var arr = arr.forEach(function (item, index, arr) {
    console.log(item)  //每个成员
    console.log(index) //下标
    console.log(arr)   //数组
})

• map : 跟forEach使用是一样的 , 有返回值,返回数组

// map
// 跟forEach使用是一样的 , 唯一的区别是map有返回值 ( 返回数组 ) , forEach没有
var arr1 = [22, 33, 44, 55]
var arr1 = arr1.map(function (item, index, arr) {
    return index //返回带下标的数组
    return item  //返回带每个成员的数组
    return arr   //返回数组,内有每个成员,下标
})
console.log(arr1)

2 . 过滤和计算 : filter , reduce , reduceRight

• filter : 过滤 ( 返回符合条件的数组 )

var arr = ['aa', 'bab', 'b']
// 过滤,传入函数,通过函数内的参数来进行条件过滤,返回的值为数组
var filterArr = arr.filter(function (item, index, arr) {
    // item内不包含a的返回false,返回false的值不会加到数组里
    return /a/.test(item)
    // 返回index为1的数组
    return index == 1
})
// 返回带a的数组 ['aa','bab']
console.log(filterArr)

• reduce : 计算 ( 从前往后 , 返回计算结果 )

• reduceRight : 计算 ( 从后往前 , 返回计算结果 )

// 有四个参数:prev,current,index,arr(prev表示相加的和,第一次为11,第二次为32,current默认从第二个开始,index为下标,arr为数组)
// reduce : 计算所有的和,从前面开始
var arr = [11, 21, 33, 26]
var sum = arr.reduce(function (prev, current, index, arr) {
    console.log('prev:'+prev) //11,32,65
    console.log('current:'+current) //21,33,26
    console.log('index:'+index) //1,2,3
    return prev + current
})
console.log(sum)//91

// reduceRight : 计算所有的和,从后面开始
var arr = [11, 21, 33, 26]
var sum = arr.reduceRight(function (prev, current, index, arr) {
    console.log('prev:'+prev) //26,59,80
    console.log('current:'+current) //33,21,11
    console.log('index:'+index) //2,1,0
    return prev + current
})
console.log(sum)//91

 

3 . 判断是否存在 (返回布尔类型) : some , every

• some : 只要有一个满足就为true

• every : 每个条件都满足才是true

// some : 判断是否存在(只要有一个满足就返回true)
var arr = [0, 1, 2, 3]
var is = arr.some(function (item, index, arr) {
return item > 1
})
console.log(is) //true

// every : 判断是否存在(每个条件都满足才是true)
var arr = [0, 1, 2, 3]
var is = arr.every(function (item, index, arr) {
return item > 1
})
console.log(is) //false

 

注意事项 :

• forEach和map的区别 (forEach没有返回值,map有返回值)

• reduce是用于计算的 , 它传入的参数有四个 [ prev ( 和 , 默认从第一个开始 ) , current ( 当前的值 , 默认从第二个开始 ) , index ( 当前元素的下标 ) , arr ( 当前遍历的数组 ) ] , 如果需要调整 , 可在后面进行传参

• some和every的区别 , some只要有一个条件满足就返回true , every要所有条件都满足才返回true

手写实现数组的高阶函数

• forEach ( ) : 遍历 , 没有返回值

var arr = [11, 22, 33, 44, 55]
// forEach传入的fn里面有三个参数,分别是值,下标,遍历的数组
function myForEach(fn) {
    // 使用for循环遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 调用传入的函数
        fn(arr[i], i, arr)
    }
}
// 调用封装的函数
myForEach(function (item, index, arr) {
    console.log(item) // 11,22,33,44,55
    console.log(index) //0,1,2,3,4
    console.log(arr) 
})

 

• map ( ) : 遍历 , 返回一个数组

// map 返回一个数组,数组里面的值是当前函数执行后的结果
var arr = [11, 22, 33, 44, 55]
function myMap(fn) {
    // 准备一个返回的数组
    var list = []
    // 使用for循环遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 接收函数的返回结果
        var map = fn(arr[i], i, arr)
        // 添加到准备好的数组里
        list.push(map)
    }
    // 将数组返回出去
    return list
}
// 调用函数
var Arr = myMap(function (item, index, arr) {
    // return item + '你好' //['11你好','22你好','33你好','44你好','55你好']
    return index //[0,1,2,3,4]
    // return arr 
})
console.log(Arr)

 

• reduce ( ) : 计算 , 返回计算的结果

var arr = [11, 22, 33, 44]
// reduce有两个参数,一个为函数,一个为开始位置
function myReduce(fn, index) {
    //设置函数内第一个参数prev的默认值为数组的第一个
    var prev = arr[0]
    // 设置开始位置默认为1
    if (typeof index != 'number') {
        index = 1
    } else { //传入了index值就为0,prev也是0
        index = 0
        prev = 0
    }
    console.log(index)
    // 遍历
    for (var i = index; i < arr.length; i++) {
        // 调用fn,将前面计算的值赋给prev再进行下一次循环
        prev = fn(prev, arr[i], i, arr)
    }
    return prev
}
// 调用
var result = myReduce(function (prev, current, index, arr) {
    return prev * current
})
console.log(result) //351384

 

• filter ( ) : 过滤 , 返回一个新数组

var arr = [1, 2, 3, 4]
// filter 过滤,返回一个新数组
function myFilter(fn) {
    // 准备一个返回的空数组
    var returnArr = []
    // for循环来遍历数组
    for (var i = 0; i < arr.length; i++) {
        var flag = fn(arr[i], i, arr)
        // 判断当前的值是否为true,是就添加到空数组里
        if (flag) {
            returnArr.push(arr[i])
        }
    }
    return returnArr
}
// 调用函数
var filterArr = myFilter(function (item, index, arr) {
    return item > 2
})
console.log(filterArr) //[3,4]

 

• some ( ) : 根据条件查询 , 有一个满足就返回true

var arr = [11, 22, 33, 44]
function mySome(fn) {
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 调用fn
        var flag = fn(arr[i], i, arr)
        // 判断这个fn是否为true,有一个为true就返回true
        if (flag) {
            return true
        }
    }
    // 循环结束没有true就返回false
    return false
}
// 调用mySome,传入实参
var istrue = mySome(function (item, index, arr) {
    // 返回大于40的,有就true,没有就fasle
    return item > 40
})
console.log(istrue) //true

 

• every ( ) : 根据条件查询 , 条件都满足才返回true

var arr = [11, 22, 33, 44]
// every : 条件全部满足才返回true
function myEvery(fn) {
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        // 调用fn
        var flag = fn(arr[i], i, arr)
        // 判断fn的值是否为false,有一个为false就返回false
        if (!flag) {
            return false
        }
    }
    // 循环结束都为true就返回true
    return true
}
// 调用every方法
var istrue = myEvery(function (item, index, arr) {
    return item > 11
})
console.log(istrue) //false

 

三.字符串新增

字符串模板

var username='李四'
var str=`hello${username}`
console.log(str) //hello李四

 

四.改变this指向的新增方法

• 在函数内的this指向当前函数的调用者 ( 全局调用的函数 this 指向window )

• 在对象内的函数this指向当前的对象

• 在事件的函数内指向当前事件的目标元素

如果需要更改this指向,我们可以给对应的函数调用方法

bind ( 手动调用 , 方法后加括号 )

apply ( 自动调用 , 参数要用数组传递 ) * 传递的是个数组就一般用它

call ( 自动调用 , 参数用一个个的元素传递 ) * 常用

function fn(arg, arg1) {
    console.log(this)//window
    console.log(arg, arg1)
}
fn()
var obj = {
    name: 'jack', say: function () {
        console.log(this) //改成window
    }
}
// bind方法改变this指向需手动调用,使用(),括号内写实参
fn.bind(obj)('你好', '世界')//obj
// apply方法自动调用函数改变this指向,第一个参数为调用者,第二个为实参(以数组传递)
fn.apply(obj, ['hello', 'world'])
// call方法自动调用函数改变this指向,第一个参数为调用者,第二个为实参(以一个个元素传递)
fn.call(obj, '侬好呀', '港独')
obj.say.bind(window)('nn','mm')
obj.say.apply(window,['aa','bb'])
obj.say.call(window,'dd','ff')

 

apply和call的区别

• apply方法传递的参数是以数组的形式

• call方法传递的参数是以一个个元素的形式

共同点 :

• apply 方法和call 方法都会自动调用函数

ES6新增

ES6对应字符串 , 数组 , 函数 , 对象 , 循环 , 变量修饰关键词 , 基础数据类型等都有新增

一.字符串新增方法

• startsWith 是否以...开头

• endsWith 是否以...结尾

• includes 是否包含

• repeat 平铺

var str = 'abc'
// startsWith 以什么开头
var s = str.startsWith('a')
console.log(s)
// endsWith 以什么结尾
var s = str.startsWith('b')
console.log(s)
// includes 包含
var s = str.startsWith('a')
console.log(s)
// repeat 平铺
var s = str.repeat(2)
console.log(s)

 

二.数组新增方法

普通方法 ( 高阶函数 )

• find () : 根据条件查找,返回找到的第一个内容 , 没有找到就返回undefined

• findIndex () : 根据条件查找,返回找到的第一个下标 , 没有找到就返回-1

// find 根据条件查找,找到了返回第一个值,没找到返回undefined
var arr = [11, 22, 33, 44]
var findd = arr.find(function (item, index, arr) {
    return item > 40
})
console.log(findd)

// findIndex 根据条件查找,找到了返回第一个下标,没找到返回-1
var arr = [11, 22, 33, 44]
var findIndexx = arr.findIndex(function (item, index, arr) {
    return item > 2
})
console.log(findIndexx)

 

手写实现find 及 findIndex

// find 根据条件查找,找到了返回第一个值,没找到返回undefined
function myFind(fn) {
    //遍历数组
    for (var i = 0; i < arr.length; i++) {
        var flag = fn(arr[i], i, arr)
        //如果有就返回数组的值
        if (flag) {
            return arr[i]
        }
    }
}
//调用myFind方法
var value = myFind(function (item, index, arr) {
    return item > 11
})
console.log(value)

// findIndex 根据条件查找,找到了返回第一个下标,没找到返回-1
function myFindIndex(fn) {
    // 遍历数组
    for (var i = 0; i < arr.length; i++) {
        var flag = fn(arr[i], i, arr)
        // 如果有,就返回下标
        if (flag) {
            return i
        }
    }
    // 循环结束了也没找到就返回-1
    return -1
}
// 调用函数
var index = myFindIndex(function (item, index, arr) {
    return item > 22
})
console.log(index)

 

静态方法

• Array.from () : 将伪数组转为数组

• Array.of () : 将传进去的元素组成一个新数组,返回新数组

// Array.from   将伪数组转为数组
var btns = document.querySelectorAll('button') //nodeList
var btn = Array.from(btns).map(function (item, index, arr) {
    return item
})
console.log(btn)//[button button]

// Array.of     将传入的元素组成一个数组并返回
var arr1 = Array.of('bb', 'pp', 'qq')
console.log(arr1) //['bb','pp','qq']

 

三.变量修饰关键词

es3存在

• var 声明伪全局变量

新增的

• let 声明块级作用域 ( 不允许重复声明 , 只在当前的代码块内起作用 ( 块级作用域 ) )

• const 声明常量 ( 声明必须赋值 , 不允许修改 , 也是块级作用域 )

//  let 声明块级作用域
let a = 10
// let a = 20 不允许重复声明
a = 20
console.log(a) //20

// 块级作用域及伪全局作用域
// var 伪全局作用域 
for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i) //重复打印5次5,因为var是伪全局作用域,它会等延时器执行完毕再打印i
    }, 3000)
}

// 块级作用域,它会在当前的作用范围内就进入改变i的值
for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i) //打印0,1,2,3,4
    }, 3000)
}

// const 声明常量
// 声明必须要赋值
// const c; //报错
const b = 20
// b = 10 不允许二次赋值
console.log(b)
// const也是块级作用域

 

四.基础数据类型

ES3基础值类型

• string

• number

• boolean

• null

• undefined

ES6新增的基础值类型

• symbol 独一无二的值 ( 一般用于对象的key,key不能重复 )

• bigint 大的整型

// Symbol 独一无二的值
var sym = Symbol()
var sym1 = Symbol()
console.log(sym == sym1) //fasle
var sym2 = Symbol('你好') //传入的参数是说明
var sym3 = Symbol('你好')
console.log(sym2 == sym3) //false
// 一般用于对象的key,key不能重复
var obj = { sym: 10 }
console.log(obj.sym) //10
// 获取说明(详情)
console.log(sym2.description) //'你好'

// BigInt 大的整型,可以容纳大的数
// number中的整型int容纳范围是有限的,10^16
var big = BigInt('1111111111111111111111111')
console.log(big) //1111111111111111111111111n
var number = 1111111111111111111111111
console.log(number) //1.1111111111111111e+24

 

五.循环新增

• for...in ( 遍历对象 )

• for...of ( 遍历数组 , 只要实现了迭代器就可以用for...of ) ,伪数组也可用

var obj={
    name:'jack',
    age:22
}
for(var key in obj){//遍历的是key (数组的key是下标) key的类型为字符串
    console.log(key) //name ,age
}

var arr=['a','b','c']
for(var value of arr){ //for...of遍历的是值
    console.log(value) //a,b,c
}

 

六.函数新增

默认参数

// 默认a为10,b为21,如果传递了参数,那默认值就会被覆盖
function fn(a = 10, b = 21) {
    console.log(a + b)
}
fn(11, 22) //打印33
fn()       //打印31
fn(21)     //打印42

 

箭头函数 , 是一个匿名函数

箭头函数的写法

(参数1,参数2,参数3,...参数n)=>{代码}

 

简化写法

• 如果当前的参数只有一个时,可以省略 ( )

• 如果当前的{}里面的代码只有一句时,{}也可以省略

• 如果当前的{}里面的代码只有一句 并且需要返回数据时,可以省略return和{}

// 箭头函数是匿名的,需要声明变量来接收
var fn = item => {
    console.log(item + '当前参数为1个,可省略()')
}
fn('简写一:')

var fn1 = item => console.log(item + '只有一句话可省略{}')
fn1('简写二:')

var fn2 = arg => arg + '你好' //当前fn2 传递一个arg 返回一个arg+你好
var result = fn2('简写三:')
console.log(result);

 

箭头函数的特性

• 箭头函数里面没有this,会根据作用域链找离它最近的(最外层是window)

• 箭头函数里 没有arguments,会报错

var obj = {
    say: function () {
        console.log(this) //obj
        console.log(arguments) //arguments
    }
}
obj.say() //打印obj

var obj = {
    say: () => {
        console.log(this) //window
        // console.log(arguments) //无,报错
    }
}
obj.say() //打印window

 

七.对象新增

新增对象方法 ( 静态方法 )

• Object.is 判断两个对象是否为一个,返回对应的true和false

// Object.is 用于判断两个对象是否为同一个,返回值为true或fasle
console.log({} == {}) //false 比较值
console.log({} === {}) //fasle 比较值和类型
console.log(Object.is({}, {})) //false 比较值的同时还要比较类型
// !!可以解决NaN不等于NaN的问题
console.log(NaN == NaN) //false
console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true

 

• Object.assign 将后面对象的内容,拷贝到前面的第一个对象

// Object.assign  是将后面的内容拷贝到前面,返回一个对象,这个对象的地址和前面的对象是同一个
var obj = { name: 'jack' }
var targetObj = Object.assign(obj, { age: 22 }, { sex: '男' }, { height: 188 })
console.log(targetObj) //{name:jack,age:22,sex:男,height:188}
console.log(targetObj === obj) //true

// 只拷贝第一层的值,剩下的拷贝的是引用地址(浅拷贝实现方式之一)
var obj1 = { age: 26, arr: [1, 2] }
var targetObj = Object.assign({ name: 'rose' }, obj1, { sex: '女' })
console.log(targetObj)
// 让第二层中括号内的内容发生变化
obj1.arr[0] = 11 //arr[11,2]
obj1.age = 24 //不变,还是26
// 原本拷贝对象的值也会变化
console.log(targetObj) //{name:'rose',age:26,arr[11,2],sex:'女'}

 

新增对象简化写法

• 对象中的函数,可以省略对应的 : function

• 对象中value变量名和key的名字一致时可以省略key

// 简化写法
var name = 'jack'
var obj = {
    // name: name,
    // 当你的key和value是一样的时候而且value是变量就可以省略key
    name,
    // say:function(){
    //     console.log('hello')
    // },
    // 对象中函数的简化写法
    say() {
        console.log('hello')
    }
}

 

八.解构赋值和扩展运算符

• 解构赋值 ( 解除构造进行赋值 )

  {}对于对象的解构 (使用key来匹配)

  []对于数组的解构 (使用下标来匹配)

var obj = { name: 'jack', age: 18, sex: '男' }
var arr = ['a1', 'a2', 'a3']
// 采用解构赋值快速提取 对象
// {}里面填写的键,按照填写的key去匹配对象里面的key再去除它的值
var { name, sex, age } = obj
console.log(name, sex, age) //jack,男,18
// []是对于数组的解构,它是按照对应的顺序,下标来匹配的
var [a, c, b] = arr
console.log(b) //a3
console.log(c) //a2
console.log(a) //a1

 

• 扩展运算符 ( 将内容一个个扩展出来 )

// 扩展运算符 ... 是针对数组的
console.log(...[1, 2, 3, 4, 5]) //1 2 3 4 5
// Array.of组成一个新的数组
console.log(Array.of(1, 2, 3, 4, 5)) //[1,2,3,4,5]
console.log(Array.of(...[1, 2, 3, 4, 5])) //[1,2,3,4,5]

 

九.新增的集合类型 ( 伪数组 )

伪数组其实也可以使用for...of进行变量 ( 实现迭代器 )

set

概述 : set是一个不允许重复的集合

set的构建

• 不传参构建的是一个空的set集合

• 传入数组由数组里面的元素构建一个集合 ( 数组去重 )

//使用new关键词进行操作
//里面可以传入实现迭代器的元素
//构建一个空的set集合
var set = new Set()
console.log(set)
// 传入一个数组,提取数组中的元素构建成一个set集合
var set = new Set([1, 2, 22, 21, 3, 2, 21, 22]) //会自动完成数组去重的功能
console.log(set) //1,2,22,21,3

 

set的方法及属性

属性

• size

//set的属性,只有size,表示的是长度
console.log(set.size)

 

方法

• add 添加方法

• delete 删除方法

• clear 清空

• has 判断是否存在

• forEach 遍历

• keys 获取所有的key返回迭代器

• values 获取所有的value 返回迭代器

• entries 获取所有的键值对 返回一个迭代器

// 相关方法
// 增加add
set.add(22) //如果添加的是重复元素,将不能添加进去
set.add('hello') //set中可以存储任意类型的数据
console.log(set) //1,2,22,21,3,'hello'

// 删除delete 传入对应的值进行删除
set.delete(22)
console.log(set) //1,2,21,3,'hello'

// 清空 clear
// set.clear()
console.log(set) // ''

// 改 就是将对应的内容删除再添加

// 查 has 判断是否存在,返回布尔类型,存在就返回true,不存在就返回false
console.log(set.has(1)) //true

// forEach 遍历的
set.forEach((v1, v2, s) => {
    // 它的key就等于它的value
    // v1表示key
    console.log(v1)
    // v2表示value
    console.log(v2)
    console.log(v1 == v2)//true
    // s表示当前遍历的set
    console.log(s)
})

// keys获取所有的key,values获取所有的value,entries获取所有的键值对,返回迭代器
console.log(set.keys())
console.log(set.values())
console.log(set.entries())

 

WeakSet : 专门用于存储对象的set

//专门用于存储对象的set,set并不能完成对象数组的去重
//无参构建
var ws = new WeakSet()
//有参构建,传入一个只读的对象数组
var ws = new WeakSet([{name:'jack'},{name:'rose'}])
console.log(ws)
//WeakSet只有三个方法,has add delete
ws.add({age:20})
console.log(ws.has({age:20}))//false,这个对象和添加的对象,不是同一个
ws.delete({age:20}) //删除不了,{age:20}!={age:20} ,不是一个对象
console.log(ws) //{{name:'jack'},{name:'rose'},{age:20}}

 

map

概述:map是一个键值对,key不允许重复,value可以重复 ( 抽取所有的key它可以组成一个set , 所有的value抽取就是一个数组 )

map的构建

• 无参构建

• 传入一个二维数组构建

//1.无参
var map = new Map()
console.log(map) //构建一个空的map
//2.传入一个二维数组
//传入的元素数组,第一个是key,第二个是值
var map = new Map([['name','rose'],['age',22],['sex','女']])
console.log(map)

 

map的属性及方法

属性

• size

//size是map里面的元素个数
console.log(map.size)

 

方法

• set 设置 , 修改

• get 通过key来获取value

• delete 通过key来删除

• clear 清空

• has 判断当前的key是否存在

• keys 返回所有的key

• values 返回所有的value

• entries 返回所有的键值对

• forEach 遍历

//相关方法
// 增 set
map.set(108,'yes')
console.log(map);
//修改就是对应的本身已经存在的key进行重新的设置
map.set('sex','girl')
console.log(map);
//删除 根据key来删除
map.delete(108)
console.log(map);
//清除所有的
// map.clear()
console.log(map);
//查询
//根据key判断是否存在
console.log(map.has('sex'));
//forEach 第一个值为值 第二个为键 第三个当前遍历map
map.forEach((v,k,map)=>{
console.log(k);
console.log(v);
})
//keys values entries
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
//通过key来获取value
console.log(map.get('sex'));

 

WeakMap ( 基于weakSet构建的map )

//weakMap 是基于weakSet之上构建的,也就是对应的key是对象,抽取所有的key其实就是wekSet
//1.无参构建
var wm = new WeakMap() 
//2.传入二维数组构建
var wm = new WeakMap([[{name:'hello'},'aloha']])
console.log(wm)
//它有四个方法
wm.delete
wm.get
wm.set
wm.has

 

十. class 类

概述 : 类是对象的模板 , 对象是类的实例 ( 类相当于建房子的设计图 , 对象相当于建好的房子 )

相关知识点 :

• class是用于修饰类的

• 类名 首字母必须大写

• class里面的constructor 是一个函数 , 它会在每次new的时候调用

• class中constructor的this指向当前构建的实例对象

• extends关键词是class之间的继承

• 如果使用了extends关键词 , 还想要在constructor中使用this , 那么必须先调用super方法

• 对应的super关键词指向父类的constructor

• 静态方法使用static关键词修饰 , 调用使用类名 . 方法名调用

// class是用于修饰类的 类是对象的模板（设计图）
//class修饰的类名必须首字母大写
// class 类名{
// 构造器
// }
//class里面的this 指向当前构建的对象实例
class Person{
//构造器 他是用于构建对象的方法
constructor(name){
this.name = name //this指向你对应构建的对象实例
this.sex = '男'
}
//静态方法 使用类名. 使用static关键词修饰的方法
static say(){
console.log('hello');
}
}
//构建对象使用new关键词
//new 操作符会做那些操作 开辟内存空间（建立一个对象） 存放对应的对象 自动执行对应的构造函数 将
对应的设置设置给到当前对象 然后将对象返回
var person = new Person('jack')
console.log(person);//{name:jack}
//静态方法调用
Person.say()
//继承 除了私有的其他全部可以继承
// extends关键词实现class的继承
class Child extends Person{ //child这个类继承Person类
constructor(name,age){
//如果使用extends关键词那么在对应的构造器里面不能直接使用this 要调用super函数
super(name) //相当于父类的构造函数 Person.constructor
this.age = age
}
}
var child = new Child('tom',88)
console.log(child);//{name:tom,sex:男,age:88}

 

十一. generator函数

//异步阻断变同步的内容
function* fn(){
yield setTimeout(()=>{console.log('你好');},2000)
yield setTimeout(()=>{console.log('你好世界');},1000)
yield setTimeout(()=>{console.log('hello');},0)
}
var a = fn()
a.next()//打印你好
a.next()//打印你好世界
a.next()//打印hello