На главную
ПРАВИЛА FAQ Помощь Участники Календарь Избранное DigiMania RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
Страницы: (2) 1 [2]  все  ( Перейти к последнему сообщению )  
> Объекты и прототипы, Гений объясняет
    да пока материал сыроват, но я стараюсь!
    все для дорогих читателей :writer:
    Зовите меня Гена! Просто Гений! :lool:
    ---------------------------------------
    Гений юзает Atom + Node :D
    "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
    "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
      скоро будет продолжение!
      пока времени нет писать :D
      Зовите меня Гена! Просто Гений! :lool:
      ---------------------------------------
      Гений юзает Atom + Node :D
      "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
      "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
        Цитата Cfon @
        скоро будет продолжение!

        Ох ты ж блин, нет, только не это!

        Скрытый текст
        :D :lol:
        Сообщение отредактировано: Serafim -
        user posted image
          че реально отстой? :'(
          ну и фиг с вами! :D
          Зовите меня Гена! Просто Гений! :lool:
          ---------------------------------------
          Гений юзает Atom + Node :D
          "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
          "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
            Цитата Cfon @
            че реально отстой?
            ну и фиг с вами!

            А как я тогда вбрасывать на вентилятор буду? :unsure: Только о себе и думаешь, игаизт!!1111 <_<
            Сообщение отредактировано: Serafim -
            user posted image
              Скрытый текст
              Цитата Cfon @
              че реально отстой? :'(
              ну и фиг с вами!

              Cfon, норм! Если хочешь, чтобы было супер - используй едионообразное оформление.
              Тогда тебе вообще цены не будет, а благодарных читателей наберешь :)
              Мои программные ништякиhttp://majestio.info
                Цитата JoeUser @
                Скрытый текст
                Цитата Cfon @
                че реально отстой? :'(
                ну и фиг с вами!

                Cfon, норм! Если хочешь, чтобы было супер - используй едионообразное оформление.
                Тогда тебе вообще цены не будет, а благодарных читателей наберешь :)

                Добре! :yes:
                будем думать :victory:

                А пока вот продолжение моего эпоса :D

                Из предыдущего раздела (см #9) стало ясно, что объектная система JavaScript не использует классы, как в других языках программирования (Java, C#, C++), для создания объектов. В JavaScript объекты создаются либо через литерал, например:
                ExpandedWrap disabled
                  var o = {
                    a: 100,
                    foo: function(){},
                    // и тд
                  };

                либо через оператор new и функцию-конструктор, например:
                ExpandedWrap disabled
                  function O() {
                    this.a = 100;
                    this.foo = function(){};
                    // тд.
                  }
                  var o = new O();

                второй способ более много словен, поэтому обычно его редко используют в JavaScript, но именно он позволяет нам создавать объекты в стиле классических языков программирования.
                Давайте рассмотрим его поближе. В приведенном примере объявляется функции (конструктор), в которой ссылке this присваиваются различные свойства. Как было указано выше this это ссылка на объект, который будет присвоен ссылке this во время выполнения кода. Что это значит? Это значит, что значение this может меняться в зависимости от контекста, в котором выполняется данная функция, т.е. в контекcте оператора new this будет иметь значение ссылки на созданный объект. Это надо всегда помнить! Если же например, вызвать функцию O без new, то результат будет печален! Так как в таком контексте this будет указывать на глобальный объект window, в случае броузера, или global в случае NodeJS, это приведет к модификации эти глобальных объектов! Есть одно но, если выполнять вызов функции O в строгом режиме ('use strict', он введен в ES5), то this будет иметь значение undefined, что приведет к ошибке при выполнении кода обращения к this:
                ExpandedWrap disabled
                  'use strict';
                  // вызов без new!
                  var o = O(); // TypeError: Cannot set property 'a' of undefined

                ОК, но в чем схожесть с классическими языками, кроме использования оператора new? Суть в том, что если нам надо создать множество объектов под копирку, то в случае литерала, придется либо дублировать код путем тупого ручного копирования кода :D (метод работает, но подвержен ошибкам), либо создавать так называемую функцию-фабрику, которая будет возвращать объекты при ее вызове, например:
                ExpandedWrap disabled
                  function createPerson() {
                    return {
                      name: 'Gregory',
                      age: 42,
                      toString: function() {
                        return '[' + this.name + ' is '+ this.age + ' years old.]';
                      }
                    };
                  }
                  var person1 = createPerson(),
                      person2 = createPerson();
                  person1.toString(); // '[Gregory is 42 years old.]'
                  person2.toString(); // '[Gregory is 42 years old.]'

                Что то не так? Да! Наша функция штампует не только одинаковые объекты, но и одинаковые данные! Как быть? Все просто :D, надо предусмотреть возможность передачи данных в функцию через ее параметры, например:
                ExpandedWrap disabled
                  function createPerson(name, age) {
                    return {
                      name: name,
                      age: age,
                      toString: function() {
                        return '[' + this.name + ' is '+ this.age + ' years old.]';
                      }
                    };
                  }
                  var person1 = createPerson('Gregory', 42),
                      person2 = createPerson('Miller', 30);
                  person1.toString(); // '[Gregory is 42 years old.]'
                  person2.toString(); // '[Miller is 30 years old.]'

                Все красиво все работает. Такой стиль кодирования использовался в ES3/ES5, но ES6 привнесла некоторые изменения синтаксиса, вот как тоже будет в ES6:
                ExpandedWrap disabled
                  function createPerson(name, age) {
                    return {
                      name,
                      age,
                      toString() {
                        return `[${this.name} is ${this.age} years old.]`;
                      }
                    };
                  }

                Короче не так ли? За объяснением отсылаю к книжке Николаса Закаса "ECMAScript 6 Руководство для разработчика" от 2017 года! Хотя на самом деле она написана им в 2016, а на дворе конец 2017, и есть уже стандарт ES8! :D
                Но я бы таки рекомендовал к чтению сей перл! :good:
                Вернемся к стилю классического кодирования. Наш пример будет выглядеть так:
                ExpandedWrap disabled
                  function Person(name, age) {
                    this.name = name;
                    this.age = age;
                    this.toString = function() {
                        return '[' + this.name + ' is '+ this.age + ' years old.]';
                    };
                  }
                  var person1 = new Person('Gregory', 42),
                      person2 = new Person('Miller', 30);
                  person1.toString(); // '[Gregory is 42 years old.]'
                  person2.toString(); // '[Miller is 30 years old.]'

                Т.е. сходства с классическим стилем на лицо и на лице! :D
                Стоит отметить, что и в том в другом стиле есть недостатки. Какие? Смотрите сами и тут и там идет дублирование кода за счет создания дубликатов функций toString! Я уже обсуждал эту тему раньше вместе с чуваком под ником K313 :D, где как мне кажется мы пришли соглашению, что дублируется только объявление функции, а само тело создается в единственном экземпляре. Хотя в книжках про это не уточняется! Везде просто указывается, что такой способ создания объектов приводит к дублированию кода и все! Но фиг с ним не суть :D
                Как же таки избежать такого дублирования кода? Просто надо вынести объявление методов за пределы функций-фабрик/конструкторов, а внутри конструктора или фабрики присваивать только ссылку на метод, например:
                ExpandedWrap disabled
                  function Person(name, age) {
                    this.name = name;
                    this.age = age;
                    this.toString = toString;
                  }
                  function toString() {
                     return '[' + this.name + ' is '+ this.age + ' years old.]';
                  };

                Это работает но требует дополнительного контроля за кодом если необходимо создавать много таких методов. Логично следующее решение создать объект в котором определять эти методы, напрмер:
                ExpandedWrap disabled
                  function Person(name, age) {
                    this.name = name;
                    this.age = age;
                    this.toString = personMethods.toString;
                  }
                  var personMethods = {
                    toString: function() {
                      return '[' + this.name + ' is '+ this.age + ' years old.]';
                    }
                  // другие методы
                  };

                Это работает, но в JavaScript уже есть нужный механизм и называется он да-да prototype! :D
                Он же [[Prototype]], он же __proto__, он же prototype :D. Первое это условное обозначение прототипа в спецификации JavaScript, второе это ссылка на прототип в объекте-экземпляре, ну а третье это ссылка на прототип в функции-конструкторе.

                Об этом уже в следующий раз! :thanks:
                To be continue...
                Сообщение отредактировано: Cfon -
                Зовите меня Гена! Просто Гений! :lool:
                ---------------------------------------
                Гений юзает Atom + Node :D
                "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
                "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
                  Цитата Cfon @
                  Все красиво все работает. Такой стиль кодирования использовался в ES3/ES5, но ES6 привнесла некоторые изменения синтаксиса, вот как тоже будет в ES6:

                  Неа, в ES6 будет:
                  ExpandedWrap disabled
                    class Person {
                        constructor(name, age) {
                            [this.name, this.age] = [name, age];
                        }
                     
                        toString() {
                            return `[${this.name} is ${this.age} years old.]`;
                        }
                    }
                     
                    function createPerson(name, age) {
                      return new Person(name, age);
                    }
                  user posted image
                    Цитата Serafim @
                    Цитата Cfon @
                    Все красиво все работает. Такой стиль кодирования использовался в ES3/ES5, но ES6 привнесла некоторые изменения синтаксиса, вот как тоже будет в ES6:

                    Неа, в ES6 будет:
                    ExpandedWrap disabled
                      class Person {
                          constructor(name, age) {
                              [this.name, this.age] = [name, age];
                          }
                       
                          toString() {
                              return `[${this.name} is ${this.age} years old.]`;
                          }
                      }
                       
                      function createPerson(name, age) {
                        return new Person(name, age);
                      }

                    да не торопи события! торопыга :D
                    о классах будет дальше!
                    Зовите меня Гена! Просто Гений! :lool:
                    ---------------------------------------
                    Гений юзает Atom + Node :D
                    "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
                    "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
                      Это просто ты медленный. :angry:

                      Добавлено
                      С другой стороны, кажется, что пример с пользователем на ES5 лучше всё же переписать как:
                      ExpandedWrap disabled
                        function Person(name, age) {
                          this.name = name;
                          this.age = age;
                        }
                         
                        Person.prototype.sayHello = function() {
                            return 'Hello, I am ' + this.toString();
                        }
                         
                        Person.prototype.toString = function() {
                            return '[' + this.name + ' is '+ this.age + ' years old.]';
                        }


                      А то ты везде упоминаешь прототип, но при этом воообще не используешь его, декларируя данные в конструкторе во время инстанциирования, а не в прототипе ;)
                      Сообщение отредактировано: Serafim -
                      user posted image
                        Цитата Serafim @
                        А то ты везде упоминаешь прототип, но при этом воообще не используешь его, декларируя данные в конструкторе во время инстанциирования, а не в прототипе ;)

                        да я же хочу все постепенно объяснять и к прототипу я приду естественным путем! ;)
                        Зовите меня Гена! Просто Гений! :lool:
                        ---------------------------------------
                        Гений юзает Atom + Node :D
                        "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
                        "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
                          Cfon! я для твоей книги место нашёл ;) http://sources.ru/magazine/
                          свободные и открытые Web-скрипты k313.net закончились...
                            Продолжаю верещать! :D
                            Итак, шо мы имеем рассказать? А вот шо! К примеру есть код:
                            ExpandedWrap disabled
                              function createPerson(name, age) {
                                return {
                                  name: name,
                                  age: age,
                                  __proto: personMethods
                                };
                              }
                              var personMethods = {
                                toString: function() {
                                  return '[' + this.name + ' is ' + this.age + ' years old.]';
                                }
                              };
                              var gregory = createPerson('Gregory', 42);
                              if (typeof gregory.__proto.toString === 'function') {
                                console.log(gregory.__proto.toString.call(gregory));
                              } else {
                                console.log(gregory.toString());
                              }
                              // [Gregory is 42 years old.]


                            Тут я сымитировал работу движка JavaScript с прототипом. Рассмотрим его. В функции createPerson я добавил свойство __proto, которому присвоил ссылку на объект personMethods. Этот объект содержит определения методов для работы с объектом возвращаемым функцией createPerson. В нашем случае имеется всего один метод toString. Далее создаем объект gregory и собственно имитируем работу движка JavaScript, которую он выполняет при обращении к свойствам объекта, т.е. производим поиск нужного свойства через так называемую цепочку прототипов. В нашем простом примере я ограничился одним уровнем, поиском только в объекте __proto для демки.

                            А вот как это будет выглядеть через настоящий прототип:
                            ExpandedWrap disabled
                              function createPerson(name, age) {
                                return {
                                  name: name,
                                  age: age,
                                  __proto__: personMethods //<-- тут изменение
                                };
                              }
                              var personMethods = {
                                toString: function() {
                                  return '[' + this.name + ' is ' + this.age + ' years old.]';
                                }
                              };
                              var gregory = createPerson('Gregory', 42);
                              console.log(gregory.toString()); // [Gregory is 42 years old.]


                            Всего одно изменение, я заменил __proto на __proto__, т.е. присвоил personMethods ссылке __proto__, которая является внутренним свойством объекта gregory и неявно присутствует в каждом объекте. Это и есть ссылка на прототип, которую неявно использует движок JavaScript, выполняя за нас поиск свойств и обращение к ним. Конечно явно трогать свойство __proto__ не стоит, поскольку оно является внутренним свойтсвом движка JavaScript. Для доступа к нему существует несколько легальных способов, я уже перечислял их выше, не поленимся и еще раз перечислим:
                            1. свойство prototype функции-конструктора и оператор new;
                            2. метод Object.create (доступен в ECMAScript 5);
                            3. метод Object.setPrototypeOf (доступен в ECMAScript 6).

                            Первый способ:
                            ExpandedWrap disabled
                              function Person(name, age) {
                                this.name = name;
                                this.age = age;
                              }
                              Person.prototype = { //<-- установка прототипа
                                constructor: Person,
                                toString: function() {
                                  return '[' + this.name + ' is ' + this.age + ' years old.]';
                                }
                              };
                               
                              var gregory = new Person('Gregory', 42);
                              console.log(gregory.toString()); // [Gregory is 42 years old.]


                            Второй способ:
                            ExpandedWrap disabled
                              var createPerson = (function () {
                                var personMethods = {
                                  toString: function(){
                                    return '[' + this.name + ' is ' + this.age + ' years old.]';
                                  }
                                };
                                return function (name, age) {
                                  var o = Object.create(personMethods); //<-- установка прототипа
                                  o.name = name;
                                  o.age = age;
                                  return o;
                                };
                              })();


                            Ну и третий способ:
                            ExpandedWrap disabled
                              var createPerson = (function () {
                                var personMethods = {
                                  toString(){
                                    return `[${this.name} is ${this.age} years old.]`;
                                  }
                                };
                                return function (name, age) {
                                  var o = { name,  age };
                                  Object.setPrototypeOf(o, personMethods);  //<-- установка прототипа  
                                  return o;
                                };
                              })();


                            Существует еще один. Какой? Догадайтесь :D
                            ExpandedWrap disabled
                              class Person {
                                constructor(name, age) {
                                  this.name = name;
                                  this.age = age;
                                }
                                toString() {
                                  return `[${this.name} is ${this.age} years old.]`;
                                }
                              }
                               
                              var gregory = new Person('Gregory', 42);
                              console.log(gregory.toString()); // [Gregory is 42 years old.]

                            хз где тут установка прототипа :D или ее нет? :unsure:
                            Конечно же есть! Просто она скрыта от глаз движком JavaScript :)

                            Это долгожданый всеми синтаксис класса. Он появился в ES6. Если разобраться, то это те же яйца тока в профиль :D
                            Почему? Да патаму шо является той же самой формой функции-конструктора, что и первый способ!

                            Юзать синтаксис классов конечно удобно, но есть подводные камни, которые могут появиться, если не знать прототипов и сразу писать классы минуя изучение прототипов и функций-конструктора. Какие камни? Ну например шо вы скажите когда увидите такое?
                            ExpandedWrap disabled
                              var Person = (function () {
                                class Person {
                                  constructor(name, age) {
                                    this.name = name;
                                    this.age = age;
                                  }
                                  toString() {
                                    return `[${this.name} is ${this.age} years old.]`;
                                  }
                                }
                                return Person;
                              )();

                            Ага задумчиво да? :D Не?! :blink:
                            значит вы просто изучали как и я с ES3 :victory:

                            Всем удачи! :thanks:
                            Продолжение следует...

                            Добавлено
                            Цитата K313 @
                            Cfon! я для твоей книги место нашёл ;) http://sources.ru/magazine/

                            до книжке еще далеко :P
                            Сообщение отредактировано: Cfon -
                            Зовите меня Гена! Просто Гений! :lool:
                            ---------------------------------------
                            Гений юзает Atom + Node :D
                            "Записки гения JavaScript" => https://github.com/Cfon/ImGeniusJavaScript
                            "Программирование БД в действии: гениальный подход" => https://github.com/Cfon/MFCSQLite3Demo
                            1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
                            0 пользователей:


                            Рейтинг@Mail.ru
                            [ Script Execution time: 0,1762 ]   [ 14 queries used ]   [ Generated: 16.12.17, 18:49 GMT ]