深入理解JavaScript创建对象的多种方式以及优缺点

写在前面

这篇文章讲解创建对象的各种方式，以及优缺点。

但是注意：

这篇文章更像是笔记，因为《JavaScript高级程序设计》写得真是太好了！

1. 工厂模式

function createPerson(name) {
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };

  return o;
}

var person1 = createPerson('kevin');

缺点：对象无法识别，因为所有的实例都指向一个原型

2. 构造函数模式

function Person(name) {
  this.name = name;
  this.getName = function () {
    console.log(this.name);
  };
}

var person1 = new Person('kevin');

优点：实例可以识别为一个特定的类型

缺点：每次创建实例时，每个方法都要被创建一次

2.1 构造函数模式优化

function Person(name) {
  this.name = name;
  this.getName = getName;
}

function getName() {
  console.log(this.name);
}

var person1 = new Person('kevin');

优点：解决了每个方法都要被重新创建的问题

缺点：这叫啥封装……

3. 原型模式

function Person(name) {

}

Person.prototype.name = 'keivn';
Person.prototype.getName = function () {
  console.log(this.name);
};

var person1 = new Person();

优点：方法不会重新创建

缺点：1. 所有的属性和方法都共享 2. 不能初始化参数

3.1 原型模式优化

function Person(name) {

}

Person.prototype = {
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

优点：封装性好了一点

缺点：重写了原型，丢失了constructor属性

3.2 原型模式优化

function Person(name) {

}

Person.prototype = {
  constructor: Person,
  name: 'kevin',
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

优点：实例可以通过constructor属性找到所属构造函数

缺点：原型模式该有的缺点还是有

4. 组合模式

构造函数模式与原型模式双剑合璧。

function Person(name) {
  this.name = name;
}

Person.prototype = {
  constructor: Person,
  getName: function () {
    console.log(this.name);
  }
};

var person1 = new Person();

优点：该共享的共享，该私有的私有，使用最广泛的方式

缺点：有的人就是希望全部都写在一起，即更好的封装性

4.1 动态原型模式

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype.getName = function () {
      console.log(this.name);
    }
  }
}

var person1 = new Person();

注意：使用动态原型模式时，不能用对象字面量重写原型

解释下为什么：

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
// 报错 并没有该方法
person1.getName();
 
// 注释掉上面的代码，这句是可以执行的。
person2.getName();

为了解释这个问题，假设开始执行var person1 = new Person('kevin')。

如果对 new 和 apply 的底层执行过程不是很熟悉，可以阅读底部相关链接中的文章。

我们回顾下 new 的实现步骤：

1. 首先新建一个对象
2. 然后将对象的原型指向 Person.prototype
3. 然后 Person.apply(obj)
4. 返回这个对象

注意这个时候，回顾下 apply 的实现步骤，会执行 obj.Person 方法，这个时候就会执行 if 语句里的内容，注意构造函数的 prototype 属性指向了实例的原型，使用字面量方式直接覆盖 Person.prototype，并不会更改实例的原型的值，person1 依然是指向了以前的原型，而不是 Person.prototype。而之前的原型是没有 getName 方法的，所以就报错了！

如果你就是想用字面量方式写代码，可以尝试下这种：

function Person(name) {
  this.name = name;
  if (typeof this.getName != "function") {
    Person.prototype = {
      constructor: Person,
      getName: function () {
        console.log(this.name);
      }
    }
 
    return new Person(name);
  }
}
 
var person1 = new Person('kevin');
var person2 = new Person('daisy');
 
person1.getName(); // kevin
person2.getName(); // daisy

5.1 寄生构造函数模式

function Person(name) {
 
  var o = new Object();
  o.name = name;
  o.getName = function () {
    console.log(this.name);
  };
 
  return o;
 
}
 
var person1 = new Person('kevin');
console.log(person1 instanceof Person) // false
console.log(person1 instanceof Object) // true

寄生构造函数模式，我个人认为应该这样读：

寄生-构造函数-模式，也就是说寄生在构造函数的一种方法。

也就是说打着构造函数的幌子挂羊头卖狗肉，你看创建的实例使用 instanceof 都无法指向构造函数！

这样方法可以在特殊情况下使用。比如我们想创建一个具有额外方法的特殊数组，但是又不想直接修改Array构造函数，我们可以这样写：

function SpecialArray() {
  var values = new Array();
 
  for (var i = 0, len = arguments.length; i len; i++) {
    values.push(arguments[i]);
  }
 
  values.toPipedString = function () {
    return this.join("|");
  };
  return values;
}
 
var colors = new SpecialArray('red', 'blue', 'green');
var colors2 = SpecialArray('red2', 'blue2', 'green2');
 
 
console.log(colors);
console.log(colors.toPipedString()); // red|blue|green
 
console.log(colors2);
console.log(colors2.toPipedString()); // red2|blue2|green2

你会发现，其实所谓的寄生构造函数模式就是比工厂模式在创建对象的时候，多使用了一个new，实际上两者的结果是一样的。

但是作者可能是希望能像使用普通 Array 一样使用 SpecialArray，虽然把 SpecialArray 当成函数也一样能用，但是这并不是作者的本意，也变得不优雅。

在可以使用其他模式的情况下，不要使用这种模式。

但是值得一提的是，上面例子中的循环：

for (var i = 0, len = arguments.length; i len; i++) {
  values.push(arguments[i]);
}

可以替换成：

values.push.apply(values, arguments);

5.2 稳妥构造函数模式

function person(name){
  var o = new Object();
  o.sayName = function(){
    console.log(name);
  };
  return o;
}

var person1 = person('kevin');

person1.sayName(); // kevin

person1.name = "daisy";

person1.sayName(); // kevin

console.log(person1.name); // daisy

所谓稳妥对象，指的是没有公共属性，而且其方法也不引用 this 的对象。

与寄生构造函数模式有两点不同：

1. 新创建的实例方法不引用 this
2. 不使用 new 操作符调用构造函数

稳妥对象最适合在一些安全的环境中。

稳妥构造函数模式也跟工厂模式一样，无法识别对象所属类型。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# javascript创建对象  # js创建对象的方式  # js创建对象的方法  # 详解js创建对象的几种方式和对象方法  # JS 创建对象的模式实例小结  # javascript面向对象创建对象的方式小结  # JS使用new操作符创建对象的方法分析  # 详解js创建对象的几种方法及继承  # 详解js 创建对象的几种方法  # javascript动态创建对象的属性详解  # js构造函数创建对象是否加new问题  # JavaScript创建对象的七种方式(推荐)  # JavaScript中创建对象的7种模式详解  # js 创建对象的多种方式与优缺点小结  # 都要  # 这个时候  # 这篇文章  # 的是  # 也就是说  # 情况下  # 无法识别  # 就会  # 如果你  # 也不  # 挂羊头卖狗肉  # 好了  # 是有  # 你看  # 这个问题  # 我们可以  # 错了  # 可以通过  # 写了  # 重写 

相关文章： 独立制作一个网站多少钱,建立网站需要花多少钱？  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  建站之星云端配置指南：模板选择与SEO优化一键生成  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  高端建站三要素：定制模板、企业官网与响应式设计优化  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  如何选择适合PHP云建站的开源框架？  宝塔建站无法访问？如何排查配置与端口问题？  如何高效配置香港服务器实现快速建站？  行程制作网站有哪些,第三方机票电子行程单怎么开？  如何配置IIS站点权限与局域网访问？  如何快速辨别茅台真假？关键步骤解析  建站VPS选购需注意哪些关键参数？  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  如何选择服务器才能高效搭建专属网站？  设计网站制作公司有哪些,制作网页教程？  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  如何选择最佳自助建站系统？快速指南解析优劣  在线制作视频网站免费,都有哪些好的动漫网站？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  深入理解Android中的xmlns:tools属性  建站中国必看指南：CMS建站系统+手机网站搭建核心技巧解析  江苏网站制作公司有哪些,江苏书法考级官方网站？  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  中山网站推广排名,中山信息港登录入口？  如何零成本快速生成个人自助网站？  如何在腾讯云服务器快速搭建个人网站？  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  简历在线制作网站免费版,如何创建个人简历？  浅谈Javascript中的Label语句  定制建站如何定义？其核心优势是什么？  武汉网站设计制作公司,武汉有哪些比较大的同城网站或论坛，就是里面都是武汉人的？  如何挑选优质建站一级代理提升网站排名？  微信小程序 五星评分(包括半颗星评分)实例代码  如何在局域网内绑定自建网站域名？  太平洋网站制作公司,网络用语太平洋是什么意思？  建站主机选哪家性价比最高？  如何快速搭建FTP站点实现文件共享？  太原网站制作公司有哪些,网约车营运证查询官网？  网站制作需要会哪些技术,建立一个网站要花费多少？  如何通过远程VPS快速搭建个人网站？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  如何在新浪SAE免费搭建个人博客？  模具网站制作流程,如何找模具客户？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  如何选择PHP开源工具快速搭建网站？