funcion fn(){
    let o1 = {}
    let o2 = {}
    o1.a = o2
    o2.a = o1
    return '引用计数无法回收'
}
fn()
// 他们的引用次数永远不会为0，这样相互引用会导致内存泄漏

// 普通
const arr = [1,2,3,4]
arr = null

let person = {
    age : 18,
    name: '佩奇'
}
let p = person
person = 1 
p = null

function outer(){
    const a = 1
    function f(){
        console.log(a)
        // 内部函数使用外层函数的变量, 二者捆绑在一起
    }
    f()// 调用一下，不然没使用函数
}
outer()

function outer(){
    let a = 10
    function fn(){
        console.log(a)
    }
    return fn 
    // 返回一个函数
}
outer()
// 所以outer() === fn === function fn(){}

// 新增一个外部函数,fun()可以直接输出outer内部的值
// 外层函数使用内部函数的变量
const fun = outer()
fun()

// 非闭包
let i = 0
function fn(){
    i++
    console.log(`函数被调用${i}`)
    // 这时候 i是全局变量，容易被修改，
    // 太像java的getter setter方法了
}

// 闭包版
function count(){
    let i = 0
    function fn(){
        i++
        console.log(`函数被调用${i}`)
    }
    return fn
}

const fun = count() // 全局变量，当页面关闭时才回收，引用count()中的fn()函数，不会回收
// 这时没有人可以影响函数中的i值，但是闭包也存在内存泄漏的风险

console.log(num + '件')
var num = 10 // undefined

// 所以上方两行代码 等于以下代码

var num
console.log(num +'件')

function fn(){
    console.log ('函数提升')
}
fn()

// 两种情况都一样

fn()
function fn(){
    console.log ('函数提升')
}

// 但是这种形式 不一样！！函数表达式(赋值),函数表达式必须先声明赋值 再调用，否则报错

fun()
var fun = function fn(){
    console.log ('函数提升')
}

// 不管用户传入几个参数，都要接受
function getSum(){// 不知道用户传多少参数
    // arguments 动态参数 只存在函数里
    // arguments 是伪数组
    console.log(arguments)
    let sum = 0
    for (let i = 0; i<argument.length; i++){
        sum+=arguments[i]
    }
    return sum
}
getSum (2,3,4)

function getSum(...arr){ 
    // ... 就是剩余参数的语法符号 arr随便写
    console.log(arr)
}
getSum(1,2,3)

// 第二种用法
function getSum(a,b, ...arr){ 
    // ... 就是剩余参数的语法符号 arr随便写
    console.log(arr) // arr = 3
}
getSum(1,2,3)

const arr = [1,4,5,8,2] // 数组 对象都能用
console.log(...arr) //1 4 5 8 2

// 普通函数
const fn = function(){
    console.log('我是普通函数')
}
fn()

// 箭头函数
const fn = () => {
     console.log('我是普通函数')
}
fn()	

//普通函数
const fn = function(x){
    return x+x
}

//箭头函数
const fn = x =>{
    return x+x
}
console.log(fn(1))

// 普通函数
const fn = function(x,y){
    return x+y
}
console.log(fn(1,2)) //3

// 箭头函数
const fn = (x,y) => x+y
console.log(fn(1,2)) //3

const form = document.querySelector('form')
form.addEventListener('click',ev => ev.preventDefault())

const fn1 = uname => ({uname: uname})
console.log(fn1('pink老师'))

const getSum = (...args) => {
    let sum = 0
    for (let i = 0; i<args.length;i++){
        sum += args[i]
    }
    return sum 
    // 注意函数体有多行代码时需要return
    // 大括号也不能省
}
console.log(getSum(1,2,3))

console.log(this) //此处为window
const sayHi = function({
    cnosole.log(this)
	// 普通函数指向调用者，此处为window
})
btn.addEventListener('click',function(){
    console.log(this)
    // 当前this，指向btn
})

const fn = ()=>{
    console.log(this) //window
}
// 因为箭头函数没有this!!, 所以会调用父亲window的this

const obj = {
    uname : 'pink老师'，
    sayHi : () => {
        console.log(this) //this指向谁？window
    }
}

obj.sayHi()
// 因为sayHi()方法中没有this，沿用上一级obj的this， window 调用obj，所以this指向window

const user = {
    name: '小明',
    sayHi: function(){
        // 注意这是普通函数，this指向函数的调用者
        console.log(this) //user
        let i = 10
        const count = () =>{
            console.log(this) //user
        }
        count() // user
        // 因为箭头函数的作用域中没有this，所以指向上层作用域的this
    }
}

// DOM 节点
const btn = document.querySelector('.btn')
// 箭头函数，此时this指向window
btn.addEventListener('click',() =>{
    console.log(this)
})
// 普通函数，此时this指向了DOM对象
btn.addEventListener('click',function(){
    console.log(this)
})

// 普通写法
const arr = [100,60,80]
const max = arr[0]
const min = arr[1]
const avg = arr[2]
console.log(max) 
console.log(min)
console.log(avg)

// 解构赋值版本
const [max, min, avg] = [100, 60, 80]
console.log(max) 
console.log(min)
console.log(avg)

(function t(){})();
// 或者
;(function t(){})()

// 数组开头的，特别是前面有语句的一定要注意加分号
;[b,a] = [a,b]

const obj = {
    uname : 'pink老师',
    age : 18
}
// 对象解构
const {uname,age} = {
    uname : 'pink老师',
    age : 18
}
// 等价于 const uname = obj.name
const uname = obj.uname

const obj = {
    uname : 'pink老师',
    age : 18
}
const {uname: username,age} = obj

const pig = [
    {
        uname: 'pig',
        age: 18
    }
]

const[{uname, age}]  = pig

const pig = {
    name : '佩奇',
    family: {
        mother:'猪妈妈',
        father:'猪爸爸',
        sister:'乔治',
    },
    age:6
}

const {name, family{mother,father, sister},age} = pig
cosole.log(name)
cosole.log(mother)
cosole.log(father)
cosole.log(sister)
cosole.log(age)

const people = [
    {
        name : '佩奇',
        family : {
            mother:'猪妈妈',
        	father:'猪爸爸',
        	sister:'乔治'
        },
        age : 6
    }  
]

const[{name,family:{mother,father,sister},age}] = people

cosole.log(name)
cosole.log(mother)
cosole.log(father)
cosole.log(sister)
cosole.log(age)

被遍历的数组.forEach(function(当前数组元素，当前元素所引号)){
    // 函数体
}

const arr = ['red','green','pink']
arr.forEach(function(item, index){
    console.log(item) // red green pink
    console.log(index) // 0，1，2
})

被遍历的数组.filter(function(item,value){
    return 筛选条件
})

const arr = [10,20,30]
const newArr = arr.filter (function(item,index){
    console.log(item)
    console.log(index)
    return item>=20
    // 返回新数组
})
newArr // [20,30]

// 箭头函数 简洁版
const newArr = arr.filter(item => item>=20)

const o = {
    name: '佩奇'
}

const o = new Object()

function Pig (name, age, gender){
    this.name = name
    this.age = age
    this.gender = gender
}
// 创建佩奇对象
const Peppa = new Pig('佩奇'，6，'女')
const George = new Pig('乔治'，6，'女')
const Mum = new Pig('妈妈'，6，'女')

function Person(name){
    // 实例属性
    this.name = name
    // 实例方法
    this.sayHi= () => console.log('hi!!~~')
}

function Person(name,age){
    // code...
}
// 静态属性
Person.eyes = 2
// 静态方法
Person.breath = function(){
    console.log('走路ing')
    // 此时 this 指向Person
    console.log(this.eyes) 
}

const user = new Object()
const user = {uname:'pink',age:18}
// 原来使用for..in..遍历
// 现在使用 Object.keys(user)

// Object.assign()
const o = {name:'佩奇',age:6}
Object.assign(o, {gender:'女'})
console.log(o) {name: '佩奇', age: 6, gender:'女'}

const arr = new Array (2,5,4)
const arr = [2,3,5] //推荐!! 字面量的形式创建数组

// 基本语法
arr.reduce(function(){}, 初始值)
arr.reduce(function(上一次值, 当前值){}, 初始值)

// 例子
const arr = [1,5,8]
// 没有初始值
const total = arr.reduce(function(prev,current){
    return prev + current
})
console.log(total) //14

// 有初始值
const total = arr.reduce(function(prev,current){
    return prev + current
},10) //14+10 ==24 

// 箭头函数版
arr.reduce((prev,current) => prev + current,10)

const arr = [{
      name: '张三',
      salary: 10000
    }, {
      name: '李四',
      salary: 10000
    }, {
      name: '王五',
      salary: 20000
    },
    ]

    const salaries = Object.values(arr)

    console.log(salaries)
    const total = salaries.reduce(function (pre, next) {
      console.log(pre)
      return pre + next.salary
    }, 0)
    console.log(total)

// find()
const arr = ['red','blue','green']
const re = arr.find(function(item){
    return item === 'blue'
})
console.log(re)
// find()使用场景
const arr = [
    {
        name :'小米'，
        price: 1999
    },
    {
        name:'华为'，
        price: 3999
    },
    {
        name :'小米'，
        price: 1999
    }
]

arr.find(function(item){
    item.name == '小米'
    return item
})
// 箭头函数版 
arr.find (item =>  item.name == '小米')


// every()
[12,5,8,130,44].every(x => x>=10 ); false
[12,130,44].every(x => x>=10); true

// some() 和 every()差不多，类似于&& 和 ||的区别
          
          

// str.split() 和 arr.join() 作用相反
const str = 'pink, red'
const arr = str.split(',')
console.log(arr); // ['pink', 'red']

const str1 = '2022-4-8'
const arr1 = str1.split('-')
console.log(arr1) //['2022','4','8']

// str.substring()
const anyString = 'Mozilla'
anyString.substring(1) //ozilla

// str.startsWith(searchString [,position])
const str = "To be, or not to be, that is a question"
str.startsWith('To be') //True
str.startsWith('not to be') //False
str.startsWith('not to be',10) //True

// str.includes() 方法区分大小写
'Blue Whale'.includes('blue') // False
str.includes('To be',1) // False

const price = 23.345
// 保留两位小数，四舍五入
price.toFixed(2) 23.35

function Star(uname, age){
    this.uname = uname
    this.age = age
    this.sing = function(){
        console.log('我会唱歌')
    }
}
const ldh = new Star('刘德华'，55)
const zxy = new Star('张学友'，55)

// 公共的属性写到构造函数里
function Star(uname, age){
    this.uname = uname
    this.age = age
    this.sing = function(){
        console.log('我会唱歌')
    }
}
Star.prototype 
// 看起来像属性，但是返回值是对象

// 公共的方法写到了原型对象身上
Star.prototype.sing = function(){
    console.log('我会唱歌')
}
const ldh = new Star('刘德华'，55)
const zxy = new Star('张学友'，55)
ldh.sing()
zxy.sing()
//此时 
ldh.sing === zxy.sing //true

// 数组扩展方法
// 最大值, 添加方法
const arr = [1,2,3]
Array.prototype.max = function(){
    // 展开运算符
    return Math.max(...this)
}
arr.max()

// 求和 
Array.prototype.sum = function(){
    return this.reduce((prev,item)=>{prev+item},0)
}

function Star(){}
// Star已经是构造函数了，肯定有prototype的属性了
Star.prototype.contructor
// prototype对象有constructor的属性，指回Star构造函数

function Star(name){
    this.name = name
}
// 以对象的形式批量添加原型方法
Star.prototype = {
    // 需要手动添加constructor，指回Star构造函数
    constructor: Star,
    sing:function(){console.log('唱歌')},
    dance:function(){console.log('跳舞')}
}
// 这样的话，prototype中的constructor的属性就会被覆盖

function Star(){}
const ldh = new Star()
// 对象原型__proto__指向 该 构造函数的原型对象
console.log(ldh.__proto__)
//Star.prototype
// 所以!!!!!!
ldh.__proto__ === Star.prototype
Star.prototype.constructor //是Star
// 所以!!
ldh.__proto__.constructor === Star

// 将公共类放在原型上
const Person = {
    eyes: 2,
    head: 1
}
// 女生 构造函数，通过原型继承Person
function Women(){}
Women.prototype = Person
Women.prototype.constructor = Women
// 添加女生类的单独的方法，但是会出现将男生类方法一起修改的情况
Women.prototype.say = function(){
    console.log("我是女生，漂亮的女生")
}

function Man(){
    Man.prototype = Person
    Man.prototype.constructor = Man
}

// 将Person变成类 (构造函数)
function Person(){
    eyes: 2,
    head: 1
}
function Woman(){
    
}
// prototype上存一下不变的方法
Woman.prototype = new Person()
Woman.prototype.constructor = Woman

ldh instanceof Person // true
ldh instanceof Object // true
ldh instanceof Array // false
[1,2,3] instanceof Array // true
Array instanceof Object // 万物皆对象

const obj = {
    uname: 'pink',
    age: 18
    family:{ // 这一层还是指向同一个地址
    	baby:'pink'
	}
}
const o = {}
Object.assign(o,obj) // 浅拷贝
const o  = {...obj} // 浅拷贝的另一种形式

let i =1
function fn(){
    console.log(`这是第${i}次`)
    if (i >= 6){ // 退出条件
        return
    } 
    i++
    fn() // 自己调用自己
}

// 为了更好的递归，利用递归函数实现setTimeout模拟setInterval效果
function getTime(){
    document.querySelector('div').innerHTML = new Date().toLocalString()
    setTimeout(getTime, 1000) // 自己调用自己
}
getTime()

const obj = {
    uname:'pink',
    age:18
    hobby:['乒乓球','足球']
}
const o = {}
//拷贝函数 本质是浅拷贝
function deepCopy(newObj, oldObj){
    for(let k in oldObj){
        // k 属性名 uname   oldObj[k] 属性值18
        // newObj[k] === o.uname
        newObj[k] = oldObj[k]
    }
}
deepCopy(o,obj) 
//函数调用 两个参数 
// o->新对象 
// obj旧对象
o.age = 20 // 现在对象o改变，也不会影响obj
o.hobby[0] = '篮球' 
//还是会修改obj，所以本质!!! 是浅拷贝!!

const obj = {
    uname:'pink',
    age:18
    hobby:['乒乓球','足球']
}
const o = {}
//拷贝函数 注意深拷贝数组需要在新对象中重新new
function deepCopy(newObj, oldObj){
    for(let k in oldObj){
        if (oldObj[k] instanceof Array){
            newObj[k] = []
            // 调用递归
            deepCopy(newObj[k],oldObj[k])
        } else{
            // k 属性名 uname   oldObj[k] 属性值18
            // newObj[k] === o.uname
        newObj[k] = oldObj[k]
        }
    }
}
deepCopy(o,obj) 
//函数调用 两个参数 
// o->新对象 
// obj旧对象
o.age = 20 // 现在对象o改变，也不会影响obj
o.hobby[0] = '篮球' 

<script src = './lodash.min.js'></script>
const obj = {
    uname: 'pink',
    age: 18,
    hobby: ['乒乓球','足球'],
    family:{
        baby:'小pink'
    }
}
const o = _.cloneDeep(obj) // 深拷贝！

const obj = {
    uname: 'pink',
    age: 18,
    hobby: ['乒乓球','足球'],
    family:{
        baby:'小pink'
    }
}
// 把对象转换为字符串
JSON.stringify(obj)
// 再把字符串转换成对象
const o = JSON.parse(JSON.stringify(obj))
// 新对象
// 转换成简单数据类型之后，直接存值，在转换成对象时，重新变成了新对象

function couter(x,y){
    if(!x || !y){
        throw '参数不能为空' 
    }
}

function couter(x,y){
    if(!x || !y){
        throw new Error('参数不能为空')
    }
}

function foo(){
    try{
        // 可能发生错误的代码，写入try模块
        const p = document.querySelector('.p')
        p.style.color = 'red'
    } catch (err){
        console.log(error.message)
        // 错误信息
        // 拦截错误，提示浏览器提供错误信息，但是不中断程序执行，可以与 throw new Error('')配合使用，会中断程序
        return
        // 需要return 中断程序
    }
    finally {
        // 不管程序对不对，一定会执行的代码
        alert('执行')
    }
    console.log('如果出现错误，我的语句不会执行')
}

console.log(this) //this指向window
// 普通函数
function sayHi(){
    console.log(this)
}
// 函数表达式
const sayHello = function(){
    console.log(this)
}
// 函数的调用方式决定了 this 的值
sayHi()
window.sayHi() // window 调用

setTimeout(function(){
    console.log(this) //window
},1000) // 也是window， 因为本质是
window.setTimeout()

document.querySelector('button').addEventListener('click',function(){console.log(this)})
// 输出的是button，因为是button调用了函数

const obj = {
    sayHi:function(){
        console.log(this)
    }
}
obj.sayHi()

const user = {
    name: '小明',
    walk: ()=>{
        console.log(this)
    }
}
// 此时对象里没有this，向上层寻找 this 指向window

// DOM 节点
const btn = document.querySelector('.btn')
// 箭头函数此时 this 指向了window
btn.addEventListener('click',()=>{
    console.log(this)
    // 由于使用箭头函数，所以此时的this指向window
    // 因为this绑定外层
})
btn.addEventListener('click',function(){
    console.log(this)
    // 普通函数的this则指向调用者
})

function Person(){
}
// 原型对象上添加箭头函数
Person.prototype.walk = () => {
    console.log('人都是要走路..')
    console.log(this); //指向window
}
const p1 = new Person()
p1.walk()
// 这个位置注意，面向原型本质是挂载方法，让其他实例在创建之后就能使用，如果使用箭头函数，this无法指向实例对象，而是指向window

const obj = {
    uname : 'pink'
}
function fn(x,y){
    console.log(this) // window
    console.log(x+y)
}
// 使用call方法改变函数指向
fn.call(obj,1,2)
// 输出obj函数 和3

const obj = {
    age:18
}
function fn(x,y){
    console.log(this) 
    // {age: 18}
    console.log(x+y)
}
fn.apply(obj,[1,2]) // 18 , 3

// 使用场景： 求数组最大值
const max = Math.max(1,2,3)
// 使用Math.max方法
const arr = [100, 44, 77]
const max = Math.max.apply(Math, arr)
const min = Math.min.apply(Math, arr)
// 这个案例写Math和null都可以
const max = Math.max.apply(null, arr)
const min = Math.min.apply(null, arr)

// 第二种求数组最大值的方法, 扩展运算符
console.log(Math.max(...arr))

const obj = {
    age: 18
}
function fn(){
    console.log(this)
}
// 1. bind 不会调用函数
// 2. 能改变 this 窒息那个
// 3. 返回值是一个函数，但是这个函数里面的this是更改过的
const fun = fn.bind(obj)
fun()

// 定时器内部的例子
document.querySelector('button').addEventListener('click',function(){
    // 禁用按钮
    this.disabled = true
    window.setTimeout(function(){
        this.disabled = false
    }.bind(this), 2000)
})

const box = document.querySelector('.box')
let i = 1
function mouseMove(){
    box.innerHTML = i++
}
// box.addEventListener('mousemove',mouseMove)

// 利用lodash库实现防抖 500ms之后采取+1
// 语法： _.debounce(fun,时间)
box.addEventListener('mousemove',_.debounce(mouseMove, 500))

// 创建一个函数 第一个参数时方法，第二个是时间
function mouseMove(){
    box.innerHTML = i++
}

function debounce(fn, t){
    let timer 
    return function(){
        // 如果有删除掉
        if（timer）clearTimeout(timer)
        timer = setTimeout(function(){
            fn() 
        },t)
    }
    
}
box.addEventListener('mousemove',debounce(mouseMove, 500))

const box = document.querySelector('box')
let i = 1
function mouseMove(){
    box.innerHTML = i++
    // 如果里面存在大量消耗性能的代码，如dom操作、数据处理，可能会造成卡顿
    // 利用Lodash库实现节流， 500ms之后采取+1
    box.addEventListener('mousemove',_.throttle(mouseMove, 500))
}

const box = document.querySelector('box')
let i = 1
function mouseMove(){
    box.innerHTML = i++
    // 如果里面存在大量消耗性能的代码，如dom操作、数据处理，可能会造成卡顿
    // 利用Lodash库实现节流， 500ms之后采取+1
}
function throttle(fn, t){
    let timer = null
    return function(){
        if(!timer){
            timer = setTimeout(function(){
                fn()
                // 清空定时器
                // 为什么不用clearTimeout？
                // 因为不能在开启的定时器里，删除定时器
                timer = null
            },t)
        }
    }
}
box.addEventListener('mousemove',throttle(mouseMove, 500))
}