차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- javascript:objectoriented [2011/12/02 21:11]
kwon37xi
+++ javascript:objectoriented [2012/03/16 15:38] (현재)
kwon37xi
@@ 줄 110: / 줄 110: @@
 핵심은 이벤트 핸들러를 등록할 때 **this를 that으로 매핑하고, ''that.buttonClicked()''를 호출하도록 function()으로 감싸는 부분**이다. 이렇게 하면 클래스 메소드에서는 ''this''를 원래 객체를 가리키는 것으로써 온전하게 사용할 수 있다.
-===== setInterval =====
+===== setInterval / setTimeout =====
-setInterval과 setTimeout에서도 DOM 이벤트 바인딩과 동일한 원리가 적용된다.
+[[http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/|setInterval과 setTimeout]]에서도 DOM 이벤트 바인딩과 동일한 원리가 적용된다.
 <code javascript>
 var A = function(v) {
@@ 줄 121: / 줄 121: @@
   console.log(new Date() + " : " + this.value);
 };
 A.prototype.start = function() {
@@ 줄 140: / 줄 139: @@
 </code>
 위에서 ''A.prototype.start'' 함수를 보면된다.
+===== John Resig Class.extend =====
+  * [[http://ejohn.org/blog/simple-javascript-inheritance/|John Resig - Simple JavaScript Inheritance]] : ''Class.extend({ ... });'' 로 간결하게 클래스 생성
+<code javascript>
+// "use strict"가 가능하도록 살짝 수정
+/*
+ * Simple JavaScript Inheritance By John Resig http://ejohn.org/
+ * http://ejohn.org/blog/simple-javascript-inheritance/ MIT Licensed.
+ */
+// Inspired by base2 and Prototype
+(function () {
+    "use strict";
+    var initializing = false, fnTest = /xyz/.test(function () {
+        xyz;
+    }) ? /\b_super\b/ : /.*/;
+    // The base Class implementation (does nothing)
+    window.Class = function () { // edited for use strict
+    };
+    // Create a new Class that inherits from this class
+    Class.extend = function (prop) {
+        var _super = this.prototype;
+        // Instantiate a base class (but only create the instance,
+        // don't run the init constructor)
+        initializing = true;
+        var prototype = new this();
+        initializing = false;
+        var name;
+        // Copy the properties over onto the new prototype
+        for (name in prop) {
+            // Check if we're overwriting an existing function
+            prototype[name] = typeof prop[name] === "function" && typeof _super[name] === "function"
+                            && fnTest.test(prop[name]) ? (function (name, fn) {
+                    return function () {
+                        var tmp = this._super;
+                        // Add a new ._super() method that is the same method
+                        // but on the super-class
+                        this._super = _super[name];
+                        // The method only need to be bound temporarily, so we
+                        // remove it when we're done executing
+                        var ret = fn.apply(this, arguments);
+                        this._super = tmp;
+                        return ret;
+                    };
+            }(name, prop[name])) : prop[name];
+        }
+        // The dummy class constructor
+        function Class() {
+            // All construction is actually done in the init method
+            if (!initializing && this.init)
+                this.init.apply(this, arguments);
+        }
+        // Populate our constructed prototype object
+        Class.prototype = prototype;
+        // Enforce the constructor to be what we expect
+        Class.prototype.constructor = Class;
+        // And make this class extendable
+        Class.extend = window.Class.extend; // edited for use strict
+        return Class;
+    };
+}());
+</code>
+<code javascript>
+// 용례
+var Person = Class.extend({
+  init: function(isDancing){
+    this.dancing = isDancing;
+  },
+  dance: function(){
+    return this.dancing;
+  }
+});
+var Ninja = Person.extend({
+  init: function(){
+    this._super( false );
+  },
+  dance: function(){
+    // Call the inherited version of dance()
+    return this._super();
+  },
+  swingSword: function(){
+    return true;
+  }
+});
+var p = new Person(true);
+p.dance(); // => true
+var n = new Ninja();
+n.dance(); // => false
+n.swingSword(); // => true
+// Should all be true
+p instanceof Person && p instanceof Class &&
+n instanceof Ninja && n instanceof Person && n instanceof Class
+</code>

권남

사용자 도구

사이트 도구

차이

문서 도구