JS 进阶 - 深入面向对象

function Star(uname , age) {

   this.uname = uname

   this.age = age

   this.sing = function() {

      console.log('我会唱歌')

   }

}

// 实例对象，获得了构造函数中封装的所有逻辑

const ldh = new Star('刘德华' , 18)

const zxy = new Star('张学友' , 19)

console.log(ldh === zxy)// false

console.log(ldh.sing === zxy.sing)// false

// 1. 公共的属性写到 构造函数里面

function Star(uname, age) {

    this.uname = uname

    this.age = age

    // 构造函数实例对象都是独立的彼此互不影响但是 多个对象就会有多个不同地址的函数 浪费内存

    // 不建议将函数写在构造函数中

    // this.sing = function () {

    //     console.log (' 唱歌 ')

    // }

}

// 2. 公共的函数写到 原型对象 身上

Star.prototype.sing = function() {

    console.log('唱歌')

}

const ldh = new Star('刘德华', 18)

const zxy = new Star('张学友', 19)

ldh.sing()// 唱歌

zxy.sing()// 唱歌

console.log(ldh.sing === zxy.sing)

let that

function Star(uname, age) {

    // 构造函数里面的 this 就是 实例对象 ldh

    that = this

    // console.log(this)

    this.uanem = uname

    this.age = age

}

let that1

// 原型对象里面的函数 this 指向的还是 实例对象 ldh

Star.prototype.sing = function() {

    that1 = this

    console.log('会唱歌')

}

// 实例对象 ldh

const ldh = new Star('刘德华', 18)

ldh.sing()

// 判断两个 对象是否是同一个 对象

console.log(that === ldh) // true

console.log(that1 === ldh) // true

// 自己定义 数组扩展方法  求和 和 最大值

// 1. 我们定义的这个方法， 任何一个数组实例对象都可以使用

// 2. 自定义的方法写到 数组.prototype 身上

const arr = [1, 2, 3]

// 最大值

// 数组实例.prototype 原型.max 返回最大值

Array.prototype.max = function () {

    // 原型函数里面的 this 指向 实例对象 arr 并 展开 this

    return Math.max(...this)

}

console.log(arr.max())// 3

// 求和函数

Array.prototype.sum = function () {

    // 原型函数里面的 this 指向 实例对象 arr

    return this.reduce((prev, current) => prev + current, 0)

}

console.log(arr.sum())// 6

// 构造函数

function Star() {}

// 实例化对象

const ldh = new Star()

// 只要是原型对象里面默认都有一个 constructor 属性并且指向 Star

console.log(Star.prototype)//constructor : ƒ Star()

// 判断原型里面的构造函数属性是否与 Star 构造函数是相同的

console.log(Star.prototype.constructor === Star)// true

// 构造函数

function Star() { }

// 这么写 比较麻烦

// 追加的不会覆盖原型中的 constructor 属性的指向

Star.prototype.sing = function () {

    console.log('唱')

}

Star.prototype.dance = function () {

    console.log('跳')

}

Star.prototype.warp = function () {

    console.log('warp')

}

Star.prototype.qiu = function () {

    console.log('篮球')

}

// 实例化对象

const ldh = new Star()

ldh.sing()

ldh.dance()

ldh.warp()

ldh.qiu()

console.log(Star.prototype)

// 构造函数

function Star() { }

// 赋值的会覆盖原型中原有的 constructor 属性指向

// 这种方式属于是将一个新的对象赋值给了 prototype 不再是之前的也不知道是谁的 this 了

Star.prototype = {

    sing: function() {

        console.log('唱')

    },

    dance: function() {

        console.log('跳')

    },

    warp: function() {

        console.log('warp')

    },

    qiu: function() {

        console.log('篮球')

    }

}

// 实例化对象

const ldh = new Star()

ldh.sing()

ldh.dance()

ldh.warp()

ldh.qiu()

console.log(Star.prototype)

// 构造函数

function Star() { }

// 赋值的会覆盖原型中原有的 constructor 属性指向

Star.prototype = {

    // 重新指回创造这个原型对象的 构造函数

    constructor: Star,

    sing: function() {

        console.log('唱')

    },

    dance: function() {

        console.log('跳')

    },

    warp: function() {

        console.log('warp')

    },

    qiu: function() {

        console.log('篮球')

    }

}

// 实例化对象

const ldh = new Star()

ldh.sing()

ldh.dance()

ldh.warp()

ldh.qiu()

console.log(Star.prototype)

// 构造函数

function Star() {}

// 实例化对象

const ldh = new Star()

// 打印实例化对象

console.log(ldh)

// 构造函数

function Star() {}

// 实例化对象

const ldh = new Star()

// 对象原型__proto__指向 构造函数的原型对象

console.log(ldh.__proto__ === Star.prototype)// true

// 对象原型里面有 constructor 指向 构造函数 Star 又指回来了！

console.log(ldh.__proto__.constructor === Star)// true

function Man() {

   this.head = 1

   this.eyes = 2

   this.legs = 2

   this.say = function() {}

   this.eat = function() {}

}

const pink = new Man()

function Woman() {

 this.head = 1

   this.eyes = 2

   this.legs = 2

   this.say = function() {}

   this.eat = function() {}

   this.baby = function() {}

}

const red = new Woman()

// 人类

const Person = {

    eyes: 1,

    head: 2

}

// 男人

function Man() {}

// 女人

function Woman() {

   this.baby = function() {}

}

// 对象 公共属性或方法

const Person = {

    eyes: 1,

    head: 2

}

// 女人构造函数

function Woman() {}

// 原型对象继承 Person 对象 公共属性或方法

Woman.prototype = Person

// 指向自己构造函数

Woman.prototype.constructor = Woman

// 向女人 中 追加一个 baby 的 特有函数

Woman.prototype.baby = function() {

    console.log('小宝宝')

}

console.log(new Woman())

// 男人构造函数

function Man() {}

// 原型对象继承 Person 对象 公共属性或方法

Man.prototype = Person

// 指向自己构造函数

Man.prototype.constructor = Man

console.log(new Man())

// 对象 公共属性或方法 不要使用对象 因为对象都引用了同一个内容一个修改会影响其它的

// const Person = {

//     eyes: 1,

//     head: 2

// }

// 使用构造函数 抽取公共的属性或方法

// 构造函数 new 出来的对象 结构一样 但是对象不一样

function Person() {

    this.eyes = 1,

    this.head = 2

}

// 女人构造函数

function Woman() {}

// 原型对象继承 Person 对象 公共属性或方法

Woman.prototype = new Person()

// 指向自己构造函数

Woman.prototype.constructor = Woman

// 向女人 中 追加一个 baby 的 特有函数

Woman.prototype.baby = function() {

    console.log('小宝宝')

}

console.log(new Woman())

// 男人构造函数

function Man() {}

// 原型对象继承 Person 对象 公共属性或方法

Man.prototype = new Person()

// 指向自己构造函数

Man.prototype.constructor = Man

console.log(new Man())

// 构造函数

function Person() {}

// 实例对象

const ldh = new Person()

// 判断实例对象的__proto__ 是否与 Person.prototype 相同 实例对象__prto__是指向 Person.prototype 的

console.log(ldh.__proto__ === Person.prototype)// true

//__proto__：对象原型 指向 原型对象

// 原型对象 里面有一个 对象原型 指向的还是一个 原型对象，那么指向的是谁的 原型对象呢？

console.log(Person.prototype.__proto__)

// 判断原型对象的对象原型是否指向 Object 的原型对象

// 因为 Person.prototype 是自定义函数 往上走就是 Object 没有其它的了 Object 指向 Object.prototype

console.log(Person.prototype.__proto__ === Object.prototype)// true

// Object 的构造函数 指向 Object.prototype 而 Object.prototype.constructor 指向 它自己的构造函数

console.log(Object.prototype)

// Object 的 prototype.__proto__ 指向上一层但是上一层就没有了 所以为 null

console.log(Object.prototype.__proto__)// null

// 构造函数

function Person() { }

// 实例对象

const ldh = new Person()

console.log(ldh instanceof Person)// true

console.log(ldh instanceof Object)// true

console.log(ldh instanceof Array)//false ldh 是一个对象它不属于数组

console.log([1, 2, 3] instanceof Array)//true [] 数组类型属于数组

console.log(Array instanceof Object)// 万物皆对象

// 1.Modal 构造函数封装 — 模态框

function Modal(title = '加载中...', message = '...') {

    // 创建 Modal 模态框盒子

    // 1.1 创建 div 标签

    this.modalBox = document.createElement('div')

    // 1.2 给 div 标签添加类名为 modal

    this.modalBox.className = 'modal'

    // 1.3 modal 盒子内部填充 2 个 div 标签并且修改文字内容

    this.modalBox.innerHTML = `

    <div class="header">${title} <i>x</i></div>

    <div class="body">${message} </div>

    `

    console.log(this.modalBox)

}

// 2. 给构造函数原型对象 挂载 open 方法

Modal.prototype.open = function () {

    // 先来判断页面中是否有 modal 盒子，如果有先删除，否则继续添加，防止重复打开同一个窗口

    const modal = document.querySelector('.modal')

    modal && modal.remove()

    // 注意这个方法不要用箭头函数 因为还需要用到 this

    // 把刚才创建的 modalBox 显示到页面 body 中

    document.body.append(this.modalBox)

    // 要等着盒子显示出来，就可以绑定点击事件了 (关闭窗口事件)

    this.modalBox.querySelector('i').addEventListener('click',() => {

        // 这个地方需要用到箭头函数

        // 这个 this 指向 实例对象 箭头函数 沿用作用域链上一层找 this 就是 function 函数 Modal 了

        console.log(this)

        this.close()

    })

}

// 3. 给构造函数原型对象挂载 close 方法 

Modal.prototype.close = function() {

    // 将当前元素从 DOM 树中删除

    this.modalBox.remove()

}

// 点击 删除按钮

document.querySelector('#delete').addEventListener('click', () => {

    const del = new Modal('温馨提示', '您没有权限删除操作')

    del.open()

})

// 点击 登录按钮

document.querySelector('#login').addEventListener('click', () => {

    const log = new Modal('友情提示','您没有注册呢 ?')

    log.open()

})

const obj = {

    uname: 'pink',

    age: 18,

    family: {

        baby: '小Pink',

        age: 3

    }

}

// 浅拷贝

const o = {...obj}

// 基本数据类型拷贝的是值，引用类型拷贝的是地址值 一个修改影响全部

console.log(o)// {uname: 'pink', age: 18}  family: {baby: ' 老 pink', age: 3}

o.age = 20

o.family.baby = '老pink'

console.log(o)// {uname: 'pink', age: 20} family: {baby: ' 老 pink', age: 3}

console.log(obj)// {uname: 'pink', age: 18} family: {baby: ' 老 pink', age: 3}

let i = 0

function fn() {

    i++

    console.log(`调用第${i}次`)

    if (i === 10)

        return

    fn()

}

fn()

function fn() {

    document.querySelector('div').innerHTML = new Date().toLocaleString()

    setTimeout(fn,1000)

}

fn()

const o = {}

function deepCopy(newObj , oldObj) {

   for(let k in oldObj) {

      if(oldObj[k] instanceof Array) {

         newObj[k] = []

         deepCopy(newObj[k] , oldObj[k])

      }else if(newObj[k] , oldObj[k]) {

         newObj[k] = {}

         deepCopy(newObj[k] , oldObj[k]

      }else {

     		newObj[k] = oldObj[k]             

     }

   }

}

const o = {}

function deepCopy(newObj , oldObj) {

   for(let k in oldObj) {

      newObj[k] = oldObj[k]

   }

}

deepCopy(o,obj)

const o = {}

function deepCopy(newObj , oldObj) {

   for(let k in oldObj) {

      if(oldObj[k] instanceof Array) {

         newObj[k] = []

         deepCopy(newObj[k] , oldObj[k])

      }else if(oldObj[k] instanceof Object) {

         newObj[k] = {}

         deepCopy(newObj[k] , oldObj[k])

      }else {

         newObj[k] = oldObj[k]

      }

   }

}

const o = {}

function deepCopy(newObj , oldObj) {

   for(let k in oldObj) {

      if(oldObj[k] instanceof Array) {

         newObj[k] = []

         deepCopy(newObj[k] , oldObj[k])

      }else if(oldObj[k] instanceof Object) {

         newObj[k] = {}

         deepCopy(newObj[k] , oldObj[k])

      }else {

         newObj[k] = oldObj[k]

      }

   }

}

const obj = {

    uname: 'pink',

    age: 18,

    famiyl: {

        uname: '老pink',

        age: 29

    },

    hobby: ['唱', '跳', 'wrap']

}

const o = {}

// 拷贝函数

function deepCopy(newObj, oldObj) {

    for (let k in oldObj) {

        // 处理数组的拷贝问题

        // 判断属性值是否为数组类型的

        // 万物皆对象，先筛选数组 再 对象 

        if (oldObj[k] instanceof Array) {

            // 新数组中传入属性名 默认赋值类型为数组

            newObj[k] = []

            // 递归调用自己传入 属性名 ， 属性值 传入函数中

            deepCopy(newObj[k], oldObj[k])

        } else if (oldObj[k] instanceof Object) { // 千万不要将对象的判断写在前面因为数组也是对象它会将数组当对象处理

            newObj[k] = {}

            deepCopy(newObj[k], oldObj[k])

        } else {

            //k : uname , age | oldOb[k] 'pink' , 18

            //newObj [k] 等价于 o.uname , o.age

            newObj[k] = oldObj[k]

        }

    }

}

// 调用函数 传入实参 两个对象  新对象  旧对象

// 功能： 将旧对象的属性名属性值 拷贝到 新对象中

deepCopy(o, obj)

// 基本数据类型修改后不会影响到另一个对象

o.age = 100

o.famiyl.uname = '老老老pink'

o.hobby[0] = '练习两年半'

console.log(o)

console.log(obj)

const obj = {

    uname: 'pink',

    age: 18,

    family: {

        uname: '老pink',

        age: 20

    },

    arr: ['唱','跳','wrap','篮球']

}

// 调用函数进行深拷贝

const o = _.cloneDeep(obj)

o.uname = '小pink'

o.family.uname = '老老老老pink'

o.arr[0] = '鸡哥'

console.log(o)

console.log(obj)

const obj = {

    uname: 'pink',

    age: 18,

    hobby: ['唱歌','跳舞','wrap'],

    family: {

        uname: '老pink'

    }

}

// 把对象转换为 JSON 字符串

const json = JSON.stringify(obj)

console.log(json)

// 再将转换为字符串的 JSON 数据解析为 对象 此时它们的 地址 和 引用的地址都不同了

const o = JSON.parse(json)

o.uname = '小pink'

o.hobby[0] = 'ikun'

o.family.uname = '老老老pink'

console.log(o)

console.log(obj)

function counter(x, y) {

    if (!x || !y)

        //throw ' 参数不能为空'

        throw new Error('参数不能为空')

    return x + y

}

counter()

<body>

    <p>123</p>

    <script src="../js/try/catch捕获异常.js"></script>

</body>

function fn() {

    try {

        // 可能发生错误的代码 放到 try 中 试试

        const p = document.querySelector('.p')

        p.style.color = 'red'

        // 捕获可能发生的异常

        //catch 参数列表中 随意写一个变量名称 它是由浏览器提供的错误信息

    } catch (err) {

        // 调用错误信息的属性 message

        console.log(err.message)

        // 抛出异常后会终止后面的代码

        throw new Error('选择器 获取不到指定的标签')

        // 上面抛出了异常程序终止下面的打印不会执行

        console.log('hello')

        //finally 无论是否发生异常 都会执行代码块

    } finally {

        console.log('world !')

    }

}

fn()

function fn() {

    try {

        // 可能发生错误的代码 放到 try 中 试试

        const p = document.querySelector('.p')

        p.style.color = 'red'

        // 捕获可能发生的异常

        //catch 参数列表中 随意写一个变量名称 它是由浏览器提供的错误信息

    } catch (err) {

        console.log(err.message)

        // 抛出异常后会终止后面的代码

        // 相当于打了个断点

        debugger

        // 调用错误信息的属性 message

        throw new Error('选择器 获取不到指定的标签')

        // 上面抛出了异常程序终止下面的打印不会执行

        console.log('hello')

        //finally 无论是否发生异常 都会执行代码块

    } finally {

        console.log('world !')

    }

}

fn()

// 普通函数

function sayHi() {

   console.log(this)// window 

}

// 函数表达式

const sayHello = function() {

   console.log(this)// window 

}

// 函数的调用方式决定了 this 的值

sayHi()// window

window.sayHi()// window

// 普通对象

const user = {

   uname: '小明',

   walk: function() {

      console.log(this)// user

   }

}

// 动态为 user 添加方法

user.sayHi = sayHi // user

user.sayHello = sayHello // user

// 函数调用方式，决定了 this 的值

user.sayHi()// user

user.sayHello()// user

<script>

	'use strict' // 开启严格模式 下面的函数中获取 this 就是 undefined 了

	function fn() {

      console.log(this) // undefined

   }

	fn()

</script>

const sayHi = () => {

    console.log(this)// window

} 

sayHi()// window.sayHi()

const user = {

    uname: 'pink',

    // 到了 user 的作用域中 而 user 是 window 调用的

    walk: () => {

        // 从上一层作用域开始找

        console.log(this)// window

    }

}

user.walk()

// 获取元素对象

const button = document.querySelector('button')

// 箭头函数此时 this 指向了 window

button.addEventListener('click',() => console.log(this))// window

// 普通函数 此时 this 指向了 DOM 对象 button

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

function Person() {}

// 原型对象上 添加了 箭头函数

Person.prototype.walk = () => {

    console.log(this)// window

}

const man = new Person()

man.walk()

const obj = {

    uname: 'ikun'

}

function fn(x, y) {

    // 逻辑中断 默认赋值

    x = x | 0

    y = y | 0

    console.log(this)// obj

    console.log(x + y)

}

// 1. 调用函数

// 1.2 可以传递实参

// 2. 改变 this 指向

fn.call(obj, 1, 2)

const obj = {

    age: 18

}

function fn(x, y) {

    console.log(this)// obj

    console.log(x + y)// 3

}

// 1. 调用函数

// 2. 改变 this 指向

// 3. 返回值，本身就是在调用函数，所以返回值就是函数返回值

fn.apply(obj, [1, 2])

const obj = {

    age: 18

}

function fn() {

    console.log(this)// window

}

// 1.bind 不会调用函数

// 2. 能改变 this 指向

// 3. 返回值是个函数，但是这个函数里面的 this 是更改过的

const fun = fn.bind(obj)

fun()// obj

// 需求，有一个按钮 点击里面就禁用，2 秒之后就开启

const button = document.querySelector('button')

button.addEventListener('click', function () {

    // 禁用元素

    this.disabled = true

    let that = this

    // 定时器里面也可以改为使用箭头函数 因为箭头函数 this 沿用上一层就是 button 对象的 this

    setTimeout(function () {

        //window.button.disabled = false 无效

        // 在这个函数里面，我们要由原来的 window 改为 button

        this.disabled = false

        // 打印查看 定时器内部函数的 this 跟 单击事件里面的 this 是否相同 单击事件的 this 是 buttn 按钮对象

        console.log(this === that)

        //bind (this) 里面的 this 就是单击事件函数中的 this 也就是 button 对象

    }.bind(this), 2000)

})

<style>

    .box {

      width: 500px;

      height: 500px;

      background-color: #ccc;

      color: #fff;

      text-align: center;

      font-size: 100px;

    }

  </style>

  <script src="./js/lodash.min.js"></script>

<body>

  <div class="box"></div>

  <script>

    // 利用防抖实现性能优化

    // 需求：鼠标在盒子上移动，里面的数字就会 + 1

    const box = document.querySelector('.box')

    let i = 1

    // 鼠标移动函数

    function mouseMove() {

      box.innerHTML = i++

      // 如果里面存在大量消耗性能的代码，比如 dom 操作，比如数据处理，可能造成卡顿

    }

    // 添加鼠标移动监听事件

    // box.addEventListener('mousemove', mouseMove)

    // 利用 lodash 库实现防抖 —500 毫秒之后才 + 1

    // 语法：_.debounce (fun, 时间)

    box.addEventListener('mousemove', _.debounce(mouseMove, 500))

  </script>

</body>

// 利用防抖实现性能优化

// 需求：鼠标在盒子上移动，里面的数字就会 + 1

const box = document.querySelector('.box')

let i = 1

// 鼠标移动函数

function mouseMove() {

   box.innerHTML = i++

   // 如果里面存在大量消耗性能的代码，比如 dom 操作，比如数据处理，可能造成卡顿

}

// 手写防抖函数

// 1.  声明一个定时器 变量。

// 2.  当鼠标每次滑动都先判断 是否有定时器了，如果有定时器先 清除以前的定时器

// 3.  如果没有定时器则 开启 定时器 ，记得存到变量里面

// 4.  在定时器里面调用要执行的函数

function debounce(fn, t) {

   let timer

   //return 返回一个匿名函数

   return function () {

      // 判断是否有定时器了 有则函数 

      if (timer) clearTimeout(timer)

      timer = setTimeout(function () {

         fn()// 调用传入的函数

      }, t)

   }

}

//debounce (mouseMOve, 500) 相当于 function () {定时器} 当鼠标再次移动就调用了返回的函数

box.addEventListener('mousemove', debounce(mouseMove, 500))

<style>

    .box {

      width: 500px;

      height: 500px;

      background-color: #ccc;

      color: #fff;

      text-align: center;

      font-size: 100px;

    }

  </style>

  <script src="./js/lodash.min.js"></script>

</head>

<body>

  <div class="box"></div>

  <script>

    // 利用防抖实现性能优化

    // 需求：鼠标在盒子上移动，里面的数字就会 + 1

    const box = document.querySelector('.box')

    let i = 1

    // 鼠标移动函数

    function mouseMove() {

      box.innerHTML = i++

      // 如果里面存在大量消耗性能的代码，比如 dom 操作，比如数据处理，可能造成卡顿

    }

    // 利用 lodash 库实现节流，500 毫秒之后才 + 1

    // 语法: _.throttle (fun, 时间)

    box.addEventListener('mousemove', _.throttle(mouseMove, 500))

  </script>

</body>

<body>

  <div class="box"></div>

  <script>

    // 利用防抖实现性能优化

    // 需求：鼠标在盒子上移动，里面的数字就会 + 1

    const box = document.querySelector('.box')

    let i = 1

    // 鼠标移动函数

    function mouseMove() {

      box.innerHTML = i++

      // 如果里面存在大量消耗性能的代码，比如 dom 操作，比如数据处理，可能造成卡顿

    }

    // 利用 lodash 库实现节流，500 毫秒之后才 + 1

    // 语法: _.throttle (fun, 时间)

    function throttle() {

      let timer = null

      if (!timer)

        timer = setTimeout(function () {

          fn()

          // 清空定时器 

          // 思考这里为什么不使用 clearTimeout 来清除定时器 而是赋值为 null 呢？

          timer = null

        }, t)

    }

    box.addEventListener('mousemove', throttle(mouseMove, 500))

  </script>

</body>

let timer = null

timer = setTimeout(function() {

    clearTimeout(timer)

    console.log(timer)// 1

},1000)

// 在 setTimeout 中是无法删除定时器的，

// 因为定时器还在运作，所以使用 timer = null 而不是 clearTimeout (timer)

<script>

    // 获取元素 要对视频进行操作

    const video = document.querySelector('video')

    // 当视频 / 音频 当前播放的位置发送改变时触发事件

    video.ontimeupdate = function() {

      console.log('123')

    }

  </script>

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <meta name="referrer" content="never" />

  <title>综合案例</title>

  <style>

    * {

      padding: 0;