JS中定义对象的几种方式

JS中定义对象的几种方式

• 字面量及基于已有对象扩充其属性和方法
• 工厂模式
• 构造函数的方式
• 基于原型(prototype)的方式
• 动态原型的方式
• ES6的Class

一，字面量及基于已有对象扩充其属性和方法

let obj = {}
obj.name = 'Jett'
obj.sayHello = function () {
  console.log('Hello, ', this.name)
}

弊端: 可复用性不强(只适用于临时生成的一个对象），如果需要使用多个对象，还需要重新扩展其属性和方法

二，工厂模式

function createObject(username, password) {
  let object = new Object();

  object.username = username;
  object.password = password;

  object.get = function () {
    alert(this.username + ", " + this.password);
  }

  return object;
}

工厂模式的实质还是基于已有对象扩充其属性和方法，只不过把创造对象的方法封装了，当需要创建多个对象的时候不需要重复写代码。

不过上面的有个缺陷就是每次创建对象的时候，对象的对应的方法都会被创建一次，即方法不能被创建的所有对象共享。

优化：

let get = function () {
    alert(this.username + ", " + this.password);
}
function createObject(username, password) {
  let object = new Object();

  object.username = username;
  object.password = password;

  object.get = get

  return object;
}

扩展：JS实现单例模式

let Singleton = function( name ){
    this.name = name;
};

Singleton.prototype.getName = function(){
　　 alert(this.name);
};

Singleton.getInstance = (function(){ 
  let instance = null;
  return function (name) {
    if (!instance) {
      instance = new Singleton(name);
    }
    return instance;
  }
})();

三，构造函数方式

function Person (username, password) {
  //在执行第一行代码前，js引擎会为我们生成一个对象
  this.username = username;
  this.password = password;
  this.getInfo = function () {
    alert(this.username + ", " + this.password);
  } 
  //此处有一个隐藏的return语句，用于将之前生成的对象返回
  //只有在后面用new来调用构造函数的情况下，才会出现注释所述的这两点情况
}

该方法的弊端也是跟工厂模式类似，对于一些公有的方法需要重复声明

四，基于原型prototype

对象会从其原型上继承属性和方法，所以我们可以把公有的属性放在原型上，把私有的属性放在构造函数内部

原型+构造函数

//使用原型+构造函数方式来定义对象
function Person (username, password) {
  //在执行第一行代码前，js引擎会为我们生成一个对象
  this.username = username;
  this.password = password;
  //此处有一个隐藏的return语句，用于将之前生成的对象返回
  //只有在后面用new来调用构造函数的情况下，才会出现注释所述的这两点情况
}
// 在构造函数的原型属性上添加公有方法/属性
Person.prototype.getInfo = function() {
  alert(this.username + ", " + this.password);
}

五，动态原型的方式

在构造函数内部通过标志量让所有对象共享一个方法

//使用原型+构造函数方式来定义对象
function Person (username, password) {
  //在执行第一行代码前，js引擎会为我们生成一个对象
  this.username = username;
  this.password = password;
  //此处有一个隐藏的return语句，用于将之前生成的对象返回
  //只有在后面用new来调用构造函数的情况下，才会出现注释所述的这两点情况
  if (Person.flag === undefined) {
    // 在构造函数的原型属性上添加公有方法/属性
    Person.prototype.getInfo = function() {
      alert(this.username + ", " + this.password);
    }
    Person.flag = true
  }
}

没多大意义，跟四区别不大

六，ES6 的Class

在Class的构造函数中的属性为私有属性，Class内声明的方法为公有属性

class Person {
  constructor (username, password) {
    // 定义私有属性
    this.username = username;
    this.password = password;
  }
  // 公有方法
  getInfo = function() {
      alert(this.username + ", " + this.password);
  }
}