Класс с несколькими функциями в JavaScript

Question

Я пытаюсь сделать функцию, которая может либо показать окно подтверждения, либо форму диалога. Обе эти функции находятся в одном окне, поэтому я могу повторно использовать код для обоих.

Я предполагаю, что это должно быть что-то вроде

const MyWindow = function (options) { 
}; 

MyWindow.prompt = function (options) { 
    .. 
}; 

MyWindow.confirm = function (options) { 
    ... 
} 

MyWindow.alert = function (options) { 
    ... 
} 

Проблема заключается в том, что я не знаю, где нарисовать окно.

Я попытался создать новый метод

const MyWindow = function (options) { 
}; 

MyWindow.createElements = function (options) { 
    this.window = document.createElement('div'); 
    this.window.style.height = 300; 
    this.window.style.width = 300; 
    document.body.insertBefore(this.window, document.body.childNodes[0]); 
}; 

MyWindow.prompt = function (options) { 
    this.createElements(); 
    this.window.style.background-color = 'red'; 
}; 

но this.createElements() и this.window не доступны из функции prompt().

Как вы обычно развиваете нечто подобное? Должен ли я использовать классы ES6?

Answer 1

Вы должны использовать .prototype для расширения класса. Это должно помочь вам ...

См this link

var MyWindow = function (options) { 
 
} 
 

 
MyWindow.prototype.createElements = function (options) { 
 
    this.window = document.createElement('div'); 
 
    this.window.style.height = '300px'; 
 
    this.window.style.width = '300px'; 
 
    document.body.insertBefore(this.window, document.body.childNodes[0]); 
 
}; 
 

 
MyWindow.prototype.prompt = function (options) { 
 
    this.createElements(); 
 
    this.window.style.backgroundColor = 'red'; 
 
} 
 

 
var el = new MyWindow() 
 
el.prompt()

Answer 2

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

const MyWindow = function() { 
 
    const init =() => console.log("do init stuff"); 
 

 
    this.alert =() => { 
 
    init(); 
 
    console.log("alert!"); 
 
    }; 
 

 
    this.prompt =() => { 
 
    init(); 
 
    console.log("prompt"); 
 
    } 
 
} 
 

 
const myWindow = new MyWindow(); 
 

 
myWindow.alert(); 
 
myWindow.prompt();

Answer 3

, когда вы говорите, класс, который вы могли бы посмотреть на ES2015, который является новый Javascript. Позвольте мне дать вам пример:

class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log('Hello ' + this.name + ' wow you are ' + this.age + ' years old'); } }

Я хотел бы использовать ES2015 literals в приведенном выше примере в моем журнале консоли, но я не могу сделать это здесь, или я могу?

Чтобы использовать класс выше вы бы просто сделать:

const person = new Person('Jack', 21)

person.sayHello()

выход - Привет Джек вау вы 21 лет

Так что пример вам будет писать класс в ES2015 с помощью некоторых методов.Если вы хотите добавить методы в «класс» старшего, как вы бы просто сделать что-то вроде:

function Person(name, age) { this.name = name; this.age = age; }

Чтобы добавить метод (расширить) вашу функцию вам просто нужно использовать прототип как так:

Person.prototype.sayHello = function() { console.log('Hello ' + this.name + ' wow you are ' + this.age + ' years old'); }