Сначала JavaScript — это казуальный язык программирования. Он родился в 1995 году и обеспечивает богатое взаимодействие с пользователем на веб-странице. Сегодня JavaScript превратился в язык программирования общего назначения и широко применяется в различных областях.

Побочным эффектом таких быстрорастущих и долгоживущих языков, как JavaScript, является для одной и той же цели всегда существует разный синтаксис. Например, мы можем выбрать var или let, чтобы объявить новую переменную в JavaScript.

Теперь я хотел бы рассказать еще одну длинную историю о том, как создать пользовательский объект в JavaScript. Как упоминалось выше, здесь у нас есть как минимум 4 способа выполнить эту задачу.

Цель

Нам нравится создавать пользовательский объект с 2 атрибутами с именем x. и y для хранения двух целых чисел и 1 метод с именем show для отображения информации об этом объекте.

Базовый и простой

Логика: сначала создайте простой объект и добавляйте в него пользовательские элементы один за другим.

let point=new Object();
point.x=3; // attribute x
point.y=4; // attribute y
point.show=function(){ // method show
  console.log(this.x, this.y);
};

Ниже показан еще один вариант:

let point=new Object();
point["x"]=3; // attribute x
point["y"]=4; // attribute y
point["show"]=function(){ // method show
  console.log(this["x"], this["y"]);
};

Литерал JSON

Логика: создать пользовательский объект напрямую, используя гораздо более короткий и понятный синтаксис.

let point={
  "x":3, // attribute x
  "y":4, // attribute y
  "show":function(){ // method show
    console.log(this.x, this.y);
  }
};

Конструктор (специальная функция)

Логика: сначала определите конструктор. Затем вызовите конструктор с ключевым словом "new", чтобы создать пользовательский объект.

// define a constructor
function Point(x, y){
  this.x=x; // attribute x
  this.y=y; // attribute y
  this.show=function(){ // method show
    console.log(this.x, this.y);
  };
}
// call constructor to create custom object
let point=new Point(3, 4);

Класс (введен в ES6)

Логика: во-первых, определите класс, включающий конструктор. А затем вызовите обернутый конструктор по имени класса, чтобы создать пользовательский объект.

// define a class
class Point{
  // define a constructor inside class
  constructor(x, y){
    this.x=x; // attribute x
    this.y=y; // attribute y
  }
  // method show
  show(){
    console.log(this.x, this.y);
  }
}
// call constructor by class name to create custom object
let point=new Point(3, 4);

Продолжайте идти вперед

Это не имеет смысла!

Разработчик JavaScript начального уровня всегда задается вопросом, почему в JavaScript так много разных синтаксисов для одной и той же цели? Но для старшего разработчика с пятнадцатилетним опытом это просто природа JavaScript, отражающая его постоянно растущее распространение.

Итак, постарайтесь принять это без колебаний.

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

Другие истории: