JavaScript高级 对象增强补充

1. 对象判断方法补充

    var obj = {
      name: "why",
      age: 18
    }

    var info = Object.create(obj)
    info.address = "中国"
    info.intro = "中国大好河山"

    console.log(info.name, info.address)
    console.log(info)

1.hasOwnProperty

    console.log(info.hasOwnProperty("name")) // false
    console.log(info.hasOwnProperty("address")) // true

2.in

for in遍历不仅仅是自己对象上的内容, 也包括原型对象上的内容

    console.log("name" in info)
    console.log("address" in info)
    // 注意: for in遍历不仅仅是自己对象上的内容, 也包括原型对象上的内容
    for (var key in info) {
      console.log(key)
    }

3.instanceof

instanceof用于判断对象和类(构造函数)之间的关系 如果原型链上的 constructor 有，则返回 true

    // instanceof用于判断对象和类(构造函数)之间的关系
    function Person() {}
    function Student() {}
    inherit(Student, Person)

    // stu实例(instance)对象
    var stu = new Student()
    console.log(stu instanceof Student) // true
    console.log(stu instanceof Person) // true
    console.log(stu instanceof Object) // true
    console.log(stu instanceof Array) // false

4.isPrototypeOf

对象之间的判断

    console.log(Student.prototype.isPrototypeOf(stu))
    console.log(Person.prototype.isPrototypeOf(stu))
    
    // 可以用于判断对象之间的继承
    console.log(obj.isPrototypeOf(info))

2. 对象字面量的增强

    /*
      1.属性的增强
      2.方法的增强
      3.计算属性名的写法
    */

    var name = "why"
    var age = 18

    var key = "address" + " city"

    var obj = {
      // 1.属性的增强
      name,
      age,

      // 2.方法的增强
      running: function() {
        console.log(this)
      },
      swimming() {
        console.log(this)
      },
      eating: () => {
        console.log(this)
      },

      // 3.计算属性名
      [key]: "广州"
    }

    obj.running()
    obj.swimming()
    obj.eating()

    function foo() {
      var message = "Hello World"
      var info = "my name is why"

      return { message, info }
    }

    var result = foo()
    console.log(result.message, result.info)

3. 数组与对象的解构语法

    var names = ["abc", "cba", undefined, "nba", "mba"]


    // 1.数组的解构
    // var name1 = names[0]
    // var name2 = names[1]
    // var name3 = names[2]
    
    //1.1. 基本使用
    var [name1, name2, name3] = names
    console.log(name1, name2, name3)

    // 1.2. 顺序问题: 严格的顺序
    var [name1, , name3] = names
    console.log(name1, name3)

    // 1.3. 解构出数组
    var [name1, name2, ...newNames] = names
    console.log(name1, name2, newNames)

    // 1.4. 解构的默认值
    var [name1, name2, name3 = "default"] = names
    console.log(name1, name2, name3)


    // 2.对象的解构
    var obj = { name: "why", age: 18, height: 1.88 }
    // var name = obj.name
    // var age = obj.age
    // var height = obj.height
    
    // 2.1. 基本使用
    var { name, age, height } = obj
    console.log(name, age, height)

    // 2.2. 顺序问题: 对象的解构是没有顺序, 根据key解构
    var { height, name, age } = obj
    console.log(name, age, height)


    // 2.3. 对变量进行重命名
    var { height: wHeight, name: wName, age: wAge } = obj
    console.log(wName, wAge, wHeight)

    // 2.4. 默认值
    var { 
      height: wHeight, 
      name: wName, 
      age: wAge, 
      address: wAddress = "中国"
    } = obj
    console.log(wName, wAge, wHeight, wAddress)

    // 2.5. 对象的剩余内容
    var {
      name,
      age,
      ...newObj
    } = obj
    console.log(newObj)


    // 应用: 在函数中(其他类似的地方)
    function getPosition({ x, y }) {
      console.log(x, y)
    }

    getPosition({ x: 10, y: 20 })
    getPosition({ x: 25, y: 35 })

    function foo(num) {}

    foo(123)