jQuery2
第三章*****************************************************************************************
1.ES5:
ECMAScript: ECMA组织制定的JavaScript语言的国际标准，规定了JS语言的核心语法
ES5是ECMAScript的第五个版本(第四版过于复杂废弃了)，IE8部分此版本
保护对象:
什么是:① 保护对象的属性和属性值始终有意义
② 防止篡改对象的结构
为什么:① 对象的属性，默认可随意赋值
② 对象可随意添加、删除属性
何时: 严格来说，今后所有对象，都要有自我保护的抵抗力
如何: 分为保护属性和防篡改
保护属性: 保护对属性值的修改
对象属性分为:
命名属性: 可通过.直接访问的属性
分为: 数据属性: 直接保存属性值的属性
访问器属性: 不直接存储属性值，仅提供对其他数据属性的保护
内部属性: 无法通过.直接访问的属性
数据属性的四大特性:
value:实际存储属性值
writable:true/false控制属性是否可修改属性值
enumerable:true/false控制属性是否可被for in遍历(false会跳过)，仅控制遍历，无法控制用.访问
configurable:true/false控制是否可删除该属性，控制是否可修改其它两个特性
强调: configurable经常作为前两个属性的双保险，且一旦设为false，不可逆
获取四大特性:
Object.getOwnPropertyDescriptor(obj,"属性名")
设置1个属性的四大特性:
Object.defineProperty(obj,"属性名",{
要修改的特性:特性值,
要修改的特性:特性值,
... ...
})
问题: defineProperty一次只能修改一个属性
解决: 同时修改多个属性的特性:
Object.defineProperties(obj,{
属性名:{ 要修改的特性 },
属性名:{ 要修改的特性 },
... : ...
})
添加属性: 可用defineProperty添加新属性
只要defineProperty要修改的属性不存在，就会自动添加
强调: 用defineProperty添加的新属性，四大特性默认值都为false
而用.添加的新属性，四大特性默认值都为true
问题: 无法使用自定义逻辑保护属性
解决: 访问器属性
_______________________________________________________________________________________________
访问器属性: 不直接存储属性值，仅提供对其他数据属性的保护
何时: 只要使用自定义的规则保护属性值
为什么: 数据属性的四大特性，保护规则是固定的，无法自定义
如何定义: 2步:
①定义一个隐藏的数据属性，用于实际存储属性值
②再定义一个访问器属性，保护隐藏的数据属性:
Object.defineProperty(obj,"属性名",{/*或用defineProperties，不能通过直接量或.创建*/
get(){ /*在试图获取属性值时自动调用*/
return this.隐藏的数据属性； /*返回受保护的数据属性值*/
},
set(val){ /*在试图修改属性值时自动调用，参数val会自动获得要修改的新值*/
if(...) /*验证val是否符合规则*/
... /*将val赋值给受保护的属性*/
else ... /*否则*/
throw new Error /*主动抛出错误*/
},
enumerable:true, /*设置四大属性*/
configurable:false
})
如何使用: 只要定义了访问器属性，就优先使用访问器属性，而不用受保护的数据属性
访问器属性的用法和普通属性用法完全一样
但是: 在取值时，自动调用get()
在赋值时，自动调用set()，val会自动获得要赋的新值
内部属性: 无法通过.直接访问的隐藏属性
比如: __proto__
_______________________________________________________________________________________________
防篡改: 阻止对对象结构的修改
3个级别:
①防扩展: 禁止添加新属性
Object.preventExtensions(obj)
原理: 每个obj内部都有一个隐藏属性: Extensible，默认为true
preventExtensions将obj的Extensible改为false
②密封: 在防扩展的基础上，进一步禁止删除现有属性(两个不要一起用)
Object.seal(obj)
原理: 将obj的Extensible改为false
将所有属性的configurable都自动改为false
③ 冻结: 在密封基础上禁止修改一切属性值(过于严格)
Object.freeze(obj)
原理: 修改obj的Extensible为false
将所有属性的configurable都改为false
还将所有属性的writable都改为false
_______________________________________________________________________________________________
Object.create(): 本质上是创建一个新的子对象
什么是: 基于一个现有父对象，创建一个新的子对象继承当前父对象，并扩展新属性
何时: 今后如果没有构造函数的情况下，也想创建子对象
如何:
var child=Object.create(father,{ /*若不用扩展自有属性，father后的内容不必写*/
自有属性:{
value:值,
writable:true,
enumerable:true,
configurable:true,
},
... : {
...
}
});
强调: 只要添加到对象中的属性，四大特性默认为false，必须显式写为true
原理:① 创建一个空对象
② 让新对象自动继承father
③ 为新对象扩展新的自有属性
_______________________________________________________________________________________________
call/apply/bind:
共同:为了替换函数中不想要的this
何时: 只要函数中的this不是想要的 (函数不加括号，只在call/apply/bind右边加括号)
call和apply:
什么是:强行调用一个函数并临时替换函数中的this为指定的新对象
call: 要求传入函数的参数必须单独传入，逗号分隔
第1个参数是要指定的this，第2,3...个是要替换的参数
apply: 要求传入函数的参数，必须放入数组中整体传入
apply可自动打散数组类型的参数，单个传入
第1个参数是要指定的this，第2个参数是一个数组
bind: 基于一个现有函数创建一个功能完全相同的新函数，并永久绑定this为指定对象
还可永久绑定部分固定的参数值
替换回调函数中的this时，都用bind
比如: var newFun=fun.bind(obj) //接收新参数，函数后添加
newFun(参数1,...); //调用函数
强调: 被bind永久绑定的this，不能再被call/apply临时替换
_______________________________________________________________________________________________
数组API:
判断: 判断数组中的元素是否符合要求
返回值:bool(可判断是否满足条件)
①every: 判断数组中所有元素是否都满足要求
var bool = arr.every(function(val,i,arr){ //回调函数: 当前元素值:val；当前元素位置:i；arr:当前数组
return 判断条件
});
②some: 判断数组中是否包含满足条件的元素
var bool = arr.some(function(val,i,arr){
return 判断条件
});
强调:数组API的回调函数中this默认->window，所以,不能用this指代当前元素值，但可用如arr[i]或val
遍历: 对数组中每个元素执行相同的操作:
①forEach: 对原数组中每个元素执行相同的操作
arr.forEach(function(val,i,arr){ //没有返回值
arr[i]=新值; //对当前元素执行的操作，直接修改原数组，只能使用arr[i]
})
②map: 取出原数组中每个元素，执行相同操作后，再放入新数组返回
var arr2 = arr1.map(function(val,i,arr){ //返回一个新数组
return 对当前元素操作后的新值(放入新数组中) //不修改原数组，使用arr[i]=..可修改原数组
})
过滤和汇总:
过滤: filter: 复制原数组中符合条件的元素，组成新数组
var subArr=arr.filter(function(val,i,arr){
return 判断条件 //筛选出arr中符合判断条件(为true)的元素值，放入新数组返回
})
汇总: reduce: 将数组中所有元素，统计出一个汇总结果
var r=arr.reduce(function(prev,val,i,arr){ //prev: 截止目前的临时汇总值
return prev+val
},startVal); //startVal: 表示汇总开始的基数，可不写(默认为0)
将arr数组中每个值累加后，求和
强调: reduce不一定非要从0开始累加，可从任意startVal(也可以是其它数组)开始累加
_______________________________________________________________________________________________
严格模式:
什么是: 比普通js运行模式要求更严格的运行机制
为什么: 解决普通js运行模式中广受诟病的缺陷
何时: 今后都要在严格模式下开发
① 新项目, 必须全部启用严格模式
② 旧项目, 逐个函数向严格模式迁移
如何: 2种:
① 整个代码段启用严格模式:
在<script>标签或js文件的开头加入:"use strict"；
② 仅对单个函数启用严格模式
仅在function内，函数体的顶部加入:"use strict"；
要求:
1. 不允许对未声明的变量赋值
2. 静默失败升级为错误
3. 不推荐使用arguments.callee来实现递归
_______________________________________________________________________________________________
2.ES6(框架广泛采用，又称为ECMAScript 2015):
模板字符串: 对字符串拼接的简化(2015年首次发布，IE Edge不支持)
何时: 如果字符串中包含需要动态执行的表达式或回车换行时
如何:3件事
① 用``反引号(ESC键的正下方)包裹字符串
② 字符串中的变量和表达式都要放在${...}中
③ 模板字符串中支持: 换行，变量，表达式()，注释也会被解析
let:
1. 专门声明仅在当前块中有效的局部变量
块: js中只要一个{}就是一个代码块
let声明的变量，仅在{}内有效，不会被提前到{}外
2. 防止声明提前现象
声明提前: 在开始执行程序前，引擎会将var声明的变量和function声明的函数，提前到"当前作用域"顶部集中优先创建，再开始执行程序 /*但是赋值留在原地*/
何时:今后强烈建议用let代替var
强调:let必须配套严格模式使用
_______________________________________________________________________________________________
箭头函数: 对所有回调函数的终极简写
何时: 今后，几乎所有的回调函数，都要用箭头函数简化
如何:
1.所有回调函数都可:去 function(参数) 改为 (参数)=>
2.如果函数体只有一句话: 可省略{}
如果这一句话还是return，可省略return
3.如果只有一个参数:可省略()
但是,如果没有参数，必须保留空()
特点:箭头函数可让内外this共用同一个对象————不再需要bind替换
特殊: 如果不希望内外共用this，就不能用箭头函数(或者用e.target -> 当前单击的元素对象)
比如事件处理函数:
elem.addEventListener("click",function(){ this -> 当前单击的元素对象,不共用 })
elem.addEventListener("click",()=>{ 致使this -> 不是elem })
变通解决:
elem.addEventListener("click",e=>{ e.target->elem }) /*利用冒泡*/
特点:
① 箭头函数没有this
② 箭头函数没有arguments
③ 不能通过 new 关键字调用
④ 没有 new.target
⑤ 没有原型
⑥ 没有 super
_______________________________________________________________________________________________
for of: 简化for循环遍历:
何时: 直接获得每个元素值时
如何:
for(var i=0;i<arr.length;i++){ arr[i] } /*arr[i]: 当前元素*/
简写为:
for(var val of arr){ val } /*val: of会依次取出arr中每个元素的值，保存到val*/
局限:
①只能遍历索引数组和类数组对象，不能遍历关联数组和对象(只能用for in循环遍历)
② 无法获得下标
③ 只能逐个遍历所有，不能控制循环的开始和结束以及步调
④按值传递: 如果数组中保存的是原始类型的值，修改val，不会影响数组元素(val是数组元素值的副本)
何时:仅遍历元素值，不关心下标时，才可用for of简写
_______________________________________________________________________________________________
class: 对 面向对象 的简化
如何定义类型:
①用一个 class 类型名{}结构包裹原来的 构造函数和原型对象方法
②修改构造函数的'function'为'constructor'，其余保持不变
③可省略开头的'类型.prototype'与方法名后的'=function'
直接定义在class中的函数直接量，会自动保存在当前类型的原型对象中
定义父类:
class Flyer{
constructor(fname,speed){
this.fname=fname;
this.speed=speed;
}
fly(){ } //fly <=> Flyer.prototype.fly
get 访问器属性名(){ return this.受保护的其他属性 } //添加访问器属性,在构造函数的平级
set 访问器属性名(val){
if(条件) this.受保护的属性=val
else 报错
}
}
继承: 不再设置Object.setPrototypeOf
①在'class 类型名'后添加'extends 父类型'名
② 在子类型构造函数中不允许直接用call调用父类型构造函数，可使用super(属性参数值列表),不加this
子类:
class Plane extends Flyer{ //让Plane继承Flyer
constructor(fname,speed,score){
super(fname,speed); //super:关键字，指父类型的构造函数，自动将子类型的this传入父类构造函数中，不允许用call
this.score=score;
}
getScore(){ }
}
使用:
var obj = new Plane('fname',10,30) //也可以new父类: var obj = new Flyer('fname',10)
obj.getScore() //子类的方法
obj.fly() //父类的方法
