Подробное объяснение шести способов определения классов JS

В фронте развития часто необходимо определить классы JS. Итак, в JavaScript есть несколько способов определения классов и каковы различия? В этой статье объясняются следующие шесть способов определения классов JS (описание случая):

1. Заводской метод

 function car () {var ocar = new object; ocar.color = "blue"; ocar.doors = 4; ocar.showcolor = function () {document.write (this.color)}; return ocar;} var car1 = car (); var car2 = car ();

Когда эта функция вызвана, создается новый объект, и все свойства и методы назначаются. Используйте эту функцию, чтобы создать 2 объекта с точно такими же свойствами.

Конечно, вы можете изменить этот метод, передавая ему параметры.

 Функциональный автомобиль (цвет, дверь) {var ocar = new Object; ocar.color = color; ocar.doors = дверь; ocar.showcolor = function () {document.write (this.color)}; вернуть ocar;} var car1 = car ("red", 4); var car2 = car (blue ", 4); car1.showcolor (); var car2 = car (blue", 4); car1.showcolor (); var car2 = car (blue ", 4); car1.showcolor (); вар. // Вывод: "красный" car2.showcolor () // output: "blue"

Теперь вы можете получить объекты с разными значениями, передавая различные параметры в функцию.

В предыдущем примере каждый раз, когда вызывается функциональный CAR (), создается showColor (), что означает, что каждый объект имеет свой собственный метод ShowColor ().

Но на самом деле каждый объект имеет одну и ту же функцию. Хотя метод может быть определен вне функции, затем указав свойства функции на метод.

 Функция showcolor () {alert (this.color);} function car () {var ocar = new obj

Но это не похоже на метод функции.

2. Метод конструктора

Метод конструктора так же прост, как и метод завода, как показано ниже:

 Функциональный автомобиль (цвет, дверь) {this.color = color; this.doors = door; this.showcolor = function () {alert (this.color)};} var car1 = new Car ("red", 4); var car2 = new Car ("Blue", 4);

Вы можете видеть, что метод конструктора не создает объекты внутри функции, и ключевое слово, которое используется. Поскольку объект был создан при вызове конструктора, и его можно использовать только для доступа к свойствам объекта в функции.

Теперь используйте новые для создания объектов, это выглядит так! Но это то же самое, что и на заводе. Каждый вызов создает свой собственный метод для объекта.

3. Прототип метод

Этот метод использует преимущества атрибута прототипа объекта. Сначала создайте имя класса с пустой функцией, а затем все атрибуты и методы присваиваются атрибуту прототипа.

 function car () {} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.showcolor = function () {alert (this.color);} var car1 = new car (); var car2 = new car ();

В этом коде сначала определяется пустая функция, а затем свойства объекта определяются через атрибут прототипа. Когда эта функция будет вызвана, все свойства прототипа будут назначены объекту, который будет создан немедленно. Все объекты в этой функции хранят указатели на ShowColor (), который, по -видимому, принадлежит одному и тому же объекту.

Тем не менее, эта функция не имеет параметров, и атрибут не может быть инициализирован путем передачи параметров. Значение по умолчанию атрибута должно быть изменено после создания объекта.

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

 Function car () {} car.prototype.color = "red"; car.prototype.doors = 4; car.prototype.arr = new Array ("a", "b"); car.prototype.showcolor = function () {alert (this.color);} var car1 = var (); CAR (); CAR1.ARR.PUSH ("CC"); Alert (CAR1.ARR); //Output:AA,BB,CCLERT(CAR2.ARR); // Вывод: AA, BB, CC

Здесь, из -за эталонного значения массива, оба автомобильных объекта указывают на один и тот же массив, поэтому, когда значение добавлено в CAR1, вы также можете увидеть его в CAR2.

Союз - это метод, который может создавать объекты, такие как другие языки программирования, используя конструктор/прототип. Это метод, который использует конструкторы для определения нефункциональных свойств объектов и использует прототипы для определения объектов.

 Функциональный автомобиль (цвет, дверь) {this.color = color; this.doors = дверь; this.arr = new Array ("aa", "bb");} car.prototype.showcolor () {alert (this.color);} var car1 = new Car ("red", 4); Автомобиль ("Blue", 4); CAR1.Arr.push ("cc"); Alert (car1.arr); //Output:AA,BB, CCALERT(CAR2.ARR); // Вывод: AA, BB

5. Динамический метод прототипа

Динамический метод прототипа аналогичен методу смешанного конструктора/прототипа. Единственная разница - это положение, приведенное методу объекта.

 Функциональный автомобиль (цвет, дверь) {this.color = color; this.doors = дверь; this.arr = new Array ("aa", "bb"); if (typeof car._initialization == "Undefined") {car.prototype.showcolor = function () {alert (this.color);}; car

Динамический метод прототипа состоит в том, чтобы использовать флаг, чтобы определить, был ли прототип назначен метод. Это гарантирует, что метод создается только один раз

6. Смешанный фабричный метод

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

 Function car () {var Ocar = new object (); ocar.color = "red"; ocar.doors = 4; ocar.showcolor = function () {alert (this.color)}; return ocar;}

В отличие от заводского метода, этот метод использует новый оператор.

Вышеуказанное - все методы создания объектов. Наиболее широко используемым методом является метод гибридного конструктора/прототипа, а метод динамического прототипа также очень популярен. Функционально эквивалентный методу конструктора/прототипа.

Приведенное выше подробное объяснение шести способов определения классов JS - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.