深浅拷贝和异常处理与性能优化

const obj = {
  uname: '欣标',
  age: 18
}

// 第一种方法 浅拷贝
const o = { ...obj }
console.log(o)   // {uname: '欣标', age: 18}
o.age = 20
console.log(o)   // {uname: '欣标', age: 20}
console.log(obj) // {uname: '欣标', age: 18}

// 第二种方法 浅拷贝
const o = {}
Object.assign(o, obj)
console.log(o)      // {uname: '欣标', age: 18}
o.age = 20
console.log(o)      // {uname: '欣标', age: 20}
console.log(obj)    // {uname: '欣标', age: 18}

const arr = [1, 2, 3]

// 第一种方法 浅拷贝
const newArr = [...arr]
console.log(newArr)   // [1, 2, 3]
newArr[1] = 9
console.log(newArr)   // [1, 9, 3]
console.log(arr)      // [1, 2, 3]

// 第二种方法 浅拷贝
const newArr = arr.slice()
console.log(newArr) // [1, 2, 3]
newArr[1] = 9
console.log(newArr) // [1, 9, 3]
console.log(arr)    // [1, 2, 3]

// 递归函数：类似for循环自己调用自己
let i = 1
function fn() {
  console.log(`这是第${i}次`)
  if (i >= 6) {
    return
  }
  i++
  fn()
}
fn()

function getTime() {
  document.querySelector('div').innerHTML = new Date().toLocaleString()
  setTimeout(getTime, 1000)
}
getTime()

const obj = {
  uname: '欣标',
  age: 18,
  hobby: ['兵乓球', '足球'],
  sing: {
    count: 100,
    why: false
  },
  say: function () {
    console.log('方法')
  }
}
// Lodash语法
const o = _.cloneDeep(obj)
console.log(o) // {uname: '欣标', age: 18, hobby: Array(2), sing: {…}, say: ƒ}
obj.say() // 方法

// 赋值
o.hobby[1] = '篮球'
o.sing.foot = '面包'
o.say = () => console.log('新方法')
o.son = () => console.log('儿子')

o.say() // 新方法
o.son() // 儿子

console.log(o)
console.log(obj)

const obj = {
  uname: '欣标',
  age: 18,
  hobby: ['兵乓球', '足球'],
  sing: {
    count: 100,
    why: false
  },
  say: function () {
    console.log('方法')
  }
}
// 把对象转换为 JSON 字符串
const o = JSON.parse(JSON.stringify(obj))
console.log(o)

o.sing.foot = '面包'
console.log(obj)

function fn(x, y) {
  if (!x || !y) {
    // throw '没有参数传递进来'
    throw new Error('没有参数传递进来')
  }
  return x + y
}

console.log(fn())  // exe.js:3 Uncaught 没有参数传递进来

function exampleFunction() {
    let x = 10;
    debugger; // 程序将在这里暂停
    x = x + 5;
    console.log(x);
}

exampleFunction();

console.log(this)  // window

function fn() {
  console.log(this) // window
}
fn()

setTimeout(function () {
  console.log(this)  // window
}, 1000)

document.querySelector('button'), addEventListener('click', function () {
  console.log(this) // button
})

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

// 严格模式 了解
// 'use strict'
// function fn() {
//   console.log(this) // window
// }
// window.fn()

function Person() {

}
// 原型对像上添加了箭头函数
Person.prototype.walk = () => {
  console.log('人都要走路..')
  console.log(this) // window
}
const p1 = new Person()
P1.walk()

const obj = {
  uname: 'xinbiao'
}

function fn() {
  console.log(this) // window
}
fn()

// 调用函数 改变this指同
fn.call(obj) // {uname: 'xinbiao'}
// 也可以传形参和实参
fnn.call(obj, 1, 2)

const obj = {
  uname: 'xinbiao'
}

function fn(x, y) {
  console.log(this) // window
  console.log(x + y)
}
// fn()

// 1. 调用函数 改变this指同
// fn.apply(obj) // {uname: 'xinbiao'}
// fn.apply( this指向,数组参数)
fn.apply(obj, [1, 2])
// 2. 返回值 本身就是在调用函数，所以返回值就是函数的返回值


// 使用场景
// const max = Math.max(1, 2, 3)
const arr = [1, 2, 3]
const max = Math.max.apply(null, arr)
console.log(max) // 3

// 展开运算符
console.log(Math.max(...arr)) // 3

const obj = {
  uname: 'xinbiao'
}

function fn() {
  console.log(this) // window
}

// 1. bind 不会调用函数
// 2. 能改变this指向
// 3. 返回值是个函数， 但是这个函数里面的this是更改过的obj
const fun = fn.bind(obj)
fun()    // {uname: 'xinbiao'}

const btn = document.querySelector('button')

btn.addEventListener('click', function () {
  // 禁用按钮
  this.disabled = true
  window.setTimeout(function () {
    // 这个普通函数里面，我们要this由原来的window 改为 btn
    this.disabled = false
  }.bind(this), 2000) // 这行的 this等于 btn
})

// 如果里面存在大量消耗性能的代码，比如dom操作，比如数据处理，可能造成卡顿
const box = document.querySelector('.box')
let i = 1
function mou() {
  box.innerHTML = i++
}

// 利用Lodash库实现防抖 500毫秒之后采取 +1
// 语法 _.debounce(fun, 500)
box.addEventListener('mousemove', _.debounce(mou, 550))

const box = document.querySelector('.box')
let i = 1
function mou() {
  box.innerHTML = i++
}

// 手写防抖函数
function debounce(fn, t) {
  let timer
  // return 返回一个匿名函数
  return function () {
    // 2,3,4
    // 判断定时器，如果有就删除
    if (timer) clearTimeout(timer)
    // 开启定时器
    timer = setTimeout(function () {
      fn() // 加小括号调用 fn函数
    }, t)
  }
}

// 因为 debounce()是带了小括号的，页面一打开就执行完了，所以要返回一个匿名函数
box.addEventListener('mousemove', debounce(mou, 500))
// debounce(mou, 500) // 调用函数
// debounce(mou, 500) // function () { 2,3,4 }

const box = document.querySelector('.box')
let i = 1
function mou() {
  box.innerHTML = i++
}

// Lodash库实现节流 3000毫秒之后采取 +1
box.addEventListener('mousemove', _.throttle(mou, 3000))

const box = document.querySelector('.box')
let i = 1
function mou() {
  box.innerHTML = i++
}

// 手写一个节流函数
function throttle(fn, t) {
  let timer = null
  return function () {
    // 判断没有定时器就开启定时
    if (!timer) {
      timer = setTimeout(function () {
        fn()
        // 清空定时器
        timer = null
      }, t)
    }
  }
}
box.addEventListener('mousemove', throttle(mou, 3000))

let timer = null
timer = setTimeout(() => {
  clearTimeout(timer)
  console.log(timer) // 1
}, 1000)

const video = document.querySelector('video')

video.ontimeupdate = _.throttle(() => {
  // console.log(video.currentTime) // 打印当前的时间
  // 把当前的时间存储到本地存储里
  localStorage.setItem('currentTime', video.currentTime)
}, 1000)

// 打开页面触发事件，取出本地存储的时间开始播放
video.onloadeddata = function () {
  // console.log(1111)
  video.currentTime = localStorage.getItem('currentTime') || 0
}