给一个对象添加属性和方法的三种方案简单比较

最新推荐文章于 2025-07-28 18:07:25 发布

原创最新推荐文章于 2025-07-28 18:07:25 发布 · 1.6w 阅读

9 ·

CC 4.0 BY-SA版权

本文介绍了三种常用的给对象添加属性和方法的方式：直接在空对象上添加、通过构造函数原型添加及利用立即执行函数返回对象。每种方式都有其适用场景和优缺点。

下午刚好没什么事情，作为有追求的程序员当然要搞点事情了，于是便把给对象添加属性和方法的几种常用方法总结了一下，常用的有三种：

直接在空对象上面添加
构造函数原型上添加
立即执行函数中定义空对象添加属性和方法后返回

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>给一个对象添加属性和方法的三种方案简单比较</title>
</head>
<body>
  <button>button</button>
	<script type="text/javascript">
    // 第一种直接通过字面创建一个空对象，然后在空对象上面添加属性和方法
    // 之后通过对象名来调用定义的属性和方法
    var module1 = {};
    module1.property1 = 'property1';
    module1.method1 = function () {
        return 'method1';
    }
    console.log(module1.property1); // property1
    console.log(module1.method1()); // method1
    // 第二种定义一个构造函数，然后在构造函数的原型中添加属性和方法，
    // 之后通过构造函数的实例来调用原型中定义的属性和方法。
    var Module2 = function () {}
    Module2.prototype = {
      property2: 'property2',
      methods2: function () {
          return 'methods2';
      }
    }
    var module2 = new Module2();
    console.log(module2.property2); // property2
    console.log(module2.methods2()); // methods2
    // 第三种讲一个立即执行函数赋值给一个变量，之后再立即执行函数中定义一个空对象，在空对象上面
    // 添加一些属性和方法，最后返回这个空对象
    var module3 = (function () {
        var obj = {};
        var methods3 = 'methods3'; 
        obj.property3 = 'property3';
        obj.methods3 = function () {
            return methods3;
        }
        return obj;
    })();
    console.log(module3.property3); // property3
    console.log(module3.methods3()); // methods3
    
    // 方案一最简单，但是不利于扩展和添加新功能，方案二适用于需要大量实例，实例需要继承和扩展父类方案的情况，方案三 的
    // 优势在于，我们可以在立即执行函数中可以定义一些属性和方法，这些属性和方法被封装到了立即执行函数中，在外部是无法访问的
    // 减少了全局变量，更加有利于我们进行模块化编程
    
    // 注1：this 的指向：在一般函数中this指向全局对象，在构造函数中this指向构造函数的实例，在对象中this指向对象本身
    // 在构造对象的原型对象中this指向实例，在对象的方法调用中，this指向调用它的对象，也就是不论何种情况，this总是
    // 指向一个对象，要么是全局对象，要么是实例对象，要么是调用对象
    
    // 注2： 在构造函数内部定义的是私有属性和方法，实例无法调用，通过this定义的属性是公共属性，通过this定义的方法是特权方法，在构造函数
    // 实例可以调用，标识符上面定义的属性和方法是静态属性和方法，实例不能调用，在构造函数的原型对象中定义的属性和方法是共有属性和方法，
    // 实例可以调用
	</script>
</body>
</html>

在线浏览