Ivan Asmer 5 lat temu
rodzic
commit
074a3a4bc3
2 zmienionych plików z 82 dodań i 0 usunięć
  1. 77 0
      Proto.md
  2. 5 0
      README.md

+ 77 - 0
Proto.md

@@ -0,0 +1,77 @@
+# Прототипное ООП.
+
+## Идея.
+
+Прототипное ООП в **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.instances = [];
+Drawable.addInstance = function(item){
+     Drawable.instances.push(item);
+}
+
+
+Drawable.drawAll = function(){
+    for(var i = 0; i<Drawable.instances.length;i++){
+        Drawable.instances[i].draw();
+    }
+}
+```
+
+Определенные в прототипе поля являются статическими (общими) для класса, так как у всех объектов класса есть *один* объект-прототип. При этом они
+работают как методы *каждого* объекта, если используют `this`, являющийся ссылкой на конкретный объект.
+
+## Наследование
+
+Наследование в **JS** обычно реализуется в два этапа - создание *одного* объекта с прототипом предка, насыщение его общими и статическими методами
+*этого* класса, после чего использование этого объекта в качестве *прототипа* для объектов класса:
+
+```javascript
+function Circle(x,y,radius,color){
+  Drawable.apply(this);
+
+  this.coords   = {x: x || 0, y: y || 0}  
+  this.radius   = radius || 10;
+  this.color    = color  || "red";  
+}
+
+Circle.prototype = Object.create(Drawable.prototype);
+Circle.prototype.constructor = Circle;
+
+Circle.prototype.draw = function(){
+  console.log('DRAW');
+  ctx.beginPath();
+  ctx.arc(this.coords.x, this.coords.y, this.radius, 0, 2 * Math.PI, false);
+  ctx.fillStyle = this.color;
+  ctx.closePath()
+  ctx.fill();
+}
+
+Circle.prototype.coords = {x: null, y: null};
+Circle.prototype.radius   = null;
+Circle.prototype.color  = "black";
+
+```
+
+## Пример
+
+http://canvas.asmer.fe.a-level.com.ua/
+
+

+ 5 - 0
README.md

@@ -3,12 +3,15 @@
 ## Worstka
 
 ## JS
+- Try Catch Throw
+- regexp
 
 ## Node
 - Streams
 - Event emmitting
 - http
 - express
+- **BONUS**: web socket
 - middleware
 - mongo
 - mongoose
@@ -26,5 +29,7 @@
 - Saga
 - Components, Containers, HOC
 - **BONUS**: native
+- **BONUS**: webrtc
 
 ## Project
+