23. 面向对象基础「原型重定向的处理」

1. 原型练习题

function fun() {
    this.a = 0
    this.b = function() {
        alert(this.a)
    }
}

// 原型重定向
fun.prototype = {
    b: function() {
        this.a = 20
        alert(this.a)
    },
    c: function() {
        this.a = 30
        alert(this.a)
    }
}
var my_fun = new fun()
my_fun.b()
my_fun.c()
复制代码

• 原型重定向

  • 「优势」：

    • 1.把原型上为其实例提供的公共属性和方法，全部写在一起了，提高整体性后者模块化

    • 2.向其原型扩展方法会更容易一些

  • 「弊端」：

    • 1.重定向后的原型对象中，缺失了 constructor 属性，解决：

    xxx.prototype = {
        // 手动设置一个，保证结构完整性
        constructor: xxx
    }
    复制代码

    • 2.如果原始内置的原型对象中具备了一些属性和方法，此时重定向之后，之前设置的公共属性方法就丢失了，解决：

    xxx.prototype = Object.assign(xxx.prototype,{
        // 公共属性和方法
    })
    复制代码

补充知识点1

• Object.assign：合并两个对象「浅比较」

  • 让 obj2 中的内容替换 obj1 中的：两者都有的以 obj2 为主，只有其中一个都是相当于新增…

  • 注意：Object.assign 不是返回新的对象，而是返回 obj1 对象的堆内存地址「相当于改变的是 obj1 对象中的内容」

  let obj1 = {
      x: 100,
      y: 200
  }
  
  let obj2 = {
      y: 300,
      z: 400
  }
  let obj = Object.assign(obj1, obj2)
  console.log(obj === obj1) // true 下面是解决方法
  console.log(Object.assign({}, obj1, obj2))
  复制代码

• 为什么说 Object.assign 是浅比较呢?

  • obj2.n 直接覆盖掉 obj1.n

  let obj1 = {
      x: 100,
      y: 200,
      n: {
          0: 1,
          1: 2
      }
  }
  let obj2 = {
      y: 300,
      z: 400,
      n: {
          name: 'zhufeng'
      }
  }
  复制代码

补充知识点2

• 两种写法的区别

  • fn1() {}函数是没有 prototype 属性的 「不能作为构造函数」

  • fn2: function() {}和正常的函数没有区别

let obj = {
    fn1() {},
    fn2: function() {}
}
复制代码