proto alpha

Proto.md

@@ -0,0 +1,85 @@
+# Прототипное ООП.
+
+## Идея.
+
+Прототипное ООП в **JS** базируется на простой идее, которую следует запомнить: каждый объект имеет прототип, т. е. другой *объект*, в котором
+ищуться *поля* в случае отсутствия их в оригинальном объекте:
+
+```javascript
+    var a = {};
+    a.toString() // "[object Object]"
+    a.__proto__ // Object {}
+    a.__proto__.constructor // function Object() { [native code] }
+```
+
+`a.toString()` отсутствует как явно определенный в объекте `a`, однако он найден в *прототипе* `Object`. 
+
+
+
+```javascript
+function Drawable(){
+   Drawable.prototype.addInstance(this);   
+}
+
+Drawable.prototype.draw = function(){};
+Drawable.prototype.instances = [];
+Drawable.prototype.addInstance = function(item){
+     Drawable.prototype.instances.push(item);
+}
+
+
+Drawable.prototype.drawAll = function(){
+    for(var i = 0; i<Drawable.prototype.instances.length;i++){
+        Drawable.prototype.instances[i].draw();
+    }
+}
+```
+
+Определенные в прототипе поля являются статическими (общими) для класса, так как у всех объектов класса есть *один* объект-прототип. При этом они
+работают как методы *каждого* объекта, если используют `this`, являющийся ссылкой на конкретный объект.
+
+## Наследование
+
+Наследование в **JS** обычно реализуется в два этапа - создание *одного* объекта с прототипом предка, насыщение его общими и статическими методами
+*этого* класса, после чего использование этого объекта в качестве *прототипа* для объектов класса:
+
+```javascript
+function Field(width, height, step, scale){
+    Drawable.apply(this);
+
+    this.width = width || 10000;
+    this.height = height || 10000;
+    this.step   = step || 50;
+    this.scale  = scale || 1;  
+
+    for (var i = 0;i<100;i++){
+        new Food(Math.random()*this.width, Math.random()*this.height, Math.random()*10, colors[Math.floor(Math.random()*colors.length)]);
+    }
+
+}
+
+Field.prototype = Object.create(Drawable.prototype); //!!!
+Field.prototype.constructor = Field;
+Field.prototype.draw = function(){
+    for (var i=0;i < this.width; i += this.step){
+        ctx.beginPath();
+        ctx.moveTo(i,0);
+        ctx.lineTo(i,this.height);
+        ctx.stroke();
+    }  
+
+    for (var i=0;i < this.height; i += this.step){
+        ctx.beginPath();
+        ctx.moveTo(0,i);
+        ctx.lineTo(this.width,i);
+        ctx.stroke();
+    }  
+}
+```
+
+## Пример
+
+https://jsfiddle.net/42jgnfcq/58/
+
+
+