JavaScript高级——创建对象（3）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42507756/article/details/87475950

创建对象

简单方式

我们可以直接通过 new Object() 创建：

var person = new Object()
person.name = 'Jack'
person.age = 18

person.sayName = function () {
  console.log(this.name)
}

每次创建通过 new Object() 比较麻烦，所以可以通过它的简写形式对象字面量来创建：

var person = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

对于上面的写法固然没有问题，但是假如我们要生成两个 person 实例对象呢？

var person1 = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

var person2 = {
  name: 'Mike',
  age: 16,
  sayName: function () {
    console.log(this.name)
  }
}

通过上面的代码我们不难看出，这样写的代码太过冗余，重复性太高。

简单方式的改进：工厂函数

我们可以写一个函数，解决代码重复问题：

function createPerson (name, age) {
  return {
    name: name,  //name 和 age等于传过来的参数
    age: age,
    sayName: function () {
      console.log(this.name)  //this指向当前创建的对象
    }
  }
}

然后生成实例对象：

var p1 = createPerson('Jack', 18)
var p2 = createPerson('Mike', 18)

这样封装确实爽多了，通过工厂模式我们解决了创建多个相似对象代码冗余的问题，

但却没有解决对象识别的问题（即怎样知道一个对象的类型）。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    // 1  new Object()
    // var hero = new Object();  // 空对象
    // hero.blood = 100;
    // hero.name = '刘备';
    // hero.weapon = '剑';

    // hero.attack = function () {
    //   console.log(this.weapon + ' 攻击敌人');
    // }

    // 2 对象字面量
    // var hero = {};   // 空对象
    // var hero1 = {
    //   blood: 100,
    //   name: '刘备',
    //   weapon: '剑',
    //   attack: function () {
    //     console.log(this.weapon + ' 攻击敌人');
    //   }
    // }

    // // hero.attack();
    // var hero2 = {
    //   blood: 100,
    //   name: '关羽',
    //   weapon: '刀',
    //   attack: function () {
    //     console.log(this.weapon + ' 攻击敌人');
    //   }
    // }
    // 
    // 3 工厂函数 创建多个对象
    function createHero(name, blood, weapon) {
      var o = new Object();
      o.name = name;
      o.blood = blood;
      o.weapon = weapon;
      o.attack = function () {
        console.log(this.weapon + ' 攻击敌人');
      }
      return o;
    }

    var hero = createHero('刘备', 100, '剑');
    var hero1 = createHero('关羽', 100, '刀');
    // console.log(typeof hero);
    console.log(hero instanceof createHero);


    var arr = [];
    console.log(arr instanceof Array);
  </script>
</body>

</html>

在这里插入图片描述