2022.1.17日学习

2. 继承

ES6 之前并没有给我们提供 extends 继承。我们可以通过 构造函数+原型对象模拟实现继承，被称为组合继承

2.1 call()

调用这个函数，并且修改函数运行时的 this 指向

  fun.call(this, arg1, arg2, ...)

• this： 当前调用函数 this 的指向对象
• arg1, arg2：传递的其他参数

2.2 借用父构造函数继承属性

function Father(name, age) {
  // this 指向父构造函数的对象实例
  this.name = name
  this.age = age
}

// 2. 子构造函数
function Son(name, age) {
  // this 指向子构造函数的对象实例
  Father.call(this, name, age)
  // console.log();
}
let son = new Son('刘德华', 18)
console.log(son)

3 闭包

3.1 什么是闭包

• 闭包（closure）指的是有权访问另一个函数作用域中变量的函数。 ------JavaScript 高级程序设计
• 简单理解就是，一个作用域可以访问另外一个函数内部的局部变量
• 闭包主要作用：延申了变量的作用范围

function fn() {
  var num = 10

  return function () {
    console.log(num) // 10
  }
}
let f = fn()

f()

3.2 闭包案例

• 使用闭包打印 i 值

let lis = document.querySelector('.nav').querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
  ;(function (i) {
    setTimeout(() => {
      console.log(lis[i].innerHTML)
    }, 3000)
  })(i)
}

3.3 深拷贝 & 浅拷贝

• 浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用
• 深拷贝拷贝多层，每一级别的数据都会拷贝

var o = {
  name: 'andy',
  id: 1,
  msg: {
    age: 18
  }
}
// 1. 使用 ES6 新增方法 Object.assign() 实现浅拷贝
var obj = {}
Object.assign(obj, o)
console.log(obj, o)
o.msg.age = 1

// 2. 使用 for in 实现浅拷贝
for (var item in o) {
  obj[item] = o[item]
}

• 深拷贝的实现

function deepCopy(newObj, oldObj) {
  for (var k in oldObj) {
    // 判断我们的属性值属于那种数据类型
    // 1. 获取属性值 oldObj[k]
    var item = oldObj[k]
    // 2. 判断这个值是否是数组
    if (item instanceof Array) {
      newObj[k] = []
      deepCopy(newObj[k], item)
      // 3. 判断这个值是否是对象
    } else if (item instanceof Object) {
      newObj[k] = {}
      deepCopy(newObj[k], item)
    } else {
      // 4. 属于简单数据类型
      newObj[k] = item
    }
  }
}