JavaScript 中创建对象的方式( 9种 )

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

在这里插入图片描述

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

在这里插入图片描述

文章目录


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

  1. 工厂模式

    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);
    
  2. 构造函数模式

    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);
    
  3. 对象字面量(或称“对象直接量”):

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

    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();
    
  5. 混合构造函数和原型模式(组合构造函数模式和原型模式的优点):

    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);
    
  6. 动态原型模式

    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);
    
  7. 寄生构造函数模式

    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);
    
  8. 稳妥构造函数模式(主要用于特殊情况,对象没有公共属性,只提供方法):

    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);
    
  9. 使用类来创建对象
    随着ES6引入类(Class)语法,还可以使用类来创建对象,虽然在底层仍然是基于原型机制工作的:

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);
  • 58
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 31
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 31
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值