Как сделать многоуровневый метод для класса?

@Ishi · Регистрация: 24.10.2018

Студворк — интернет-сервис помощи студентам

Делал небольшой класс для юнита, захотел объединить функции Up, Down, Left, Right в метод Move, но возникла проблема. Как бы не добавлял в Move функции, при вызове

JavaScript
1
unit.Move.Up()

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
const winParams = {
    height: window.innerHeight,
    width: window.innerWidth
}
class Unit {
    constructor(object) {
        this.object = document.getElementById(object);
        this.objParams = {
            height: this.object.clientHeight,
            width: this.object.clientWidth,
            midPosX: 0,
            midPosY: 0,
            PosX: 0,
            PosY: 0
        }
    this.reCalcPos();
    }
    reCalcPos() {
        this.objParams.PosX = parseInt(window.getComputedStyle(this.object,null).getPropertyValue("left"));
        this.objParams.PosY = parseInt(window.getComputedStyle(this.object,null).getPropertyValue("bottom"));
        this.objParams.midPosX = this.objParams.PosX + this.objParams.width / 2;
        this.objParams.midPosY = this.objParams.PosY + this.objParams.height / 2;
    }
    Move = {
        Up() {
            if(this.objParams.PosY + this.objParams.height + 10 <= winParams.height)
                this.object.style.bottom = this.objParams.PosY + 10 + 'px'
            else
                this.object.style.bottom = winParams.height - this.objParams.height + "px";
            this.reCalcPos();
        }
    }
    Down() {
        if(this.objParams.PosY >= 10)
            this.object.style.bottom = this.objParams.PosY - 10 + 'px'
        else
            this.object.style.bottom = 0;
        this.reCalcPos();
    }
    Left() {
        if(this.objParams.PosX >= 10)
            this.object.style.left = this.objParams.PosX - 10 + 'px'
        else
            this.object.style.left = 0;
        this.reCalcPos();
    }
    Right() {
        if(this.objParams.PosX + this.objParams.width + 10 <= winParams.width)
            this.object.style.left = this.objParams.PosX + 10 + 'px'
        else
            this.object.style.left = winParams.width - this.objParams.width + "px";
        this.reCalcPos();
    }
}
let unit = new Unit('obj');

Он выдает ошибку: "this.objParams is undefined". Я неправильно сделал вложение или нужно как-то по-другому обращаться к this.objParams из-за вложенности?

Qwerty_Wasd · 09.10.2019, 17:53

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const winParams = {
  height: window.innerHeight,
  width: window.innerWidth
}
class Unit {
  constructor(object) {
    this.object = document.getElementById(object);
    this.objParams = {
      height: this.object.clientHeight,
      width: this.object.clientWidth,
      midPosX: 0,
      midPosY: 0,
      PosX: 0,
      PosY: 0
    };
    this.Move = {
      Up: function() {
        if(this.objParams.PosY + this.objParams.height + 10 <= winParams.height)
          this.object.style.bottom = this.objParams.PosY + 10 + 'px'
        else
          this.object.style.bottom = winParams.height - this.objParams.height + "px";
        this.reCalcPos();
      }
    };
    this.reCalcPos();
  }
  reCalcPos() {
    this.objParams.PosX = parseInt(window.getComputedStyle(this.object,null).getPropertyValue("left"));
    this.objParams.PosY = parseInt(window.getComputedStyle(this.object,null).getPropertyValue("bottom"));
    this.objParams.midPosX = this.objParams.PosX + this.objParams.width / 2;
    this.objParams.midPosY = this.objParams.PosY + this.objParams.height / 2;
  };
  Down() {
    if(this.objParams.PosY >= 10)
      this.object.style.bottom = this.objParams.PosY - 10 + 'px'
    else
      this.object.style.bottom = 0;
    this.reCalcPos();
  };
  Left() {
    if(this.objParams.PosX >= 10)
      this.object.style.left = this.objParams.PosX - 10 + 'px'
    else
      this.object.style.left = 0;
    this.reCalcPos();
  };
  Right() {
    if(this.objParams.PosX + this.objParams.width + 10 <= winParams.width)
      this.object.style.left = this.objParams.PosX + 10 + 'px'
    else
      this.object.style.left = winParams.width - this.objParams.width + "px";
    this.reCalcPos();
  };
};

или же

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const winParams = {
  height: window.innerHeight,
  width: window.innerWidth
}
class Unit {
  constructor(object) {
    this.object = document.getElementById(object);
    this.objParams = {
      height: this.object.clientHeight,
      width: this.object.clientWidth,
      midPosX: 0,
      midPosY: 0,
      PosX: 0,
      PosY: 0
    }
    this.reCalcPos();
  }
  reCalcPos() {
    this.objParams.PosX = parseInt(window.getComputedStyle(this.object,null).getPropertyValue("left"));
    this.objParams.PosY = parseInt(window.getComputedStyle(this.object,null).getPropertyValue("bottom"));
    this.objParams.midPosX = this.objParams.PosX + this.objParams.width / 2;
    this.objParams.midPosY = this.objParams.PosY + this.objParams.height / 2;
  }
  Move() {
    return {
      Up: function() {
      if(this.objParams.PosY + this.objParams.height + 10 <= winParams.height)
        this.object.style.bottom = this.objParams.PosY + 10 + 'px'
      else
        this.object.style.bottom = winParams.height - this.objParams.height + "px";
      this.reCalcPos();
    }
    }
  };
  Down() {
    if(this.objParams.PosY >= 10)
      this.object.style.bottom = this.objParams.PosY - 10 + 'px'
    else
      this.object.style.bottom = 0;
    this.reCalcPos();
  };
  Left() {
    if(this.objParams.PosX >= 10)
      this.object.style.left = this.objParams.PosX - 10 + 'px'
    else
      this.object.style.left = 0;
    this.reCalcPos();
  };
  Right() {
    if(this.objParams.PosX + this.objParams.width + 10 <= winParams.width)
      this.object.style.left = this.objParams.PosX + 10 + 'px'
    else
      this.object.style.left = winParams.width - this.objParams.width + "px";
    this.reCalcPos();
  };
};

Сообщение от Ishi

неправильно сделал вложение

неправильная запись объекта Move

@shvyrevvg · 09.10.2019, 18:33

Сообщение от Ishi

unit.Move.Up()

Ishi, в методе Up this указывает на Move.

Добавлено через 2 минуты
А смысл объединять? Разве moveUp() хуже move.up()?

@Ishi · 09.10.2019, 19:31 **[ТС]**

Сообщение от shvyrevvg

А смысл объединять? Разве moveUp() хуже move.up()?

В данной ситуации не лучше.

@amr-now · 09.10.2019, 21:22

Ishi, официально в JavaScript поля классам пока не завезли.
Появятся чуть попозже.
Но в пром пихать супер-пупер новинки? Это слишком жестоко.

Добавлено через 50 минут
-----------
Спасибо за напоминание про внутренние классы Java.
В JavaScript внутренних классов Java нет. Там есть аналоги из C#.
Для красоты внутренний класс C# лучше вытащить наружу.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #obj {
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="obj">Привет</div>
    <script>
        const winParams = {
            height: window.innerHeight,
            width: window.innerWidth
        }
        
        class Move {
            constructor(unit, object, objParams) {
                this.unit = unit;
                this.object = object;
                this.objParams = objParams;
            }
            up() {
                if (this.objParams.PosY + this.objParams.height + 10 <= winParams.height)
                    this.object.style.bottom = this.objParams.PosY + 10 + 'px'
                else
                    this.object.style.bottom = winParams.height - this.objParams.height + "px";
                this.unit.reCalcPos();
            }
            down() {
                if (this.objParams.PosY >= 10)
                    this.object.style.bottom = this.objParams.PosY - 10 + 'px'
                else
                    this.object.style.bottom = 0;
                this.unit.reCalcPos();
            }
            left() {
                if (this.objParams.PosX >= 10)
                    this.object.style.left = this.objParams.PosX - 10 + 'px'
                else
                    this.object.style.left = 0;
                this.unit.reCalcPos();
            }
            right() {
                if (this.objParams.PosX + this.objParams.width + 10 <= winParams.width)
                    this.object.style.left = this.objParams.PosX + 10 + 'px'
                else
                    this.object.style.left = winParams.width - this.objParams.width + "px";
                this.unit.reCalcPos();
            }
        }
 
        class Unit {
            constructor(object) {
                this.object = document.getElementById(object);
                this.objParams = {
                    height: this.object.clientHeight,
                    width: this.object.clientWidth,
                    midPosX: 0,
                    midPosY: 0,
                    PosX: 0,
                    PosY: 0
                }
                this.move = new Move(this, this.object, this.objParams);
                this.reCalcPos();
            }
            reCalcPos() {
                this.objParams.PosX = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("left"));
                this.objParams.PosY = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("bottom"));
                this.objParams.midPosX = this.objParams.PosX + this.objParams.width / 2;
                this.objParams.midPosY = this.objParams.PosY + this.objParams.height / 2;
            }
        }
 
        let unit = new Unit('obj');
        console.log(unit.objParams.PosY);
        unit.move.down();
        console.log(unit.objParams.PosY);
    </script>
</body>
</html>

@shvyrevvg · 10.10.2019, 03:20

*del

@amr-now · 10.10.2019, 08:41

All C# nested classes are like Java static nested classes:

C#
1
2
3
4
5
6
class Outer
{
    class Inner
    {
    }
}

Is like Java's:

Java
1
2
3
4
5
6
class Outer
{
    static class Inner
    {
    }
}

In other words, an instance of Inner doesn't have an implicit reference to an instance of Outer.
There isn't the equivalent of a Java inner class in C# though.

https://stackoverflow.com/ques... sted-class
----
На данный момент 10.10.2019 года:

Class field declarations for JavaScript
Stage 3

https://github.com/tc39/proposal-class-fields
Ещё не включённая в стандарт технология работает в Хроме:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #obj {
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="obj">Привет</div>
    <script>
        const winParams = {
            height: window.innerHeight,
            width: window.innerWidth
        }
 
        class Unit {
            constructor(object) {
                this.object = document.getElementById(object);
                this.objParams = {
                    height: this.object.clientHeight,
                    width: this.object.clientWidth,
                    midPosX: 0,
                    midPosY: 0,
                    PosX: 0,
                    PosY: 0
                }
                this.move = new Unit.Move(this, this.object, this.objParams);
                this.reCalcPos();
            }
            reCalcPos() {
                this.objParams.PosX = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("left"));
                this.objParams.PosY = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("bottom"));
                this.objParams.midPosX = this.objParams.PosX + this.objParams.width / 2;
                this.objParams.midPosY = this.objParams.PosY + this.objParams.height / 2;
            }
 
            static Move = class Move {
                constructor(unit, object, objParams) {
                    this.unit = unit;
                    this.object = object;
                    this.objParams = objParams;
                }
                up() {
                    if (this.objParams.PosY + this.objParams.height + 10 <= winParams.height)
                        this.object.style.bottom = this.objParams.PosY + 10 + 'px'
                    else
                        this.object.style.bottom = winParams.height - this.objParams.height + "px";
                    this.unit.reCalcPos();
                }
                down() {
                    if (this.objParams.PosY >= 10)
                        this.object.style.bottom = this.objParams.PosY - 10 + 'px'
                    else
                        this.object.style.bottom = 0;
                    this.unit.reCalcPos();
                }
                left() {
                    if (this.objParams.PosX >= 10)
                        this.object.style.left = this.objParams.PosX - 10 + 'px'
                    else
                        this.object.style.left = 0;
                    this.unit.reCalcPos();
                }
                right() {
                    if (this.objParams.PosX + this.objParams.width + 10 <= winParams.width)
                        this.object.style.left = this.objParams.PosX + 10 + 'px'
                    else
                        this.object.style.left = winParams.width - this.objParams.width + "px";
                    this.unit.reCalcPos();
                }
            }
        }
 
        let unit = new Unit('obj');
        console.log(unit.objParams.PosY);
        unit.move.up();
        console.log(unit.objParams.PosY);
    </script>
</body>
</html>

Соответственно, "полифилл" статического поля с типом "класс" для MS Edge:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #obj {
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="obj">Привет</div>
    <script>
        const winParams = {
            height: window.innerHeight,
            width: window.innerWidth
        }
 
        class Unit {
            constructor(object) {
                this.object = document.getElementById(object);
                this.objParams = {
                    height: this.object.clientHeight,
                    width: this.object.clientWidth,
                    midPosX: 0,
                    midPosY: 0,
                    PosX: 0,
                    PosY: 0
                }
                this.move = new Unit.Move(this, this.object, this.objParams);
                this.reCalcPos();
            }
            reCalcPos() {
                this.objParams.PosX = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("left"));
                this.objParams.PosY = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("bottom"));
                this.objParams.midPosX = this.objParams.PosX + this.objParams.width / 2;
                this.objParams.midPosY = this.objParams.PosY + this.objParams.height / 2;
            }
        }
 
        Object.defineProperty(Unit, "Move", {
            writable: false,
 
            value: class Move {
                constructor(unit, object, objParams) {
                    this.unit = unit;
                    this.object = object;
                    this.objParams = objParams;
                }
                up() {
                    if (this.objParams.PosY + this.objParams.height + 10 <= winParams.height)
                        this.object.style.bottom = this.objParams.PosY + 10 + 'px'
                    else
                        this.object.style.bottom = winParams.height - this.objParams.height + "px";
                    this.unit.reCalcPos();
                }
                down() {
                    if (this.objParams.PosY >= 10)
                        this.object.style.bottom = this.objParams.PosY - 10 + 'px'
                    else
                        this.object.style.bottom = 0;
                    this.unit.reCalcPos();
                }
                left() {
                    if (this.objParams.PosX >= 10)
                        this.object.style.left = this.objParams.PosX - 10 + 'px'
                    else
                        this.object.style.left = 0;
                    this.unit.reCalcPos();
                }
                right() {
                    if (this.objParams.PosX + this.objParams.width + 10 <= winParams.width)
                        this.object.style.left = this.objParams.PosX + 10 + 'px'
                    else
                        this.object.style.left = winParams.width - this.objParams.width + "px";
                    this.unit.reCalcPos();
                }
            }
        });
 
        let unit = new Unit('obj');
        console.log(unit.objParams.PosY);
        unit.move.up();
        console.log(unit.objParams.PosY);
    </script>
</body>
</html>

Добавлено через 18 минут
--------
Приватный вложенный класс, который поддерживается Хромом, но ещё не воспринимается в VS Code как синтаксически правильный:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #obj {
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="obj">Привет</div>
    <script>
        const winParams = {
            height: window.innerHeight,
            width: window.innerWidth
        }
 
        class Unit {
            constructor(object) {
                this.object = document.getElementById(object);
                this.objParams = {
                    height: this.object.clientHeight,
                    width: this.object.clientWidth,
                    midPosX: 0,
                    midPosY: 0,
                    PosX: 0,
                    PosY: 0
                }
                this.move = new Unit.#Move(this, this.object, this.objParams);
                this.reCalcPos();
            }
            reCalcPos() {
                this.objParams.PosX = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("left"));
                this.objParams.PosY = parseInt(window.getComputedStyle(this.object, null).getPropertyValue("bottom"));
                this.objParams.midPosX = this.objParams.PosX + this.objParams.width / 2;
                this.objParams.midPosY = this.objParams.PosY + this.objParams.height / 2;
            }
 
            static #Move = class Move {
                constructor(unit, object, objParams) {
                    this.unit = unit;
                    this.object = object;
                    this.objParams = objParams;
                }
                up() {
                    if (this.objParams.PosY + this.objParams.height + 10 <= winParams.height)
                        this.object.style.bottom = this.objParams.PosY + 10 + 'px'
                    else
                        this.object.style.bottom = winParams.height - this.objParams.height + "px";
                    this.unit.reCalcPos();
                }
                down() {
                    if (this.objParams.PosY >= 10)
                        this.object.style.bottom = this.objParams.PosY - 10 + 'px'
                    else
                        this.object.style.bottom = 0;
                    this.unit.reCalcPos();
                }
                left() {
                    if (this.objParams.PosX >= 10)
                        this.object.style.left = this.objParams.PosX - 10 + 'px'
                    else
                        this.object.style.left = 0;
                    this.unit.reCalcPos();
                }
                right() {
                    if (this.objParams.PosX + this.objParams.width + 10 <= winParams.width)
                        this.object.style.left = this.objParams.PosX + 10 + 'px'
                    else
                        this.object.style.left = winParams.width - this.objParams.width + "px";
                    this.unit.reCalcPos();
                }
            }
        }
 
        let unit = new Unit('obj');
        console.log(unit.objParams.PosY);
        unit.move.up();
        console.log(unit.objParams.PosY);
    </script>
</body>
</html>

@shvyrevvg · 10.10.2019, 09:09

amr-now, Какая-то жесть получается. 2 класса, которые имеют ссылки друг на друга, 3-й лезет во внутренности 2го и ради чего? То ли лыжи не едут...

@amr-now · 10.10.2019, 09:12

Сообщение от shvyrevvg

2 класса, которые имеют ссылки друг на друга, 3-й лезет во внутренности 2го

Тоже обычная практика в программировании.
Служебный класс-итератор, который выдаёт следующий элемент для foreach,
тоже лезет во внутренности нашей самописной коллекции и выдаёт из неё следующий элемент.

@shvyrevvg · 10.10.2019, 09:42

Сообщение от amr-now

Тоже обычная практика в программировании.
Служебный класс-итератор, который выдаёт следующий элемент для foreach,
тоже лезет во внутренности нашей самописной коллекции и выдаёт из неё следующий элемент.

amr-now, не вижу связи. Какую задачу решает вынос Мove в отдельный класс таким способом? Ладно, что-то меня от темы унесло куда-то

@amr-now · 10.10.2019, 09:51

Сообщение от shvyrevvg

Какую задачу решает вынос Мove в отдельный класс

Автор темы захотел, чтобы нечто с именем "Move" ползало по чужому объекту и знало 4 команды движения в разные стороны, соответствующим образом передвигая чужой объект.

Ну надо, так надо...

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	10.10.2019, 03:20
	*del 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	10.10.2019, 09:09
	amr-now, Какая-то жесть получается. 2 класса, которые имеют ссылки друг на друга, 3-й лезет во внутренности 2го и ради чего? То ли лыжи не едут... 0