JSCORE day_03(7.4)

复习

• 声明提升

  • 这是JS独有的奇葩设计: JS引擎在运行JS代码之前, 先把声明操作提升到作用域的顶部, 再运行调整过顺序后的代码

  • 正常人写代码: 先声明->再使用

  • 面试题高发地: 先用, 再声明

  • 声明操作在ES6前

    • var: 只声明,默认值是undefined, 不赋值

    • function: 声明+赋值

• 宿主环境: JS代码运行在什么平台上, 平台就会提供针对性的API功能

  • node.js: 通常开发服务器, 文件系统..

  • 浏览器: 全局对象window 中存储了所有浏览器提供的API

• 作用域: 就是对象类型的变量, 因为具有特殊功能, 所以叫作用域

  • 全局: window对象, 存储系统API

    • 全局污染: 把自定义的变量存储在window对象里

    • ES6前: 只能用闭包来解决全局污染 -- 局部作用域

  • 局部: 函数运行时临时产生的对象, 存储函数中声明的变量

• 作用域链:

  • 作用域多层嵌套的场景: 就是函数里面放函数

  • 函数中使用一个变量时, 就近原则 优先用自身的, 自身没有则到上层找

• 闭包

  • 出现的原因: b函数中使用了来自a函数作用域中的变量, b函数为了预防调用时, a函数作用域销毁 导致自身无法使用变量aa

  • 所以: b函数把 a函数作用域保存在自身的 scopes 属性里. 这个被存放在scopes中的 a函数作用域 就称为闭包

    function a(){
        var aa = 22
        
        function b(){
            console.log(aa)
        }
    }

  • 用途: 利用闭包为函数提供私有的变量, 避免全局污染

  • 范式

    变量都是在 匿名函数作用域中声明, 不会造成全局污染

    var 函数 = (function(){
        var 变量 = 值
        var 变量 = 值...
        
        return function(){}
    })()

• 函数的arguments

  • 函数隐式自带的变量, 存储函数收到的所有实参. 是伪数组/类数组. 其原型不是数组 没有数组的方法

  • 使用场景:

    • 制作参数数量不固定的函数, 例如 max 求最大值

    • 函数重载: 通过判断实参的 个数 / 类型 不同, 执行不同的代码逻辑

      • 实现: 多功能函数

• 函数的this

  • 函数中隐式自带的变量, 其保存的内容会变化

  • 场景:

    • 对象.函数(): 对象

    • 函数(): 严格模式-undefined 非严格-window

    • new 函数(): 创建出来的新的对象 this = {}

      • new: 新的(对象)

• 对象引用类型: 变量中存储的是对象的内存地址, 地址传递

  • 浅拷贝: 做一个空对象, 把旧对象的属性和值 挨个遍历存入新的对象里

• 原型理论

  • 构造函数: 本质就是函数, 作用是构建创造新的对象

  • 搭配new运算符使用, 隐式完成3件事

    • var this = {}: 有时说是2件事: 先创建空对象, 再把this=空对象

    • this.__proto__ = 构造函数.prototype

    • return this

  • 原型: 构造函数的prototype, 存放了共享的各种方法

  • 原型链: 对象的__proto__ 存储了链接到共享方法所在对象prototype的地址

  • 目的: 省内存. 所有的对象共用同样的方法,通过方法的this 让函数知道当前对象是谁

• 严格模式: ES5 2009年出品

  • 开启严格模式: 在JS脚本的开头书写 'use strict'

  • 防止意外的全局变量污染

    • 没声明的变量无法直接使用

    • 函数直接调用, 其this指向undefined -- 防止构造函数忘记写new

  • 阻止静默失败 -- 提供了更多报错

• 对象属性的精确配置

  • defineProperty(对象, 属性名, {配置项})

  • 6个配置项

    • writable: 是否可写入新的值

    • value: 值

    • configurable: 是否可重新配置属性

    • enumerable: 是否遍历

• 计算属性

  • 语法糖: 在对象中书写函数, 可以省略 : function

  • 计算属性: get, 在函数前书写 get 关键词, 调用时不需要() 会自动触发

    var obj = {
        a: function(){},
        get a(){}
    }
    ​
    obj.a

一、计算属性

属性精确配置，添加计算属性，一些语法糖。

 二、赋值监听

 增加一个age属性并转换成检测功能的属性，使用set监听，结合if判断语句判断传入的实参是否符合条件，throw 的Error是js提供的属性，不可以改名只能写成Error。

(检测站和储存数据的位置不能是一样的，否则就会无限循环的执行检测，所以习惯在另设一个属性作为存储数据的位置，习惯的命名方式是在原来属性（即检测站）名前书写_ ，以区分检测站，最后将存储数据返回，就可以用原来的属性名读取到检测过的值，而检测不通过的就报错）。

优化一下：检测功能的属性 "_属性名" 是为了辅助监听器而生, 属于幕后, 不应该被遍历出来,用 define方式新增的属性, 默认是 不可遍历, 不可配置, 不可赋值；而监听器的属性需要被遍历到，用define的关键词enumerable设置为可遍历。

 三、ES6

  ES5: 2009年 JS的第五个版本
  ES6: 2015年 JS的第六个版本.  JS具有跨时代意义的版本. 提供大量的新特性

 例如: 箭头函数, let/const, 模板字符串, 函数参数默认值...

 推荐网站: https://es6.ruanyifeng.com/

四、保护对象的方式

保护对象的方式最初在 ES5 提出，ES6后，使用 'use strict' 开启严格, 才有报错提示。Object是所有对象类型的 最基础构造函数, 其包含很多操作对象的方法，对对象的操作有4种: 增删改查。

这里有三个关键词对对象进行保护：

1.不让增: preventExtensions；prevent: 阻止     Extensions:扩展

 2.不让增删: seal；seal:密封   

差异: 不可重新配置 也可以让元素不能删 -- 一次改一个元素

 3.不让增删改: freeze  ；freeze: 冻结.  无法增删改

五、箭头函数

 ES6带来的箭头函数: 带来两个好处 
    1. 简化匿名函数的语法 + 各种语法糖
    2. 带来新的 this 指向

 function的this是在运行时决定的

•   函数(): 严格-undefined  非严格-window
•   对象.函数(): 对象
• new 函数(): 新创建的对象

而箭头函数没有this，也没有new语法, 不能用作构造函数
   总结: 箭头函数的this声明时就固定--上级作用域的this, 后续不会变化

作用域链理论: 自己有的变量用自己的, 自己没有用外层作用域的

 

六、数据高阶函数-every

 

高阶函数: 一个函数中 使用了其他函数, 就叫高阶函数，如图，就称a是高阶函数, 因为a中使用了另一个函数 b 。

 

 数组是实际开发中最常用的数据类型:
实际开发场景: 前端通过请求, 到服务器查找数据, 服务器从数据库查询数据传递给前端.. 数据类型往往是数组。

1.every

 简化写法

括号里面的形参可以修改名字，还可以在对象里面使用，选取属性就是“元素.属性名”

2. some

判断: 数组中是否有 负数 -- 有一个就算有

 3.过滤filter

把数组中满足条件的过滤出来, 形成新的数组

 

 4.map映射

数组映射: map  把数组的每个元素 按照一定的规则进行转换, 得到新的数组

 实战应用: 把数组转换成HTML代码

 七、模板字符串

ES6 新增的字符串增强语法，解决问题: 之前的字符串在进行拼接操作时过于繁琐 并且 不支持换行。

 练习