【前端系列】一文看懂JavaScript中的自定义函数如何定义与使用

当涉及到JavaScript编程时，自定义对象是一种非常有用的概念。自定义对象允许开发人员创建具有自己属性和方法的独特数据类型。

在本文中，我们将探讨JavaScript中自定义对象的格式，包括如何定义和如何调用它们。

0.自定义对象的格式

在JavaScript中，自定义对象是通过对象字面量（Object Literal）或构造函数来定义的。

0-1.对象字面量

对象字面量是一种简洁的方式来定义和初始化一个对象。它使用花括号（{}）来表示对象，并在花括号内部使用键值对的形式定义对象的属性和方法。

以下是使用对象字面量定义自定义对象的示例：

const person = {
  name: "张三",
  age: 20,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

在上面的示例中，我们定义了一个名为person的自定义对象。它有两个属性：name和age，以及一个方法greet。greet方法用于打印一个问候语，其中包含对象的name属性。

在自定义对象中的函数定义时还存在一个简写形式：

const person = {
  name: "张三",
  age: 20,
  greet() {
    console.log("Hello, my name is " + this.name);
  }
};

0-2.构造函数

构造函数是用于创建自定义对象的特殊函数。它使用new关键字来实例化一个新对象，并且可以接受参数来初始化对象的属性。

以下是使用构造函数定义自定义对象的示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const person = new Person("张三", 20);

在上面的示例中，我们定义了一个名为Person的构造函数，它接受name和age作为参数，并将它们赋值给对象的属性。构造函数还定义了一个greet方法，用于打印问候语。通过使用new关键字和构造函数，我们可以创建一个名为person的新对象。

1.如何调用自定义对象

一旦我们定义了自定义对象，我们可以通过访问对象的属性和调用对象的方法来使用它。

以下是调用自定义对象的属性和方法的示例：

console.log(person.name); // 输出：张三
console.log(person.age); // 输出：20

person.greet(); // 输出：Hello, my name is 张三

在上面的示例中，我们使用点运算符来访问对象的属性。例如，person.name将返回对象的name属性的值。我们还可以使用点运算符来调用对象的方法，例如person.greet()将调用greet方法并打印问候语。

我们可以将上述代码放入script标签中进行测试：

访问页面，打开浏览器控制台（F12）

可以看到输出的信息。