up

1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/solution.md

@@ -0,0 +1,18 @@
+Да, возможны.
+
+Они должны возвращать одинаковый объект. При этом если функция возвращает объект, то `this` не используется.
+
+Например, они могут вернуть один и тот же объект `obj`, определённый снаружи:
+
+```js run no-beautify
+var obj = {};
+
+function A() { return obj; }
+function B() { return obj; }
+
+var a = new A;
+var b = new B;
+
+alert( a == b ); // true
+```
+

1-js/04-object-basics/06-constructor-new/1-two-functions-one-object/task.md

@@ -0,0 +1,19 @@
+importance: 2
+
+---
+
+# Две функции один объект
+
+Возможны ли такие функции `A` и `B` в примере ниже, что соответствующие объекты `a,b` равны (см. код ниже)?
+
+```js no-beautify
+function A() { ... }
+function B() { ... }
+
+var a = new A;
+var b = new B;
+
+alert( a == b ); // true
+```
+
+Если да -- приведите пример кода с такими функциями.

1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/solution.js

@@ -0,0 +1,15 @@
+function Calculator() {
+
+  this.read = function() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  };
+
+  this.sum = function() {
+    return this.a + this.b;
+  };
+
+  this.mul = function() {
+    return this.a * this.b;
+  };
+}

1-js/04-object-basics/06-constructor-new/2-calculator-constructor/_js.view/test.js

@@ -0,0 +1,25 @@
+sinon.stub(window, "prompt")
+
+prompt.onCall(0).returns("2");
+prompt.onCall(1).returns("3");
+
+describe("calculator", function() {
+  var calculator;
+  before(function() {
+    calculator = new Calculator();
+    calculator.read();
+  });
+
+  it("при вводе 2 и 3 сумма равна 5", function() {
+    assert.equal(calculator.sum(), 5);
+  });
+
+  it("при вводе 2 и 3 произведение равно 6", function() {
+    assert.equal(calculator.mul(), 6);
+  });
+
+});
+
+after(function() {
+  prompt.restore();
+});

1-js/04-object-basics/06-constructor-new/2-calculator-constructor/solution.md

@@ -0,0 +1,26 @@
+
+
+```js run demo
+function Calculator() {
+
+  this.read = function() {
+    this.a = +prompt('a?', 0);
+    this.b = +prompt('b?', 0);
+  };
+
+  this.sum = function() {
+    return this.a + this.b;
+  };
+
+  this.mul = function() {
+    return this.a * this.b;
+  };
+}
+
+var calculator = new Calculator();
+calculator.read();
+
+alert( "Сумма=" + calculator.sum() );
+alert( "Произведение=" + calculator.mul() );
+```
+

1-js/04-object-basics/06-constructor-new/2-calculator-constructor/task.md

@@ -0,0 +1,24 @@
+importance: 5
+
+---
+
+# Создать Calculator при помощи конструктора
+
+Напишите *функцию-конструктор* `Calculator`, которая создает объект с тремя методами:
+
+- Метод `read()` запрашивает два значения при помощи `prompt` и запоминает их в свойствах объекта.
+- Метод `sum()` возвращает сумму запомненных свойств.
+- Метод `mul()` возвращает произведение запомненных свойств.
+
+Пример использования:
+
+```js
+var calculator = new Calculator();
+calculator.read();
+
+alert( "Сумма=" + calculator.sum() );
+alert( "Произведение=" + calculator.mul() );
+```
+
+[demo]
+

1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/solution.js

@@ -0,0 +1,8 @@
+function Accumulator(startingValue) {
+  this.value = startingValue;
+
+  this.read = function() {
+    this.value += +prompt('Сколько добавлять будем?', 0);
+  };
+
+}

1-js/04-object-basics/06-constructor-new/3-accumulator/_js.view/test.js

@@ -0,0 +1,37 @@
+describe("Accumulator(1)", function() {
+  var accumulator;
+  before(function() {
+    accumulator = new Accumulator(1);
+  });
+
+  beforeEach(function() {
+    sinon.stub(window, "prompt")
+  });
+
+  afterEach(function() {
+    prompt.restore();
+  });
+
+  it("начальное значение 1", function() {
+    assert.equal(accumulator.value, 1);
+  });
+
+  it("после ввода 0 значение 1", function() {
+    prompt.returns("0");
+    accumulator.read();
+    assert.equal(accumulator.value, 1);
+  });
+
+  it("после ввода 1 значение 2", function() {
+    prompt.returns("1");
+    accumulator.read();
+    assert.equal(accumulator.value, 2);
+  });
+
+  it("после ввода 2 значение 4", function() {
+    prompt.returns("2");
+    accumulator.read();
+    assert.equal(accumulator.value, 4);
+  });
+
+});

1-js/04-object-basics/06-constructor-new/3-accumulator/solution.md

@@ -0,0 +1,18 @@
+
+
+```js run demo
+function Accumulator(startingValue) {
+  this.value = startingValue;
+
+  this.read = function() {
+    this.value += +prompt('Сколько добавлять будем?', 0);
+  };
+
+}
+
+var accumulator = new Accumulator(1);
+accumulator.read();
+accumulator.read();
+alert( accumulator.value );
+```
+

1-js/04-object-basics/06-constructor-new/3-accumulator/task.md

@@ -0,0 +1,27 @@
+importance: 5
+
+---
+
+# Создать Accumulator при помощи конструктора
+
+Напишите *функцию-конструктор* `Accumulator(startingValue)`.
+Объекты, которые она создает, должны хранить текущую сумму и прибавлять к ней то, что вводит посетитель.
+
+Более формально, объект должен:
+
+- Хранить текущее значение в своём свойстве `value`. Начальное значение свойства `value` ставится конструктором равным `startingValue`.
+- Метод `read()` вызывает `prompt`, принимает число и прибавляет его к свойству `value`.
+
+Таким образом, свойство `value` является текущей суммой всего, что ввел посетитель при вызовах метода `read()`, с учетом начального значения `startingValue`.
+
+Ниже вы можете посмотреть работу кода:
+
+```js
+var accumulator = new Accumulator(1); // начальное значение 1
+accumulator.read(); // прибавит ввод prompt к текущему значению
+accumulator.read(); // прибавит ввод prompt к текущему значению
+alert( accumulator.value ); // выведет текущее значение
+```
+
+[demo]
+

1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/solution.js

@@ -0,0 +1,29 @@
+function Calculator() {
+
+  var methods = {
+    "-": function(a, b) {
+      return a - b;
+    },
+    "+": function(a, b) {
+      return a + b;
+    }
+  };
+
+  this.calculate = function(str) {
+
+    var split = str.split(' '),
+      a = +split[0],
+      op = split[1],
+      b = +split[2]
+
+    if (!methods[op] || isNaN(a) || isNaN(b)) {
+      return NaN;
+    }
+
+    return methods[op](a, b);
+  }
+
+  this.addMethod = function(name, func) {
+    methods[name] = func;
+  };
+}

1-js/04-object-basics/06-constructor-new/4-calculator-extendable/_js.view/test.js

@@ -0,0 +1,26 @@
+var calculator;
+before(function() {
+  calculator = new Calculator;
+});
+
+it("calculate(12 + 34) = 46", function() {
+  assert.equal(calculator.calculate("12 + 34"), 46);
+});
+
+it("calculate(34 - 12) = 22", function() {
+  assert.equal(calculator.calculate("34 - 12"), 22);
+});
+
+it("добавили умножение: calculate(2 * 3) = 6", function() {
+  calculator.addMethod("*", function(a, b) {
+    return a * b;
+  });
+  assert.equal(calculator.calculate("2 * 3"), 6);
+});
+
+it("добавили возведение в степень: calculate(2 ** 3) = 8", function() {
+  calculator.addMethod("**", function(a, b) {
+    return Math.pow(a, b);
+  });
+  assert.equal(calculator.calculate("2 ** 3"), 8);
+});

1-js/04-object-basics/06-constructor-new/4-calculator-extendable/solution.md

@@ -0,0 +1,52 @@
+
+
+```js run
+function Calculator() {
+
+  var methods = {
+    "-": function(a, b) {
+      return a - b;
+    },
+    "+": function(a, b) {
+      return a + b;
+    }
+  };
+
+  this.calculate = function(str) {
+
+    var split = str.split(' '),
+      a = +split[0],
+      op = split[1],
+      b = +split[2]
+
+    if (!methods[op] || isNaN(a) || isNaN(b)) {
+      return NaN;
+    }
+
+    return methods[op](+a, +b);
+  }
+
+  this.addMethod = function(name, func) {
+    methods[name] = func;
+  };
+}
+
+var calc = new Calculator;
+
+calc.addMethod("*", function(a, b) {
+  return a * b;
+});
+calc.addMethod("/", function(a, b) {
+  return a / b;
+});
+calc.addMethod("**", function(a, b) {
+  return Math.pow(a, b);
+});
+
+var result = calc.calculate("2 ** 3");
+alert( result ); // 8
+```
+
+- Обратите внимание на хранение методов. Они просто добавляются к внутреннему объекту.
+- Все проверки и преобразование к числу производятся в методе `calculate`. В дальнейшем он может быть расширен для поддержки более сложных выражений.
+

1-js/04-object-basics/06-constructor-new/4-calculator-extendable/task.md

@@ -0,0 +1,42 @@
+importance: 5
+
+---
+
+# Создайте калькулятор
+
+Напишите конструктор `Calculator`, который создаёт расширяемые объекты-калькуляторы.
+
+Эта задача состоит из двух частей, которые можно решать одна за другой.
+
+1. Первый шаг задачи: вызов `calculate(str)` принимает строку, например "1 + 2", с жёстко заданным форматом "ЧИСЛО операция ЧИСЛО" (по одному пробелу вокруг операции), и возвращает результат. Понимает плюс `+` и минус `-`.
+
+    Пример использования:
+
+    ```js
+    var calc = new Calculator;
+
+    alert( calc.calculate("3 + 7") ); // 10
+    ```
+2. Второй шаг -- добавить калькулятору метод `addMethod(name, func)`, который учит калькулятор новой операции. Он получает имя операции `name` и функцию от двух аргументов `func(a,b)`, которая должна её реализовывать.
+
+    Например, добавим операции умножить `*`, поделить `/` и возвести в степень `**`:
+
+    ```js
+    var powerCalc = new Calculator;
+    powerCalc.addMethod("*", function(a, b) {
+      return a * b;
+    });
+    powerCalc.addMethod("/", function(a, b) {
+      return a / b;
+    });
+    powerCalc.addMethod("**", function(a, b) {
+      return Math.pow(a, b);
+    });
+
+    var result = powerCalc.calculate("2 ** 3");
+    alert( result ); // 8
+    ```
+
+- Поддержка скобок и сложных математических выражений в этой задаче не требуется.
+- Числа и операции могут состоять из нескольких символов. Между ними ровно один пробел.
+- Предусмотрите обработку ошибок. Какая она должна быть - решите сами.

1-js/04-object-basics/06-constructor-new/article.md

@@ -0,0 +1,216 @@
+# Using "new" to create objects
+
+The regular `{...}` syntax allows to create one object. But often we need to create many similar objects.
+
+That can be done using constructor functions and the `"new"` operator.
+
+[cut]
+
+## Constructor function
+
+Constructor functions technically are regular functions. There are two agreements though:
+
+1. They are named with capital letter first.
+2. They should be executed only with `"new"` operator.
+
+For instance:
+
+```js run
+function User(name) {
+  this.name = name;
+  this.isAdmin = false;
+}
+
+*!*
+let user = new User("Jack");
+*/!*
+
+alert(user.name); // Jack
+alert(user.isAdmin); // false
+```
+
+When a function is executed as `new User(...)`, it does the following steps:
+
+1. A new empty object is created and assigned to `this`.
+2. The function executes. Usually it modifies `this`, adds new properties to it.
+3. The value of `this` is returned.
+
+In other words, `new User(...)` does something like:
+
+```js
+function User(name) {
+*!*
+  // this = {};  (implicitly)
+*/!*
+
+  // we add properties to this
+  this.name = name;
+  this.isAdmin = false;
+
+*!*
+  // return this;  (implicitly)
+*/!*
+}
+```
+
+So the result of `new User("Jack")` is the same object as:
+
+```js
+let user = {
+  name: "Jack",
+  isAdmin: false
+};
+```
+
+Now if we want to create other users, we can call `new User("Ann")`, `new User("Alice")` and so on. Much shorter than using literals every time, and also reads well. 
+
+That's the main purpose of constructors -- to implement reusable object creation code.
+
+Let's note once again -- technically, any function can be used as a constructor. That is: any function can be run with `new`, and it will execute the algorithm above. The "capital letter first" is a common agreement, to make it clear that a function is to be run with `new`.
+
+````smart header="new function() { ... }"
+If we have many lines of code all about creation of a single complex object, we can wrap them in constructor function, like this:
+
+```js
+let user = new function() {
+  this.name = "John";
+  this.isAdmin = false;
+
+  // ...other code for user creation
+  // maybe complex logic and statements
+  // local variables etc
+};
+```
+
+The constructor can't be called again, because it is not saved anywhere, just created and called. So this trick aims to encapsulate the code for a single complex object only.
+````
+
+## Dual-use constructors: new.target 
+
+Inside a function, we can check how it is called with `new` or without it, using a special `new.target` property.
+
+It is empty for ordinary runs and equals the function if called with `new`:
+
+```js run
+function User() {
+  alert(new.target);
+}
+
+User(); // undefined
+new User(); // function User { ... }
+```
+
+That can be used to allow both `new` and ordinary syntax work the same:
+
+
+```js run
+function User(name) {
+  if (!new.target) { // if you run me without new
+    return new User(name); // ...I will add new for you
+  }
+
+  this.name = name;
+}
+
+let john = User("John"); // redirects call to new User
+alert(john.name); // John
+```
+
+This approach is sometimes used in libraries to make the syntax more flexible. Probably not a good thing to use everywhere though, because it makes a bit less obvious what's going on for a person who's familiar with internals of `User`.
+
+## Return from constructors
+
+Usually, constructors do not have a `return` statement. Their task is to write all necessary stuff into `this`, and it automatically becomes the result.
+
+But if there is a `return` statement, then the rule is simple:
+
+- If `return` is called with object, then it is returned instead of `this`.
+- If `return` is called with a primitive, it's ignored.
+
+In other words, `return` with an object returns that object, otherwise `this` is returned.
+
+For instance, here `return` overrides `this` by returning an object:
+
+```js run 
+function BigUser() {
+
+  this.name = "John";
+
+  return { name: "Godzilla" };  // <-- returns an object
+}
+
+alert( new BigUser().name );  // Godzilla, got that object
+```
+
+And here's an example with an empty `return` (or we could place a primitive after it, doesn't matter):
+
+```js run 
+function SmallUser() {
+
+  this.name = "John";
+
+  return; // finishes the execution, returns this
+
+  // ...
+
+}
+
+alert( new SmallUser().name );  // John
+```
+
+Most of time constructors return nothing. Here we mention the special behavior with returning objects mainly for the sake of completeness.
+
+````smart header="Omitting brackets"
+By the way, we can omit brackets after `new`, if it has no arguments:
+
+```js
+let user = new User; // <-- no brackets
+// same as
+let user = new User();
+```
+
+Omitting brackets here is not considered a "good style", but the syntax is permitted by specification.
+````
+
+## Methods in constructor
+
+Using constuctor functions to create objects gives a great deal of flexibility. The constructor function may have parameters that define how to construct the object, what to put in it.
+
+Of course, we can add to `this` not only properties, but methods as well.
+
+For instance, `new User(name)` below creates an object with the given `name` and the method `sayHi`:
+
+```js run
+function User(name) {
+  this.name = name;
+
+  this.sayHi = function() {
+    alert( "My name is: " + this.name );
+  };
+}
+
+*!*
+let john = new User("John");
+
+john.sayHi(); // My name is: John
+*/!*
+
+/* 
+john = {
+   name: "John",
+   sayHi: function() { ... }
+}
+*/
+```
+
+## Summary
+
+- Constructor functions or, shortly, constructors, are regular functions, but there's a common agreement to name them with capital letter first.
+- Constructor functions should only be called using `new`. Such call implies a creation of empty `this` at the start and returning the populated one at the end.
+
+We can use constructor functions to make multiple similar objects. But the topic is much deeper than described here. So we'll return it later and cover more in-depth. 
+
+As of now, it's important to understand what `new` is, because Javascript provides constructor functions for many built-in language objects: like `Date` for dates, `Set` for sets and others that we plan to study.
+
+
+