Javascript 自定义类型方法小结

当我们在使用 JavaScript 进行开发时，如果想要封装一些属性和方法，通常会使用自定义类型。自定义类型可以理解为 JavaScript 中的类，通过 new 关键字创建实例对象，可以访问该类型中定义的属性和方法。

创建自定义类型的两种方式

1. 构造函数

创建自定义类型最常用的方式是通过构造函数（Constructor）实现。构造函数可以通过 new 关键字进行实例化。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function() {
  console.log(this.name);
}
var person1 = new Person("Tom", 18);
person1.sayName(); // Tom

上述代码中，通过构造函数 Person 创建了一个 Person 类型，该类型有两个属性 name 和 age，以及一个方法 sayName。调用 new Person() 方法可以创建一个 Person 类型的实例对象。该对象具有属性和方法，可以通过点号（.）语法访问。

2. 类语法

ES6 引入了类语法，也就是用 class 关键字定义类。类定义中使用 constructor 方法定义对象的属性，使用类方法定义对象的行为。例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayName() {
    console.log(this.name);
  }
}
let person1 = new Person("Tom", 18);
person1.sayName(); // Tom

上述代码中，使用关键字 class 定义了一个 Person 类型，使用 constructor 定义了对象的属性，使用 sayName 定义了对象的行为。在类定义完毕后使用 new 关键字创建实例对象。

在自定义类型中添加方法

在上面的示例中，已经演示了在构造函数中定义类的方法，下面我们介绍一下在类定义中定义方法的几种基本方式。

1. 使用 prototype 定义共享方法

prototype 属性是一个指针，指向一个对象，该对象包含了该构造函数的所有实例共享的方法。通过在原型上定义方法，可以在所有实例间共享。例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function() {
  console.log(this.name);
}
let person1 = new Person("Tom", 18);
let person2 = new Person("Jerry", 20);
person1.sayName(); // Tom
person2.sayName(); // Jerry

上述代码中，使用 prototype 定义了一个类的方法 sayName，调用构造函数创建实例对象后，该对象可以访问原型对象上的该方法。

2. 使用 ES6 的 class 语法定义方法

在 ES6 中，可以使用 class 语法定义方法，与构造函数相比，使用 class 语法可以更加简洁，代码可读性更好。例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayName() {
    console.log(this.name);
  }
}
let person1 = new Person("Tom", 18);
let person2 = new Person("Jerry", 20);
person1.sayName(); // Tom
person2.sayName(); // Jerry

上述代码中，使用 class 定义了一个 Person 类型，使用方法名定义了对象的行为。

示例1

在 Vue3.0 的开发中，我们使用 setup 函数创建组件时，需要将组件所需的数据和方法放在一个对象中暴露。这个对象中的数据和方法会被合并到组件实例对象上，供组件使用。例如：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello World';

    const showMessage = function() {
      console.log(message);
    };

    return {
      message,
      showMessage
    };
  },
};
</script>

上述代码中，通过 setup 函数返回的对象，将 message 和 showMessage 暴露出去，并在组件中使用。

示例2

我们可以通过 JavaScript 中的继承机制实现自定义类型的实现。例如：

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log(this.name);
}

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;
Dog.prototype.sayGreet = function() {
  console.log('Wang Wang');
}

let dog1 = new Dog("Tom");
dog1.sayName(); // Tom
dog1.sayGreet(); // Wang Wang

上述代码中，定义了一个 Animal 类型和一个 Dog 类型。在 Dog 类型的构造函数中，通过调用 Animal 的构造函数实现了属性的继承，使用 prototype 实现了方法的继承。通过使用 new 操作符可以生成一个 Dog 类型的实例对象。