大纲

JavaScript

数据类型 代码运行 类型转换 作用域等

• 基本数据类型(原始值类型)

1. number -> NaN/Infinity
2. string -> 单引号/双引号/反引号
3. boolean -> true / false
4. undefined
5. null
6. symbol -> 创建唯一值 
let val = Symbol('00') 
console.log(val === val) true 
console.log( Symbol('00') === Symbol('00')) false
7. bigint -> 在一个数值后面加n 就是bigint

• 引用数据类型(复杂类型)

1. object {}普通对象 []数组对象 // 正则对象 日期对象 等等
2. function

• 代码的运行

1.基本数据类型

1. 浏览器 之所以能够运行代码 是因为提供了一个供代码运行环境
2. 这个运行环境 -> 叫 栈内存 ECStack(Execution Context Stack)
3. 栈内存 就是在计算机中内存中分配出来的一块内存 用来执行我们的代码 
4. 代码的执行 分为 全局代码 函数中代码 私有块中的代码 不同的代码执行 都有自己的上下文(环境) 这个上下文环境 叫EC(Execution Context)
5. 当我们的代码开始执行的时候 一开始 就会生成一个 EC(G)的全局执行上下文环境 用来执行我们的全局代码 之后 这个环境会进栈 因为代码都是在我们的栈内存中执行的
6. 进栈之后 我们会创建VO(G) 全局变量对象 代码在当前上下文中执行的时候 创建的变量会存储在当前上下文中指定的变量对象中 所以变量对象 就是用来存储当前上下文中创建的变量的
7. 以上环境都好了 开始执行代码之前 要变量提升 / 词法解析 等一些列 然后才开始执行 代码
8. 赋值的详细步骤 var a = 12 
+ 创建一个值12 把它存储起来(基本数据类型是存储在栈内存中)
+ 生命一个变量 把它存储到当前上下文所属的变量对象中
+ 最后进行等号赋值(定义) 本质上也是一个指针指向的过程

2.复杂数据类型

1. 基本上前面几个步骤还是一样的 创建执行环境栈(GO) 创建全局变量对象 然后代码执行
2. 这里只不过 我们的数据类型是引用数据类型 不会直接存储在栈内存中 会开辟一个堆内存 用来存储自己的键值对 每一个堆内存都有一个16进制的地址
3. 在堆内存中分别存储键值对
4. 把16进制地址放到栈中 供变量调用

• 全局对象

1. 浏览器在最开始加载代码的时候 不仅提供了一个栈内存 供代码执行 而且还默认开辟了一个堆内存 存储一些内置的属性和方法(GO Global Object)全局对象 这堆内存的地址给了window
2. 也就是说我们的全局变量对象上(VO)在刚开是的时候就有一个叫window的变量 指向了我们的GO 也就是我们上面说的那个堆内存
3. 我们刚刚知道在占执行期上下文的时候 还产生一个全局变量对象 用来存放我们的全局代码的变量 这个 跟我们的全局对象是两个概念 全局对象指的是我们的WINDOW

• 声明变量都做了什么

1. 在全局上下文中 基于 var 和 function 声明的全局变量 也会给GO(window)中新增一个对象的私有属性(这里切记 基于var 和 function才会这样 如果是let const 声明的 就不会给window中添加私有属性)
2. 这个window中新增的私有属性 会和我们刚刚声明的全局变量 有 映射机制 一个变 另外一个也会变

var a = 10
//声明了一个全局变量a  给我们的window上也增加了一个私有属性a
console.log(a)
// 首先看看a是否为全局变量 如果是 按照全局变量处理 如果不是全局变量 再看看 是否是window中的一个属性 如果也不是 则报错 a is not defined

• 函数底层运行机制

var x = [12, 23];
function fn(y) {
    y[0] = 100;
    y = [100];
    y[1] = 200;
    console.log(y); //输出[100,200]
}
fn(x);
console.log(x); //[100,23]

• 创建函数

1. 这里因为函数也是引用类型的数据 所以 我们在创建函数的时候 也就是声明函数的时候 还会开辟一块 堆内存  然后把地址存放在栈内存中 
2. 堆内存中 存放的是函数体里面的代码 会当作字符串 这里当然也有键值对的情况 创建好了之后就等着函数被调用了
3. 在创建的函数的时候 我们就已经声明了函数的作用域 指就是我们函数所在的上下文 
4. 比如我们上面的的代码 我们的函数 所处的上下文 就是EC(G)
5. 函数创建了 单步执行 就是相当于存放了一大堆的字符串 一点用都没有

• 执行函数

1. 函数执行的目的是 把之前创建的函数时候 在函数体中存储的代码字符串去执行
2. 首先会形成一个全新的私有的上下文 比如我们在全局代码执行的时候 会形成一个EC(G)的全局上下文 这里也是一样的
3. 自己私有的上下文 创建好了之后 还会生成一个自己私有的 私有变量对象控件 叫AO 这就就是存放我们的内部的私有变量 比如 形参 比如 在函数体内部 声明的变量
4. 然后开始进栈 准备执行 执行之前我还有好多事情去做
5. 初始化作用域链 作用域两是一个两端的结构 左边是当前函数执行的时候自己生成的上下文 右端是你函数创建的时候 所在的作用域  这样就可以说明 当我们查找变量的时候 先去自己的执行上下文 中去找 如果没有 就看看作用域链 去自己的作用域中去找 如果在没有 就接着向上找 
6. 初始化 this指向 初始化 arguments 形参赋值 变量提升 等
7. 然后执行
8. 执行完毕之后 为了优化栈内存 会把形成的私有上下文 出栈释放掉(GC浏览器垃圾回收机制)

• 数据类型转换规则

• 把其他数据类型转换为number

1. 特定需要转换为number的
 +Number([val])
 +parseInt/parseFloat([val])
2. 隐式转换(浏览器内部默认要先转为Number在进行计算)
  +isNaN([val])
  +数学运算

• 把其他数据类型转换为字符串

1.能使用的方法 toString() String()
2.隐式转换 加号运算的时候 如果某一边出现字符串 则式字符串拼接 
把对象转换为数字 需要先toString()转换为字符串 在去转换为数字

• 把其他数据转换为布尔

1. 基于以下方式可以把其他数据类型转换为布尔 !转换为布尔值后取反 boolean([val])
2. 隐式转换 在循环或者条件判断中 条件处理的结果就式布尔类型值
3. 规则 只有 0 NaN null undefined 空字符串 五个之转换会变成布尔

• 在==比较过程中 数据转换的规则

1.类型一样的几个特点 
{} == {} false 对象比较的是堆内存中的地址
[] == [] false
NaN == NaN false

2. 类型不一样的转换规则
null == undefined true 但是 null ==== undefined 结果是false(因为类型不一样)
剩下的null / undefined 和其他任何数据类型值都不相等

3.字符串 == 对象  要先把对象转换为字符串

4. 剩下的如果 == 两边数据类型不一样 都是要转换为 数字在进行比较

//示例
[] == false 
对象 == 布尔 两边类型不相等 都转换为数字 
对象转换为数字 先转换为字符串(先基于valueOf获得原始值 如果没有在去toString) 在转换为数字 空数组变成字符串 为 空字符串 ''字符串转成数字为0 false转换为数字为0

• 对象转换为字符串

1. {} 在转换为字符串的时候 为 "[object object]" 其余的都是用双引号包裹起来
2. 因为对象在转为字符串的时候 调取的toString方法 是调取Object.prototype.toString 而这个方法 是检测数据类型的

• 把其他类型转换为数字

Number('') 0  Number('10') 10 Number('10px') NaN 
Number(true) 1 Number(false) 0 Number(null) 0
Number(undefined) NaN 
Number(Symbol(10)) //转不了symbol 报错
//对象变为数字 应该先valueOf获取原始值 如果没有原始值 在toString 变为字符串 最后把字符串变为数字

• parseInt机制

1. 把转换的值先转换为字符串 
2. 机制就从字符串的左侧第一个字符串开始 查找有效数字字符 遇到非有效数字 就停止不在找了 把找到的有效数字字符转换为数字 一个都没有找到 结果是NaN
3. parseFloat 比 parseInt 多检测一个小数点

//示例
parseInt('1.2px') // 1
parseInt('') //NaN 先从字符串左侧开始找到有限数字 如果找不到 就返回NaN 所以结果是NaN
Number('') //0
isNaN('') // false这个会隐式转换为Number 是 0 0 不是NaN 所以是fanlse
ParseInt(null)// NaN 先转换为字符串为 'null'然后从左侧第一个开始查找  找不到有限数字 结果是NaN
Number(null) // 0
isNaN(null) //false
parseInt('12px') // 12
Number('12px') //NaN
isNaN('12px')// true
isNaN(Number(!!Number(parseInt('0.8')))) //false
//parseInt('0.8') -> 0
//!!Number(0) -> false
//Number(false) -> 0
// isNaN(0) -> false 
typeof !parseInt(null) + !isNaN(null)
//!parseInt(null) -> !NaN -> true
//typeof true -> 'boolean'
// !isNaN(null) ->  isNaN(null) -> !false -> true 
// 'booleantrue'

//示例
let result = 10 +  false + undefined + [] + 'Tencent'  + true + {}
10 + false => 10 + 0 =>10
10 + undefined => 10 + NaN => NaN
NaN + [] => NaN + '' => 'NaN'
//后面的 就都是字符串拼接了
'NaNTencentTencentTencenttrue[object object]'

• 小知识

+ 号 即使一边出现字符串 或者对象 也不一定是字符串拼接 ++/+ 这种情况
console.log(++'10') //11
console.log(+'10') //number 10
{} + 0 //0 会把左边的{} 认为是一个代码块 不参与运算 只算+0
0 + {} //"0 [object object]"  这是数学运算

• 变量声明

1. 变量声明一共有5种方案 var function let const import
2. let 和 const 声明的都是变量 const 声明的变量是不允许指针重新指向的(但是存储的值是可以改变的 比如 存储的值是引用数据类型 可以基于地址改变堆内存种的信息)
3. 我们赋值本身 就是指针关联或者指针指向的过程

// var  和 let 的区别
 + var fuction 存在变量提升 let 和 const 不存在
 + 在相同的上下文种 let 是不允许重复声明的 (而且检测是否重复声明 是发生在词法解析阶段) 词法解析 -> 变量提升 -> 代码执行
 + 暂时性死区 (浏览器遗留的BUG) 基于typeof 检测一个未被声明的变量 不会报错 结果是undefined
 + 除了函数或者对象的大括号之外 如果括号中 出现let / const / function 则会产生块级私有上下文 当前块级上下文也只是对 let / const / function 他们声明的变量有作用

//变量提升阶段
console.log(fn) // undefined
if( 1== 1){
    console.log(fn) //函数 私有的
    function fn() { console.log('ok')}
    fn = 12
    console.log(fn) //12
}
console.log(fn) //函数
老版本浏览器 不管条件是否成立 变量 和 函数都会提升 函数也会定义
新版本 不管条件是否成立 函数都会提升 但不会赋值(比如在判断体 循环体 代码块 ) 他只会进行声明 不会赋值和定义
如果以上的大括号种出现了function xxx(){} 此时当前大括号会形成一个私有的上下文 第一件事情 就是变量提升 他会把函数声明 加定义

• 变量提升机制

1. 变量提升发生在 当前上下文中 (全局/私有/块级) js代码自上而下执行之前浏览器会提前处理一些事情
2. 带var的 只会提前声明  带function的会 提前声明加定义 就是函数整体提升
3. 函数表达式的方式 var fn = function(){} 只是会吧fn的变量 提升
4. let 和 const  是不进行变量提升的 只有带var 和functiond的才会
5. 基于全局上下文中声明的变量 和函数 会映射到全局变量 window上一份 作为它的属性 一个修改 另外一个也修改
6. 不论条件是否成立 都要进行变量提升

//具名话 针对于函数表达式 
1. 我们原本 函数表达式 后面会写一个 匿名函数 但是现在 我们写了一个AAA的名字
var func = function AAA(){
    //但是这个具名的话的函数名字 可以在自己的当前上下文执行
    //可以递归使用
    AAA()
}    
2. 但是这个名字 在全局 是没有作用的
AAA() //AAA调用 会报错

// let  和 const 没有 变量提升 所以 报错也不一样
console.log(a) // Cannot access 'a' before initialization
let a = 12

// 不论条件是否成立 都要进行变量提升(细节点:条件中带function的在新版本浏览器中只会提前声明 不会在提前赋值了)
1. 这里 就是 你下面不管条件是否成立不成立 都要提升一个a变量
if(!('a' in window)){
    var a = 1
    function fn(){}
}
console.log(a)
[老版本 浏览器]
var a fn = 函数
[新版本 浏览器(IE10以上)]
var a fn

fn()
function fn(){console.log(1)}
fn()
function fn(){console.log(2)}
fn()
var fn = function (){console.log(3)}
fn()
function fn(){console.log(4)}
fn()
function fn(){console.log(5)}
fn()
/* EC(G)
* 1. 首先函数整体提升 fn()都上去了
* 2. 当走到 var fn = function (){console.log(3)} 发现已经有fn的函数了  就先不处理
* 3. 然后代码开始执行 前三个fn调用输出 都是5 
* 4. 当走到 fn = function (){console.log(3)} 开始给fn函数重新赋值了 所以后三个输出都是3
*/

• 块级作用域的变量提升机制

1. 如果我们的代码 出现在了除函数 和 对象意外的花括号里面 那么就会产生一个块级上下文
2. 新版本浏览器中 如果出现在块级作用域里面的代码 那么变量只声明不复制
3. 当我们执行代码的时候 会产生映射机制 也就是出现在块级作用域里的变量声明 或者函数执行的 之前的代码 都会映射到全局 而之后的代码 都会是私有的

• 形参默认值

1. 如果我们的函数形参有默认值了 而且 我们函数里有var声明的了变量 那么这个声明的变量将会形成一个块级作用域
2. 如果是let 声明的变量 那么就会报错
3. 并且块级私有上下文的上级上下文 就是函数的私有上下文

• 闭包作用域和高级编程技巧

1. 一般情况下 函数执行完成之后 所有形成的私有上下文 都会出栈释放 私有上下文中的一切内容都会被销毁 主要是为了优化栈内存控件
2. 特殊情况 如果函数执行所形成上下文中 有一个东西(引用类型的空间地址) 被当前上下文 以外的事物所占用 那么当前上下文 是不能被释放的 上下文中的信息保留下来了(包含私有变量) 导致栈内存空间变大 如果返回的地址还会被执行一次 所以也临时不会释放 当 外部用完 就会释放
3. 函数每次执行 都会形成一个全新的私有上下文

let x = 5
function fn (x){
    //这里的return 就当是在堆内存中又开辟了一个空间 把函数的地址返回了
    return function(y){
        console.log(y + (++x))
    }
}
let f = fn(6) //这里其实就是返回了一个地址 而这种就是我们上面所说的 特殊情况
f(7)
fn(8)(9)
f(10)
console.log(x)

let a = 0 b =0
function A (a) {
    //这种地址也会被引用 因为在大A是全局的变量 执行到这里的时候 我们相当于把A的地址又重新赋值了
    A = function(b){
        alert(a + b ++)
    }
    alert(a++)
}
 A(1) // 弹框1
 A(2) // 弹框4

//示例
var buttonList = document.querySelectorAll('button');
/* 
// 实现不了的，为啥？
//  + 循环中的i是全局的，每一轮循环给对应元素的click绑定方法（创建函数 [存储代码字符串]，此时函数没有执行）
//  + 循环结束的时候，全局的i=5
//  + 点击某个按钮，执行之前绑定的函数：此时形成一个全新的私有上下文，它的上级上下文是全局上下文，函数代码执行的过程中，遇到变量i，但是i不是自己的私有变量，找到的是全局的i，全局的i是5
*/
for (var i = 0; i < buttonList.length; i++) {
    buttonList[i].onclick = function () {
        console.log(i, `我是第${i+1}个按钮~`);
    };
}
//最后每次点击按钮之后 打印出来的都是5

//解决
// 解决问题的思路：当点击事件触发，执行对应的函数，用到的i不要再向全局查找了；相当于自己形成一个上下文，而自己的上下文中，存储了你需要的i，存储的值是指定的索引即可  =>闭包的保存机制
// 弊端：循环多少次，就产生多少个闭包，非常消耗内存
 for (var i = 0; i < buttonList.length; i++) {
    // 每一轮循环都会把自执行函数执行，形成一个全新的私有上下文（一共形成了5个）
    //   + 把当前这一轮全局i的值作为实参，传递给当前形成的私有上下文中的形参n[私有变量]
    //   + 第一个私有上下文中的n=0，第二个私有上下文中的n=1 ....
    // 每一个形成的上下文中，创建的函数都被外部的元素对象的onclick占用了，所以形成了5个闭包
    // 当点击按钮执行函数的时候，遇到一个变量n，不是自己私有的，则找上级上下文（闭包）中的n，而n存储的值就是它的索引
    (function (n) {
        buttonList[n].onclick = function () {
            console.log(`我是第${n+1}个按钮~`);
        };
    })(i);
}

for (var i = 0; i < buttonList.length; i++) {
    buttonList[i].onclick = (function (i) {
        // i是每一轮形成的闭包中的私有变量，五个闭包中存储的值分别是0~4[索引]
        // 每一次都是把小函数返回，赋值给元素的点击事件，当点击元素的时候，执行返回的小函数
        return function () {
            console.log(`我是第${i+1}个按钮~`);
        };
    })(i);
}

// 还是基于“闭包的机制”，但是不是自己去执行函数构建，而是利用ES6中let产生的私有上下文实现
for (let i = 0; i < buttonList.length; i++) {
    // 第一轮循环 私有块1
    //   + 私有变量 i = 0
    //   + 当前私有上下文中的创建的一个函数被全局的元素对象的onclick占用了(闭包)
    // ....
    buttonList[i].onclick = function () {
        console.log(`我是第${i+1}个按钮~`);
    };
}

• let 的 for 循环机制

1. 循环第一轮 会形成一个父级的私有块上下文 循环结束后就会销毁
2. 父级块上下文 都会把变量 传送给下面的子集上下文
3. 然后开始循环 每一轮都会形成一个私有块上下文 由于被我们的click 占用 所以不会销毁

• 事件绑定解决方案

1. 无论闭包还是let 我们都是用闭包解决的
2. 还有第二种解决方案 给每个DOM对象加个自定义属性
3. 利用事件代理的机制（性能提高>=40%）

 // 方案二：自定义属性（事先把一些信息存储到元素的身上，后期在一些其他的操作中，想要获取这些信息，直接基于元素的属性访问就可以拿到这些值） =>操作DOM的时代下，这种方案非常常用
for (var i = 0; i < buttonList.length; i++) {
    // 把当前按钮的索引存储在它的自定义属性上（每个按钮都是一个元素对象）
    buttonList[i].myIndex = i;
    buttonList[i].onclick = function () {
        // 给当前元素的某个事件绑定方法，当事件触发，方法执行的时候，方法中的this是当前点击的按钮
        console.log(`我是第${this.myIndex+1}个按钮~`);
    };
}

// 方案三：利用事件代理的机制（性能提高>=40%）
<button index="1">按钮1</button>
<button index="2">按钮2</button>
<button index="3">按钮3</button>
<button index="4">按钮4</button>
document.body.onclick = function (ev) {
    let target = ev.target;
    // 点击的是按钮
    if (target.tagName === "BUTTON") {
        let index = target.getAttribute('index');
        console.log(`我是第${+index+1}个按钮~`);
    }
};

• 短路语句

A || B  A的值是真 返回A的值 否则返回B的值
A && B  A的值是真 返回B的值 否则返回A的值
如果同时存在  &&高于||

• This

1. this 函数的执行主体 和执行上下文不是一个概念
2. 全局的this 是 window 我们研究中的都是函数中的this

• this 的执行规律

1. 给当前元素的某个事件行为绑定方法 事件触发 执行对应的方法 方法中的this 是当前事件本身

document.body.click = function () { // this-> body }
// IE 6/7/8 基于 attachEvent 绑定的不是this 是 window

2. 函数执行 首先看函数名称之前 是否有 点 有点 点前面是谁 this 就是谁 如果没有 点  this 就是window(严格模式下 没有 点 this 是 undefined)

3. 自调用函数/回调函数 中的this 一般都是window 或者 undefined h

4. 构造函数中的this 是当前类的实例
5. 箭头函数中没有自己的this 用到的this 都是上下文中的this
6. 基于call / apply / bind 可以强制改变this指向

• arguments 形参映射机制

// EC(G)
var = 4
function b (x,y,a) {
    // 形成自己的私有执行上下文 EC(b)
    // 初始化作用域链 <EC(b),EC(G)>
    //初始化this:window
    //初始化 arguments:{0:1,1:2,2:3,length:3}  左侧是真实结构 为了方便看我们携程数组[1,2,3] 这里还会和我们的形参形成映射机制
    // 形参赋值 x =1 y =2 a =3
    //变量提升
    console.log(a) // 3
    arguments[2] = 10
    console.log(a) //10
}
a = b(1,2,3)
console.log(a)

• 模块化 / 单列模式设计模式

1. 在很早以前没有引用类型 比如对象 和 函数的时候 想描述个人信息的时候 就需要一个变量一个变量的去定义 这个时候 就会造成全局变量的冲突

//比如 我们描述 欧阳花的个人信息
let name = "欧阳花" let age = 21 let sex = '男'
//还想描述 吴家乐的个人信息
let name = '吴家乐' let age = 25 let sex = '女'
//以上我们看到 变量就冲突了

2. 所以我们开始用闭包的方式 去描述 因为 闭包里面的变量都是私有变量 不会跟外部产生冲突

//闭包的方式去描述
(function(){
    let name = "欧阳花" 
    let age = 21 
    let sex = '男'
})()
(function(){
    let name = '吴家乐' 
    let age = 25 
    let sex = '女'
})()

3. 但是以上 我们如果要在吴家乐那的作用域下 用到 欧阳花里面的变量  只能添加到window上  这种方式 如果变量不是很多还好

// 真实业务开发 B 里面可能要用到 A 的方法 就需要把A的方法暴漏到windows上去
A
(function(){
    let set = 0
    function fn(){}
    function query () {}
    window.query = query
})()
B   里面要用到A 里面的query方法
(function(){
    let set = 0
    window.query()
})()

//所以这里 我们就用暴漏对象的方法 把要使用的方法 return 出去 这种方式就叫单例模式
let AModule = (function(){
    let set = 0
    function fn(){}
    function query () {}
       return {
        query,
        set
    }
})()
// B 模块
(function(){
    let set = 0
    AModule.query()
})()

4. 在我们自己编写类库/插件/UI组件/框架的时候 为了防止全局变量污染 我们需要基于闭包的机制进行 "私有化" 处理

(function(){
    function Banner(){}
    //利用暂时性死区 如果一个变量没有声明 用typeof检测 是undefined(浏览器可以typeof 可以检测到window 是 'object') 我们利用这个特点可以区分 是浏览器执行js 还是node执行js
    if(typeof window !=='undefined'){
         window.Banner = Banner
    }
    //如果是CommonJS / ES6Module 就会检测到下面两个东西
       if(typeof module !== 'undefined' && typeof module.exports !== 'undefined'){
    module.exports = Banner
    }
})()

• 惰性函数

1. 能执行一次 绝对不会执行第二次

// 我们在获取元素样式的时候 用到的API 有 getComputedStyle 和 currentStyle(这个方法在IE6-8)
function getCss(elemnt,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(elemnt)[attr]
    }
    return elemnt.currentStyle[attr]
}
//然后我们开始获取元素的样式
console.log(getCss(document.body,'width'))
console.log(getCss(document.body,'padding'))
console.log(getCss(document.body,'margin'))
//总结 这样好么 因为我们每执行一次函数 都需要处理兼容性问题 其实没必要 因为在第一检测时候就已经知道兼容情况了

function getCss(elemnt,attr){
    if(window.getComputedStyle){
        //走到判断 就可以判断我们是哪个浏览器的兼容了 然后改变getCss的指针
        getCss = function (elemnt,attr) {
            return window.getComputedStyle(elemnt)[attr]
        }
    }else{
        getCss = function(elemnt,attr){
            return elemnt.currentStyle[attr]
        }
    }
   // 改变之后 要保证我们的第一个函数要执行一次 拿到结果 
   return getCss(element,attr) 
}
//第一次执行函数
console.log(getCss(document.body,'width'))、
// 第二次走的时候 就直接走到 我们改变指针的那个函数了 
console.log(getCss(document.body,'padding'))
console.log(getCss(document.body,'margin'))
//以上我们 再次执行的是时候 是重构后的小函数 告别了 兼容校验的操作   只执行一次

2. 惰性函数 就是函数重构的问题 第一次执行 会产生闭包

• 柯里化函数

1. 区别于惰性函数  是一个预处理的思想 应用的也是闭包的机制

let res = fun(1,2)(3)
console.log(res) //求和结果 为6
//实现以上函数 首先第一函数执行的时候 我们不知道传进来几个参数 第二次也不知道 所以我们用剩余形参去接收
//然后把两个函数的参数 连接在一起 在最总进行求和
function fn (...outerArgs){
    //剩余参数 会把你的实参放在一个数组中 而arguments是一个伪数组
    return function anonymous(...innerArgs){
        let arr = outerArgs.concat(innerArgs)
        // 如果reduce里面 没有传第二个形参 那么total 就是数组中的第一项 item是第二项  然后相加就变成3 然后把3作为total 在和 后面的一项相加
        return arr.reduce((total,item) => {
            return total + item
        },这里还可以传第二个形参)
    }
}

2. 第一次执行大函数 形成一个闭包(原因:返回了一个小函数) 把一些信息存储到了闭包中(传递的实参信息或者当前闭包中声明的一些私有变量等信息) 等到后面需要把返回的小函数anonymous执行 遇到一些非自己私有变量 则向其上级上下文中查找

• 组合函数

1. 把处理数据的函数像管道一样连接起来 然后让数据传过管道得到 最终的结果
2. 以下 就是我们把每个函数的运行结果 当作形参 传递给了下一个函数 参与了运算

const add1 = (x) => x + 1
const mul3 = (x) => x * 3
const div2 = (x) => x / 2
div2(mul3(add1(add1(0)))) // => 3

2. 上面的写法可读性明显很差 我们可以构建一个compose函数 它接收任意多个函数(而这些函数都只能接收一个参数) 然后compose 返回也是一个函数 
const operate = compose(div2,mul3,add1,add1)
operate(0)   相当于 div2(mul3(add1(add1(0))))
operate(2)   相当于 div2(mul3(add1(add1(2))))

function compose(...func){
    return function operate(x){
        //如果你一个数据处理函数也没有传进来  那么 就直接返回你的参数
        if(func.length === 0) return x
        //如果你只传进来一个事件处理函数 那么 我们就执行
        if(func.length === 1) return func[0](x)
        //这里我们要知道 我需要最先执行 func数组里的最后面的函数 然后结果当作参数传给倒数第二个函数里 一次类推 所以这里我们会用到reduce 所以先要把数组反转以下
        let n = 0
        func.reverse()
        return func.reduce((result,item) => {
            n++
            //说明这是第一次 result是add1函数 item是你传进来的第二次个add1函数
            if( n === 1){
                return item(result(x))
            }
            return item(result)
        })
    }
}
//下面是几种情况
let operate = compose(div2,mul3,add1,add1)
console.log(operate(0))  => 3
//一个数据函数都没有传 就直接返回你的形参
let operate = compose(div2,mul3,add1,add1)
operate(0) => 0  
//如果只传进来一个数据处理函数 就 直接执行
let operate = compose(add1)
operate(0) => 0

• 函数的防抖

1. 对于频繁触发的某个操作 我们只识别一次

function handle() {
    setTimeout(() => {
        console.log('ok')
    },1000)
}
//如果我频繁点击submit这个按钮  他就会一直触发handle这个函数 一直输出OK  如果我们控制让它在300MS 无论你点几次 只触发一次
submit.onclick = handle

2. 在当前点击完成之后 我们等wait这么长的时间 看是否还会触发第二次 如果没有触发第二次 属于频繁操作 我们直接执行想要执行的函数func 如果触发了第二次 则以前的不算 从当前这次再开始等待

// func 就是你要点击执行的那个函数 wait 就是我们控制在多少时间只内 只执行一次 inmmediate 就是我们让func这个函数 执行 你第一次触发 还是最后一次触发
/*
 * @params 
 * func[function] 最后执行的函数
 * wait[number] 频繁设定的界限
 * inmmediate 默认多次操作 我们识别的是最后一次 但是inmmediate =true 让其识别第一次
 * @return 可以被调用执行的函数 
 */
function debounce (func,wait = 300, inmmediate =false){
    //为什么return 因我们 submit.onclick = function (e) {} 也是执行一个匿名函数
    // 这里 我们可能还有事件对象 e 还有 事件源 this 也需要改变一下指向
    let timer = null //主要是为了清除定时器用
    return function anonymous(...params){
        //我在第一次点击的时候 先清除一下定时器 因为第一没有 所以函数接着往下走
        //第二次的时候 我们清除了之后 定时器函数里面就不执行了 然后又重新开启了一个定时器 把上一次的取消了
        clearTimeout(timer)
        timer = setTimeout(() => {
            //执行你传进来的函数 并且把this的指向指向你的事件源 并且把事件对象传进去
            func.call(this,...params)
        },wait)
    }
}
// 以上 就触发 了最后一次 基本的防抖 就已经实现了
submit.onclick = function () {
}

// 下面 我们要根据 inmmediate 来控制 只执行触发的第一次
function debounce (func,wait = 300, inmmediate =false){
    let timer = null 
    return function anonymous(...params){
        let now = inmmediate  &&  !timer
        clearTimeout(timer)
        //我第一次进来 还是跟以前一样 设置一个定时器
        timer = setTimeout(() => {
            //3. 手动让定时器回归到初始状态
            timer = null
              //2. 所以这里也要看看 如果是让我第一次执行 那我定时器里面的就都不执行了
            !inmmediate?func.call(this,...params) : null
        },wait)
        //1. 看看你是否让我立即执行 如果是 我就立即执行 但是同时你等了wait以后 定时器里面的也执行了
        now?func.call(this,...params):null
    }
}
// 以上 就触发 了最后一次 基本的防抖 就已经实现了
submit.onclick = function () {
}

• 函数的节流

1. 让函数 在一定时间内 执行相应的次数

function handle(){
    console.log('ok')
}
// 我们每一次的浏览器滚动过程中 都会触发上面那个函数 频率非常大 浏览器有最快反应时间(5~6ms 13-17ms) z只要反应过来了 就会触发函数
window.onscroll = handle

2. 需要知道 我上一次触发的时间 到我这次的时间 小于我的频率时间 如果小于就不执行函数

// 每300ms触发一次
/*
 * @params
 * func[function]: 最后要触发执行的函数
 * wait[number]: 触发的频率
 * @return 可以被调用的执行函数
*/
function throttle (func,wait = 300){
    let timer = null
        previous = 0   //记录上一次操作的时间
    return function anonymous(...params){
        let now = new Date() //记录当前函数执行的时间
            remaining = wait - (now - previous) //记录还差多就达到我们一次触发的频率
        if(remaining <= 0){
            clearTimeout(timer)
            timer = null
            //等于我们的上一次触发时间
            previous = now
            //如果这个小于0 就说明我们已经过了间隔时间 可以触发第二次了
            func.call(this,...params)
        }else if(!timer){
            // 如果你第二次点击发现没有设置定时器我才设置 如果设置了我就不设置了 因为你第二次进来的时候发现我等的那个函数还没执行 所以我就不用设置定时器 只有你没有 我才设置
            // 这里就说明 我们还在我们频率时间内点击了第二次 所以不能触发 我们要等
            timer = setTimerout(() => {
                timer = null
                previous = new Date()
                func.call(this,...params)
            },remaining)
        }
    }
}
window.onscroll = throttle(handle)

面向对象

• 编程思想

1. OOP 面向对象  js  java php python 
2. POP 面向过程  c语言

• 面向对象的概念

1. 我们js  所有的东西都可以理解为一个类
2. 比如我们的对象 数组 它上面所有的方法 都是从上面继承下来的

「数据类型类：我们见到的数据值都是所属类的一个实例」
  + Number
  + String
  + Boolean
  + Symbol
  + BigInt
  + Object
    + Object
    + Array
    + RegExp
    + Date
    + ...
  + Function
「DOM对象/节点或元素集合/样式对象或者集合等」
  + HTMLDivElement / HTMLAnchorElement / HTMLUListElement ... 每一种元素对象都有一个自己所属的类
  + HTMLElement / XMLElement ...
  + Element / Text / Document...
  + Node 节点类
  + EventTarget
  + HTMLCollection / NodeList  ...
  + CSSStyleDeclaration
  + ......
---------------
学习JS基础知识，尤其是API层面的
  + 类.prototype：存放的是给当前类的实例调用的公共属性方法
  + 类.xxx：把其当作对象设定的静态私有属性方法
  + ...
document.getElementById('xxx')
   + 获取上下文只能是document?
   + getElementById是在Document类原型上提供的方法，只有Document它的实例才可以调用(document是它的实例)
[context].getElementsByTagName('*')
   + Element类的原型上提供getElementsByTagName方法
   + 每一个元素标签都是Element类的实例
   + Document的原型上也有这个方法，所以document也可以用
   + ...

• 自定义类

1. 上面的那些和方法 都是自己去写的类 也就是js 已经你写好的
2. 但是除了以上那些 还远远不够 所以 我们自己就又了自定义类 new class

//普通函数执行
function sum (x,y){
    let total = x + y
    this.total = total
    return total
}
let res = sum(10,20)
console.log(res) //输出30

// 当我们加了new 之后 执行的方式就不一样了
function sum (x,y){
    let total = x + y
    this.total = total
    return total
}
let res = new sum(10,20)
console.log(res) //  {total:30} 执行结果

• 带 new 的函数执行都干了什么

1. new 的函数执行  首先会和普通函数一样 形成上下文EC(XXX) AO(xxx) 初始化作用域链 形参赋值 变量提升 等等
2. new的函数执行 在代码执行之前 私有上下文之前 会创建一个空对象
3. 然后初始化this的时候  就会让我们的this 指向我们创建的对象
4. 后期在代码执行过程中 如果遇到this.xxx 都是给我们上面创建的那个实例对象创建私有的属性和方法
5. 如果没有些 return 默认是把我们的创建的对象返回 如果自己写了 return  自己返回的是基本类型值 写也没用 还是返回我们上面创建的那个对象 如果返回的是引用类型值 返回的是你自己写的引用类型
6. new Fn 也相当于把函数执行了 不带列表的 new 最后 Fn 都一定会执行 而且都会创造这个类的实例 区别 是否传递实参  以及运算优先级不一样
7. 所有的类都是一个函数数据类型值 内置类/自定义类
8. 每一次new 类创造的实例都是 独立的实例对象 这种模式在js中叫做 构造函数模式

• 面向对象 原型prototype 和 原型链proto

1. 每一个类(函数) 都具备 prototype(隐式原型) 并且属性值是一个对象
2. prototype 对象上天生具备一个属性 constructor 指向类本身
3. 每一个对象(普通对象、prototype、实例、函数等)都具备__proto__(显式原型) 属性值是当前实例所属的原型
4. 所有的类都是函数数据类型(包括内置类) 所有的函数都天生自带一个属性 prototype 属性值默认是一个对象数据类型 其存储的是 供实例能调用的公共属性和方法 
5. 所有的对象数据类型值也天生自带一个属性__proto__原型链 它的属性值:当前类的原型prototype 实例.__proto__ = 类.prototype
6. 如果我们调取了实例中的一个方法 它先看自己的实例上有没有 如果没有就去原型上找  这个就是原型链查找机制

//总结
1. 首先我们每个函数上面都有一个 prototype(原型)属性 是一个对象 对象里面有我们的constructor 指向我们的函数本身
2. 当new 执行函数的时候 初始化的this的时候 我们会单独开辟一块空间 创建一个实例对象 只要是对象就会有一个属性__proto__
3. 每个对象上面 都有 一个__proto__ (原型链)也是一个对象 如果这个函数是new 执行的 那么 __proto__指向的就是我们函数的 prototype
4. 也就是说 实例对象(new 执行函数的时候初始化this出来的那个对象).__proto__ =  类(也就是我们的构造函数).prototype
5. 我们函数的 prototype(原型) 也是一个对象 那么它也有一个__proto__ 指向应该是构造我们的prototype的函数 那么这个函数就是 new Object()
6. 所以 当我们一个类上的方法没有的时候 它就会去我们的原型上找 如果没有 就顺着原型链 一步一步的向上查找 最终找到我们的 Object 函数 这就是 原型链查找机制

• 原型重定向

1. 原型重定向 就是把 prototype 的指针指向一个新的对象
2. 原型为啥要重定向 为了方便给原型上扩充属性和方法
3. 原型重定向 带来的问题是 新定向的原型对象上 没有constructor属性 结构不完整 我们浏览器默认生成的原型对象因为缺少引用 会被释放掉 可能导致原始加入的属性和方法丢失掉

function Fn (){
    this.x = 100
    this.y = 200
}
// 原始的原型对象
Fn.prototype.getX = function(){}
//这个时候 就相当于给我们的原型重定向了 那么我们之前在prototype上的getX 这个方法也没有了 constructor也没有了 这种重定向 可以批量添加属性和方法
Fn.prototype = {
    //如果原始的原型对象不存在其他的属性和方法 我们只需要手动添加constructor 指向我们的类
    constructor:Fn
    getY:function(){},
    getX:function(){},
    getZ:function(){},
}
//如果我们的原型对象上有别的属性 我们就需要合并进来
/*
 *    Fn.prototype = Object.assgin(Fn.prototype,{
 *            getY:function(){},
 *           getX:function(){},
 *          getZ:function(){},
 *      })
 *
 */
let f1 = new Fn

• 原型重写 new

1. 我们自己来实现一个_new函数 
2. 这里就需要知道new的时候 都干了什么 
3. 首先 new 函数执行 和普通函数的执行一样  形成私有上下文 初始作用域链 形参赋值 变量提升 代码执行
4.  创建了一个空对象 this 指向了它 对象.__proto__ = Dog.prototype 
5. 把this 指向 指向这个我们创建的空对象 如果没有 return 或者返回的是基本类型值  则返回都是实例对象 否则返回我们自己定义的对象

function Dog(name,age){
    this.name = name
}
Dog.prototype.bark = function () {console.log('wangwang')}
Dog.prototype.sanName = function () {console.log('my name is' + this.name)}
function _new (func,...params){
    //1. 首先我们要创建一个实例对象
    let obj = {}
    obj.__proto__ = func.prototype
    //2. 把类当作普通函数执行 并且让this 指向我们的实例对象
    let res = func.call(obj,...params)
    //3. 根据返回结果 决定返回啥
    if(res !== null && (typeof res === 'object' || typeof res === 'function')) return res
    return obj
}
let sanmao = _new(Dog,'dahuang',23)
sanmao.bark()
samao.sayName()
// IE 我们使用不了__proto__ 所以就要用到下面的方法
// 创建了一个空对象 并且把对象A作为它的原型 空对象.__proto__ = 对象A
Object.create(obj)

• 基于内置类原型扩充方法

1. 我们知道内置类 比如 Array Object 都是函数数据类型 就会有一个自己所属的堆内存 但是里面的代码我们看不到 就会有一个 native code 
2. 每一个函数 都会自带一个属性 叫 prototype 属性值是一个对象 自带一个属性constructor 指向自己构造函数本身 
3. 像内置类的原型上扩充方法 最好设置私有前缀 而且扩充方法里面的this 就是我们的当前实例
4. 必须要保证 this 是我们当前要操作的实例

// 我们用 数组去重举例 
//我们arr 都是我们 Array的实例  所以我们可以调用Array.prototype上的方法 
let arr = [1,2,3,3,1,8] 
Array.prototype.myUnique = function () {
    //这里面的this 就是我们实例本身  所以首先我们要保证 this 是个数组
    if(!Array.isArray(this)) throw new TypeError('不是一个数组')
    return Array.from(new Set(this))
}
arr.myUnique() //直接就可以去重

// 我们现在 实现一个加减 的方法
let n = 10
let m = n.plus(10).minus(5)
console.log(m) // (10+10-5) 15
//如果我们基于原型上扩充方法
Number.prototype.plus = function(num) {
    //这里面我们输出this 发现并不是10 而是引用类型 Number(10) typeof this => 'object'
    //这里所有的this 都不是基础类型的值 都是引用类型的值
    // 如果我们想变成基础类型值 我们需要用call apply bind 改变this 指向 变成基础类型值
    console.log(this) // Number(10)
    // 我们知道 上面的就是个对象 对象 相加 就会变成 '[obejct object]10'
    // 但是我们这个方法是有原始值 会先调用valueOf获取原始值(number/string/boolean/Date)
    // 如果有原始值 就获取到结果即可并且参与到运算 如果没有就转换称字符串
    return this + num
}
Number.prototype.minus = function(num) {
    return this - num
}

//基于以上的总结
1. JS创建一个值有两种方法 一种是字面量 一种是构造函数
let n = 10 //字面量
let n = new Number(10) // number(10)
2.  上面不论哪种方法 创建出来的都是一个实例
3.  基础数据类型 上面的那辆创建方式 输出结果是不一样的 字面量 就是 10  构造函数创造出来的就是引用类型 Number(10)
4. 我们字面量方式创造的值 在调用方法的时候 会默认 把字面量的方式 变成引用类型值 在去原型上调方法

• 函数的三种角色

1. 我们要知道 所有的函数 都是也都是 Function 的内置类 置换出来的
2. 但是函数的内置类的原型 prototype 不是一个对象 是一个匿名空函数 但是操作上和其他类的原型一摸一样 没有啥却别 
3. 函数的三种角色普通函数执行 闭包作用域
   构造函数执行 new 类和实例
   普通对象 键值对
4. 这三种角色之间没有必然的联系
5. 这里我们知道 我们的内置类Array Object Number 这些也都是函数 那么函数也是一个对象 所以他们作为普函数来说 都会有__proto__ 都会指向我们 Function 的prototype

//实例
function Foo() {
    getName = function () {
        console.log(1);
    };
    return this;
}
Foo.getName = function () {
    console.log(2);
};
Foo.prototype.getName = function () {
    console.log(3);
};
var getName = function () {
    console.log(4);
};
function getName() {
    console.log(5);
}
// 首先 函数记得有三种角色 第一种是 当作普通函数执行 第二种是 new 执行 第三种是 作为对象
// 这里就相当于 我们把Foo当作一个对象 访问了它的getName属性执行 所所以输出结果是 2
Foo.getName(); // 2
// 这里就是执行全局的函数getName() 全局我们可以看到 第一次函数是5 但是 后来 有重新把函数赋值了 所以输出 是4
getName(); // 4
// 这里是当作普通函数执行 普通函数执行return this  这里的this 是window 但是 函数执行的时候 又把全局的getName()重新写了 所以就相当于调window.getName() 是1
Foo().getName(); // 1
//因为全局的函数已经被重新了 所以输出是1
getName(); // 1
// 这就存在优先级的问题 是new 函数执行的优先级搞 还是 成员访问的优先级高
// obj.xxx 访问的优先级 是 19 new Fn() 带参数 是19  new Fn 是18 如果优先级相同那么就从左向右一次执行
// 所以我们要先执行Foo.getName() 就相当于 执行了 new function(){console.log(2)} new的时候函数也会执行 所以 输出的是2
new Foo.getName(); //2
// 这里 由于两个优先级 都是相同的 所以 从左向右一次执行  所以这里new Foo()执行 创建了实例对象 this 指向了这个实例对象 那么这个实例对象上没有getName() 就要像原型上找 也就是Foo.prototype.getName() //所以输出结果是3
new Foo().getName(); //3 
//这里从上面一样 只不过最后当普通函数执行了 输出结果也是3
new new Foo().getName(); //3

• THIS种的五种情况

1.  给当前元素的某个事件行为 绑定方法 当事件行为触发 方法执行 方法种的this 一般都是 当前操作元素 排除IE6~8中 基于 attachEvent进行的DOM2事件绑定 方法中的 this 是 window

document.body.onclick = function () { console.log(this) } //输出是body
document.body.addEventListenner('click',function(){console.log(this)}) //输出是body

2. 函数执行(看函数前面是否右点) 点前面是谁 this 就是谁 没有点 this 是window 严格模式下 是undefined 匿名函数(自调用函数/回调函数) 一般this 就是window

const fun = function () { console.log(this) }
let obj = {
    namF:'obj',
    fn:fun
}
fun() //输出this 是 window  严格模式下 use strict undefined
obj.fn() // this 是obj
(obj.fn)() //同上
//括号表达式  括号里面有多项的情况下 只取最后一项 
(10,20,obj.fn)() // this 是window
//自调用函数
(function(){console.log(this)})() // window
//数组的回调函数
[1,2].sort(() => {console.log(this)}) // window
// forEach
[1,2,3].forEach((item)=>console.log(this),obj) //这里forEach处理了改变了this指向 就是obj

3. 构造函数 new 执行 函数体中的this 是当前的实例

function Fn(){
    this.x = 100
}
//普通函数执行 this 是window
Fn()
// new 执行 this 是实例本身 也就是f
const f  = new Fn()
Fn.prototype.say = function () { console.log(this.x) }
// 本身私有属性上没有这个方法 就去原型prototype去找 由于是f的实例调取的 所以this 是f 
f.say()

4. 箭头函数中 或者 基于{} 形成的块级上下文 里面没有 this  如果 代码中有this 也不是函数自己的 而是 自己所在的上下文中的

let obj = {
    namF:'obj',
    fn(){
        setTimeout(function(){
            this.name = 'xxx'
        },1000)
    }
}
obj.fn()  //这里面的定时器 this 是window 
// 如果是箭头函数 他就会去找上一层的this 也就是我们函数定义的上下文 上一层的this 取决于谁调用
let obj = {
    namF:'obj',
    fn(){
        //或者我们也可以 把this 先存期来 let _that = this
        setTimeout(() => {
            //_that.name = xxx
            this.name = 'xxx'
        },1000)
    }
}

5. 我们可以基于function.prototype 上的call / apply /bind 去改变this 指向 但是对于箭头函数无用

const fn = function fn (){
    console.log(this)
}
window.name = 'xxx'
let obj = {
    namF:'obj',
    fn:fn
}
fn()  // 输出 是 window.name
obj.fn() // 输出是 obj.name
// 如果 obj 里面没有fn 属性  但是我们还想让fn的this 指向 obj 那么就要用到call appply bind
fn.call(obj,这里面还可以传参)

// call 的执行逻辑
fn.call(obj,10,20)
首先 fn 基于原型链__proto__ 找到 Function.prototype.call 方法 并且把call 方法执行
call 方法中的this 就是 当前操作的实例fn 传递给call 方法的第一个实参 是未来改变fn中的this 指向 剩余参数 都是未来要一次传递给fn的参数信息
call 方法执行的过程中 这样处理 把fn[call中的this]执行 让fn 中的this 指向obj 并且把参数也传递进去
call 如果第一个参数 如果不传 或者传 null / undefined  在js 非严格模式下 最后fn 中的this 都是window (严格模式下 不传this 是undefined) fn.call(10,20) //fn this -> 10
// apply 
和call 一样 只不过传参的时候 后面的 要以数组的形式 fn.apply(obj,[10,20])
// bind 是预先处理 执行bind 先把函数中需要改变的this 等存储起来 但是此时函数不会被执行 执行bind的时候 会返回一个匿名函数 当后期执行匿名函数的死后 再去把之前需要执行的函数执行 并且改变this 为预设的值

// 定时器中的call
let obj = {
    namF:'obj.name'
}
window.name = 'window.name'
function fn(){
    console.log(this.name)
}
// 这样是不行的  我们call 方法 在改变this 的时候 是立即执行的 这样是不可以的1000之后就不在执行了
setTimeout(fn.call(obj),1000)
//解决方法   我们把它写在一个函数里
setTiomeout(function(){
    fn.call(obj)
},1000)
//解决方法 用bind 因为bind 是返回一个柯里化函数
setTimeout(fn.bind(obj),1000)

• 手写call / apply / bind 源码

• 手写 bind

function fn (x,y) {
    this.total = x + y
}
let obj = {
    namF:'obj的名字'
}
//我们普通的点击事件 就要执行一个函数 里面还有事件对象的参数
document.body.onclick = function (e) {
    //这里面的this是我们的body
}
// 所以 我们用 bind 的时候 首先也要返回一个函数 并且要传递事件对象 并且要改变this 指向
documnet.body.onclick = fn.myBind(obj,10,20)
Function.prototype.myBind = function (context,...params) {
    //首先这里面的this 是我们的fn 函数 因为是 fn 调取的myBind 函数 
    //context -> 你传进来的obj对象
    //params -> 是 你传进来的是10 20
    // 这里面我们要retrun 一个匿名函数 anonymous 也就是点击body的时候要执行的匿名函数
    let _that = this
    return function anonymous (...arg) {
        //首先这里面的this 因为是body调取的这个函数 所以 this 是body
        //2. 所以就需要我们拿到外面缓存的that
        _that.call(obj,...params.concat(arg))
    }
}
//当然 这里我们也可以写成箭头函数的形式 这样就不用缓存this 了 它会去它所所以的上下文中的上层去找this
Function.prototype.myBind = function (context,...params) {
    return (...arg) => {
        //首先这里面的this 因为是body调取的这个函数 所以 this 是body
        //2. 所以就需要我们拿到外面缓存的that
        _that.call(obj,...params.concat(arg))
    }
}