首页 > 基础资料 博客日记

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

2024-04-22 23:00:08基础资料围观140

文章JavaScript 中创建对象的方式( 9种 )分享给大家,欢迎收藏Java资料网,专注分享技术知识

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;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);

文章来源:https://blog.csdn.net/cuclife/article/details/137273824
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!

标签:

相关文章

本站推荐

标签云