JavaScript 中创建对象的方式（ 9种）-Toy模板网

这篇具有很好参考价值的文章主要介绍了JavaScript 中创建对象的方式（ 9种）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

JavaScript 中创建对象的方式（ 9种）,# Javascript理论与实践,javascript,创建对象方式,大剑师

No.	内容链接
1	Openlayers 【入门教程】 - 【源代码+示例300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	Cesium 【入门教程】 - 【源代码+图文示例200+】
4	MapboxGL【入门教程】 - 【源代码+图文示例150+】
5	前端就业宝典【面试题+详细答案 1000+】

JavaScript 中创建对象的方式（ 9种）,# Javascript理论与实践,javascript,创建对象方式,大剑师

JavaScript 中创建对象的方式多种多样，以下是几种常见的创建对象的方法：

工厂模式：

function createPerson(name, age) {
  var obj = {};
  obj.name = name;
  obj.age = age;
  obj.sayHello = function() {
    console.log("Hello, I'm " + this.name);
  };
  return obj;
}
var person = createPerson("John", 30);

构造函数模式：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello, I'm " + this.name);
  };
}
var person = new Person("John", 30);

对象字面量（或称“对象直接量”）：

var person = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log("Hello, I'm " + this.name);
  }
};

原型模式：

function Person() {}
Person.prototype.name = "John";
Person.prototype.age = 30;
Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};
var person = new Person();

混合构造函数和原型模式（组合构造函数模式和原型模式的优点）：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log("Hello, I'm " + this.name);
};
var person = new Person("John", 30);

动态原型模式：

function Person(name, age) {
  this.name = name;
  this.age = age;
  
  if (typeof this.sayHello !== 'function') { // 只有当sayHello未定义时才添加
    Person.prototype.sayHello = function() {
      console.log("Hello, I'm " + this.name);
    };
  }
}
var person = new Person("John", 30);

寄生构造函数模式：

function createPerson(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.sayHello = function() {
    console.log("Hello, I'm " + this.name);
  };
  return obj;
}
var person = createPerson("John", 30);

稳妥构造函数模式（主要用于特殊情况，对象没有公共属性，只提供方法）：

function Person(name, age) {
  var that = new Object();
  var privateName = name;
  var privateAge = age;

  that.getDetails = function() {
    return privateName + ", " + privateAge;
  };

  return that;
}
var person = Person("John", 30);

使用类来创建对象
随着ES6引入类（Class）语法，还可以使用类来创建对象，虽然在底层仍然是基于原型机制工作的：文章来源地址https://www.toymoban.com/news/detail-846403.html

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log("Hello, I'm " + this.name);
  }
}
var person = new Person("John", 30);