Как написать новый метод в JS

JavaScript

содержание

  • что сделал новый
  • написать новый метод

что сделал новый

Давайте сначала напишем очень простой код, определим класс Person и используем new для создания экземпляра Person.

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;
}

Person.prototype.getFullName = function () {
  return `${this.firtName} ${this.lastName}`;
};

const tb = new Person('Chen', 'Tianbao');
console.log(tb);

Просмотрите экземпляр tb в консоли.

在控制台打印的实例对象

Из примера мы можем видеть следующие вещи:

  • Двум свойствам, firtName и lastName, присваиваются значения.
  • Прототип имеет метод getFullName и конструктор.

После анализа экземпляра легко узнать, что именно делает new.

  • создать новый объект
  • Добавьте свойства родительского класса в новый объект и инициализируйте его.
  • Наследовать методы прототипа родительского класса.
  • Возвращает новый объект. Но то? Выше описание целиком правильно?

Я немного изменю наш демо-код, добавлю возврат в конструктор.

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;

  return {
    fullName: `${this.firtName} ${this.lastName}`
  };
}

консоль и посмотреть, что отличается.

新执行后打印的效果

Мы обнаружили, что это фактический экземпляр после выполнения, а то, что возвращается, является обычным объектным объектом, который является результатом выполнения return.

Давайте рассмотрим дальше, что, если вместо объекта будут возвращены Nubmer и String?

function Person(firtName, lastName) {
  this.firtName = firtName;
  this.lastName = lastName;

  return 'demo';
}

Из консоли вы можете видеть, что это то же самое, что и не писать return.Все возвращаемые экземпляры — это вновь созданные экземпляры Person.

在控制台打印的实例对象

После приведенного выше анализа мы можем легко резюмировать, что именно делает new.

  • создать новый объект
  • Наследовать методы прототипа родительского класса.
  • Добавьте в новый объект свойства родительского класса и инициализируйте его, сохраните результат выполнения метода.
  • Если результат выполнения имеет возвращаемое значение и является объектом, вернуть результат выполнения, в противном случае вернуть только что созданный объект.

Зная процесс выполнения, как написать новый метод вручную, это становится очень легко.

код показывает, как показано ниже:

function _new(obj, ...rest){
  // 基于obj的原型创建一个新的对象
  const newObj = Object.create(obj.prototype);

  // 添加属性到新创建的newObj上, 并获取obj函数执行的结果.
  const result = obj.apply(newObj, rest);

  // 如果执行结果有返回值并且是一个对象, 返回执行的结果, 否则, 返回新创建的对象
  return typeof result === 'object' ? result : newObj;
}

есть тест.

const tb = new Person('Chen', 'Tianbao');
console.log(tb);

const tb2 = _new(Person, 'Chen', 'Tianbao');
console.log(tb2)

Мы обнаружили, что возвращаемые значения tb и tb2 абсолютно одинаковы.

两者的执行结果

демо-код

demo

На данный момент поздравляю всех.

Категории