전역변수의 문제점은 자바스크립트 어플리케이션이나 웹페이지 내 모든 코드 사이에서 공유가 된다.\n모든 전역변수는 동일한 전역 네임스페이스 공간 안에 존재하게된다.
\n그래서 무조건 var 키워드를 변수 선언시 사용하는 것이 좋다.
\nfunction foo() {\n var a = (b = 0)\n}위처럼 코드를 작성하면, b는 전역변수가 된다. 평가 방식이 우측에서 좌측으로 이동한다.
\nvar선언을 빼먹음으로써 부족용이 2가지 있다.
\nfunction funcexmaple() {\n var a = 1,\n b = 2,\n sum = a + b,\n myObject = {},\n i,\n j\n}초기 값없이 선언된 변수들을 모두 undefined라는 값으로 초기화 된다.
\n자바스크립트는 변수를 비교할 떄 암묵적으로 타입캐스팅을 실행한다.\n그런 이유로 false == 0 이나 \"\"\"== 0과 같은 비교가 true를 반환한다.\n암묵적 타입 캐스팅을 피하기 위해서는 항상 표현식의 값과 타입을 모두 확인하는 ===, !== 연산자를 사용해야 한다.
var seungdols = 0\nif (seungdols === false) {\n}\n\n//anti-patterns\nif (seungdols == false) {\n}보안상에도 좋지 않고, 주로 사용하지 않으므로 아예 쓰지 말자.\n쓰는 코드를 발견할 경우 즉시, 변경하도록 하자.
\n특히, setInterval(), setTimeout(), Function() 생성자에 문자열을 넘기는 것도 eval()과 유사한 기능을 하므로, 지양하자.
//안티패턴\nsetTimeout(\"seungdolsFunc()\", 1000);\nsetTimeout(\"seungdolsFunc(1,2,3)\", 1000);\n\n\n//권장사항\nsetTimeout(seungdolsFunc, 1000);\nsetTimeout(funtion() {\n seungdolsFunc(1,2,3);\n}, 1000);parseInt()를 사용하면 문자열로부터 숫자 값을 얻을 수 있다.\n이 함수의 두번째 매개변수로 기수를 받는데, 생략하는 경우에 많지만 그럼 안된다.\n파싱할 문자열이 0으로 시작할 경우 문제가 생길 수 있다.\n일관성 없고, 예측을 벗어나는 결과를 피하려면 항상 기수 매개변수를 지정해주어야 한다.
\nvar strMonth = '06'\nvar month = parseInt(strMonth, 10)var dog = {}위는 빈 객체를 생성하는 객체 리터럴 표기법이다.\n그러나, 참고해야 할 것은 자바스크립트에는 빈 객체라는 것은 없으며, 쉽게 말하는 의미이다.\n간단한 객체 자체도, Object.prototype에서 상속받은 프로퍼티와 메서드를 가지고 있다.
\nvar dog = { gender: 'M' } //권장 패턴\n\nvar cat = new Object() //안티패턴\ncat.gender = 'W'리터럴 표기법을 사용시, 유효범위 판별 작업도 하지 않는다.\n생성자 함수 사용시에는 지역 유효범위에 동일한 이름의 생성자가 있을 수 있어, Object()를 호출한 위치에서부터 전역 Object 생성자까지 인터프리터가 쭉 거슬러 올라가면서 유효범위를 검색해야 한다.
\nvar Person = function(name) {\n this.name = name\n this.say = function() {\n return 'I am ' + this.name\n }\n}\n\nvar adam = new Person('Adam')\nadam.say()new 와 함께 생성자 함수를 호출하면, 함수 안에서 아래와 같은 일이 벌어진다.
\n코드의 내부적인 상황을 표현하면 이렇게 된다.
\nvar Person = function(name) {\n var this = {}\n\n this.name = name\n this.say = function() {\n return 'I am ' + this.name\n }\n\n return this\n}생성자의 반환값으로는 생성자 함수를 new와 함께 호출하면 항상, 객체가 반환 된다. 기본 값으로는 this호 참조되는 객체다.
\n함수내에 return문을 쓰지 않더라도 생성자는 암묵적으로 this를 반환한다.
\n생성자는 new와 함께 호출 될뿐이지, 다른 함수와 다를바가 없다. 그러나 new를 생략하면, 생성자 내부의 this 참조가 전역 객체인 window를 가리키므로 오류를 발생할 가능성을 높인다.
\nvar arr = new Array('seungdols', 'seungho', 'speed') //안티 패턴\n\nvar arr = ['seungdols', 'seungho', 'speed']참고로 자바스크립트에서 배열은 object 타입이다.\n더군다나, new Array로 생성할 경우 오류가 발생할 요지가 있는데, 이는 인자로 숫자를 줄 경우이다.
var arr = new Array(3)\n\nconsole.log(arr.length)인자로 숫자를 주면 배열의 길이가 인자로 준 숫자 값으로 배열을 만드는데, 각 원소는 undefined로 생성 된다.\n특히나, 부동 소수점으로 인자를 줄 경우 더욱 문제가 심해진다.\n부동 소수점을 인자로 줄 경우에는 RangeError가 발생한다.
var re = '/\\\\/gm'\n\nvar reg = new RegExp('\\\\\\\\', 'gm') //안티 패턴자바스크립트에는 Error(), SyntaxError(), TypeError()등 여러 가지 에러 생성자가 내장 되어 있으며, throw문과 함께 사용된다.\n이 생성자들을 통해 생성된 에러 겍체들은 다음과 같은 프로퍼티를 가진다.
name
message
try {\n throw {\n name: 'MyErrorType',\n message: 'oops',\n extra: 'This was rather embarrassing',\n remedy: genericErrorHandler,\n }\n} catch (e) {\n alert(e.message)\n\n e.remedy()\n}에러 생성자를 new 없이 일반 함수로 호출해도 new를 써서 생성자로 호출한 것과 동일하게 동작하여 에러 객체가 반환된다.
\n//기명 함수 표현식 (named function expression)\nvar add = function add(a, b) {\n return a + b\n}\n\n//(무명)함수 표현식 or 익명 함수 (anonymous function)\nvar add = function(a, b) {\n return a + b\n}위 둘의 차이점은 별다른 것은 없고, 함수 객체의 name property가 빈문자열이 된다는 차이 밖에 없다.
\n//함수 선언문(function declaration)\nfunction add(a, b) {\n //\n}함수 선언문은 전역 유효범위나 다른 함수의 본문 내부, 즉 ‘프로그램 코드’에서만 쓸 수 있다.
\ncallMe(function() {\n //unnamed function expression\n})\n\ncallMe(function me() {\n //named function expression\n})\n\nvar seungdolsObject = {\n say: function() {\n //function expression\n },\n}위의 예 같은 경우에는 함수 선언문을 쓸 수 없다.
\nfunction foo() {\n alert('global foo')\n}\nfunction bar() {\n alert('global bar')\n}\n\nfunction hoistMe() {\n console.log(typeof foo) //function\n console.log(typeof bar) //undefined\n\n foo() //local foo\n bar() //TypeError\n\n function foo() {\n alert('local foo')\n }\n\n var bar = function() {\n alert('local bar')\n }\n}\nhoistMe()결국 선언된 위치와 상관 없이 끌어 올려지며 전역의 foo, bar를 덮어쓴다.
\n그런데, 지역변수 foo()는 나중에 정의되더라도 상단으로 호이스팅 되어 정상 작동하나, bar()의 정의는 호이스팅 되지 않고, 선언문만 호이스팅 된다.
\n때문에 bar()의 정의가 나오기 전까지는 undefined 상태이고, 따라서 함수로 사용할 수 없다.\n또한 선언문 자체는 호이스팅 되어 유효범위 체인 내에서 전역 bar()도 보이지 않는 이유이다.
\n콜백 패턴은 이를테면, 함수의 특징 중 하나인 다른 함수의 인자로 전달 할 수 있다.를 활용한 방법이다.
function requestSpec(callback) {\n //working\n callback()\n}위와 같은 코드를 콜백 패턴이라 말하는데, 요즘은 사실 콜백 헬 패턴이 될 가능성이 높아서 꺼리는 패턴이긴 하다.
\n콜백이 일회성의 익명함수나 전역 함수가 아니고, 객체의 메서드인 경우도 많은데, 이 때, 콜백 메서드가 자신이 속한 객체를 참조하기 위해 this를 사용하면, 예상치 않게 동작할 수 있다.
var seungdolsApp = {}\nseungdolsApp.color = 'green'\nseungdolsApp.paint = function(node) {\n node.style.color = this.color\n}\n\nvar findNodes = function(callback) {\n if (typeof callback === 'function') {\n callback(found)\n }\n}this.color가 정의 되지 않아 예상대로 동작 할 수 없다. 그리하여 동작 할 수 있도록 변경한다.
var findNodes = function (callback, callback_obj) {\n if(typeof callback === \"function\") {\n callback.call(callback_obj,found);\n }\n}\n\nfindNodes(seungdolsApp.paint, seungdolsApp); -> findNodes('paint', seungdolsApp);//이렇게 바꿀 수 있다.\nvar findNodes = function (callback, callback_obj) {\n if (typeof callback === 'string') {\n callback = callback_obj[callback];\n }\n if (typeof callback === \"function\") {\n callback.call(callback_obj,found);\n }\n};함수는 객체이기 때문에 반환 값으로 사용될 수 있다.\n즉, 함수의 실행 결과로 꼭 어떤 데이터 값이나, 배열을 반환할 필요는 없다는 뜻이다.
\nvar setup = function() {\n alert(1)\n return function() {\n alert(2)\n }\n}\n\nvar my = setup()\nmy()함수는 동적으로 정의 할 수 있고, 변수에 할당 할 수 있다.\n새로운 함수를 만들어 이미 다른 함수를 가지고 있는 변수에 할당하면, 새로운 함수가 이전 함수를 덮어 쓰게 된다.
\nvar scareMe = function() {\n alert('Boo')\n scareMe = function() {\n alert('Double Boo')\n }\n}\n\nscareMe()\nscareMe()이 패턴은 lazy function definition이라고도 불리는데, 최초 사용 시점 전까지 함수를 완전 정의 하지 않고 있다가 호출된 이후에는 더 게으르게 동작하기 때문이다.
\n장점으로는 함수가 어떤 초기화 준비 작업을 단 한 번만 수행하는 경우 유용하다.\n단점으로는 자기 자신을 재정의한 이후에는 이전에 사용한 함수에 추가 되었던 프로퍼티를 모두 찾을 수 없다.
\nvar seungdols = function() {\n console.log('Boo')\n seungdols = function() {\n console.log('Double Boo')\n }\n}\nseungdols.property = 'property'\n\nvar seungdols_company = seungdols\n\nvar seungho = {\n nick: seungdols,\n}\n\nseungdols_company()\nseungdols_company()\nconsole.log(seungdols_company.property)\n\nseungho.nick()\nseungho.nick()\nconsole.log(seungho.nick.property)\n\nseungdols()\nseungdols() //undefined즉시 실행 함수 패턴은 함수가 선언되자마자 실행되도록 하는 문법이다.
\n;(function() {\n console.log('watch out')\n})()JSLint는 위 패턴을 선호하는데, 보통 아래와 같이 사용해도 무방하다.
\n;(function() {\n console.log('watch out')\n})();(function(name) {\n console.log('My ' + name)\n})('seungdols')매개변수도 전달을 할 수 있으나, 되도록 즉시 실행 함수에 많은 매개변수를 전달 하는 것은 좋지 않다.
\n장점으로는 전역 변수를 남기지 않고, 많은 양의 작업을 가능하도록 해준다.\n선언 된 모든 변수는 스스로를 호출 하는 (self-invoking) 함수의 지역 변수가 되어 임시 변수가 전역 공간에 할당 되지 않는다.
\n즉시 객체 초기화 패턴이라 불리며, 즉시 실행 함수와 유사하다.
\n;({\n maxHeight: 1330,\n maxWidth: 780,\n getWidth: function() {\n return this.maxWidth\n },\n getHeight: function() {\n return this.maxHeight\n },\n init: function() {\n console.log(this.getWidth())\n console.log(this.getHeight())\n },\n}.init())일회성 작업에 적합하고, init()이 완료되고 나면, 객체에 접근 할 수 없다. 만약 객체의 참조를 유지하고 싶다면, init() 마지막에 return this;를 추가 하면 된다.
장점으로는 단 한 번의 초기화 작업을 실행 하는 동안 전역 네임스페이스 영역을 보호 할 수 있다.
\n단점으로는 자바스크립트 압축 도구가 즉시 실행 함수 패턴에 비해 덜 효율적인 압축을 한다는 것이다.
\n함수는 객체여서 프로퍼티를 가질 수 있는데, 이를 이용하여 함수에 프로퍼티를 추가하여 결과를 캐시하면, 다음 호출 시점에 복잡한 연산을 반복하지 않아도 되는 이점을 얻을 수 있다. 이를 Memoization이라 부른다.
\nvar myFunc = function(param) {\n if (!myFunc.cache[param]) {\n var result = {}\n //working\n myFunc.cache[param] = result\n }\n return myFunc.cache[param]\n}\n\nmyFunc.cache = {}물론, 더 많은 매개변수나 복잡한 타입을 갖는다면, JSON 문자열로 직렬화하고, 이 문자열을 cache 객체에 키로 사용 할 수 있다.
\n단, 직렬화 하면 객체를 식별 할 수 없게 되는 단점이 존재한다.
\n설정 객체 패턴은 좀 더 깨끗하게 API를 제공하는 방법이다.
\n초기에는 어떤 함수가 단순 했다고 가정하자.
\nfunction addPerson(first, last) {}\n\nfunction addPerson(first, median, date, last) {}이렇게 유지보수 하다보면, 매개변수가 늘어 날 수 있다.\n이 때 사용하는 방법이 설정 객체 패턴이다.
\nvar conf = {\n first: 'seungdols',\n median: 'seungseung',\n last: 'jojoldu',\n}\n\naddPerson(conf)순수한 함수형 프로그래밍 언어에서 함수는 불려지거나 호출된다고 표현하는 것보다 적용 된다고 표현한다.\n자바스크립트에서도 Function.prototype.apply()를 사용하면 함수를 적용할 수 있다.
var sayHi = function(who) {\n return 'Hello' + (who ? ',' + who : '') + '!'\n}\nsayHi()\nsayHi('world')\n\nsayHi.apply(null, ['hello'])예제에서 확인이 가능하듯이 함수의 호출이나, 함수의 적용의 결과는 같다.\napply()는 2개의 매개변수를 받는데, 첫번째는 함수내 this와 바인딩할 객체이고, 두번째는 배열 또는 인자로 함수 내부에서 배열과 비슷한 형태의 arguments 객체로 사용한다.
var seungdols = {\n sayHi: function(who) {\n return 'Hello' + (who ? ',' + who : '') + '!'\n },\n}\n\nseungdols.sayHi('world')\nsayHi.apply(seungdols, ['company'])위 처럼 함수가 객체의 메서드일 때의 예시이다.\nseungdols를 전달하게 되면, 해당 함수내의 this는 seungdols에 바인딩이 된다.
원래는 apply로 함수를 적용하는 방법이 더 직관적일 수도 있다는 생각이 든다…물론, 인자를 하나만 가지고도 해결 할 수 있다면, call() 메서드도 있다는 것을 기억하자!!
sayHi.apply(seungdols, ['company'])\nsayHi.call(seungdols, 'company')위 처럼 call()을 이용하는 것이 더 편리할 수도 있다.
함수의 일부만 적용하는 것이 가능할까? 수학에서도 볼 법한 내용이지만, 실제로 가능하다.
\nvar add = function(x, y) {\n return x + y\n}\n\nadd.apply(null, [5, 4])\n\nvar newadd = add.partialApply(null, [5])\nnewadd.apply(null, [4])위 처럼 partialApply() 메소드가 있다는 걸로 가정하고, 5 + 4를 부분적으로 적용 할 수 있는 함수를 머릿속으로 생각만 해보자.\n이러한 방법을 써먹을 수 있을까? 자바스크립트에서는 자유도가 높기에 이러한 기능을 하는 함수를 구현 할 수 있다.\n함수가 부분적인 적용을 이해하고 처리 할 수 있도록 만드는 과정을 커링이라고 한다.
\n다른 함수형 언어에서는 커링이 언어 자체에 내장 되어 모든 함수가 커링 된다. 자바스크립트는 약간의 기교를 추가하면 커링이 가능하게끔 할 수 있다.
\nfunction add(x, y) {\n var oldx = x,\n oldy = y\n if (typeof oldy === 'undefinded') {\n return function(newy) {\n return oldx + newy\n }\n }\n return x + y\n}\n\ntypeof add(5)\nadd(3)(4)\n\nvar add2000 = add(2000)\nadd2000(10)위 코드를 조금만 살펴보면, add 함수에서 리턴하는 내부 함수에 클로저가 생성 된다. 부분 적용이 없이 값이 둘 다 전달 되면, 단순히 두 값을 더한다.\n실제로 위 코드를 조금 더 간략하게 만들 수는 있다.
\nfunction add(x, y) {\n if (typeof y === 'undefined') {\n //부분 적용\n return function(y) {\n return x + y\n }\n }\n return x + y //전체 인자 적용\n}이러한 방식으로 커링을 만들어 볼 수 있다.
\n심화로 범용적으로 사용 할 수 있는 커링 함수를 만들어 본다면, 아래와 같다.
\nfunction schonfinkelize(fn) {\n var slice = Array.prototype.slice,\n stored_args = slice.call(arguments, 1)\n return function() {\n var new_args = slice.call(arguments),\n args = stored_args.concat(new_args)\n return fn.apply(null, args)\n }\n}\nfunction add(x, y) {\n return x + y\n}\nvar newadd = schonfinkelize(add, 5)\nnewadd(4)\n\nschonfinkelize(add, 1)(3)\n//2단계 커링\nvar addOneCurry = schonfinkelize(add, 3)\naddOne(10, 20, 30, 40)\nvar addTwoCurry = schonfinkelize(addOneCurry, 2, 3, 4, 5)\naddTwoCurry(45, 4)API패턴 : 함수에 더 좋고 깔끔한 인터페이스를 제공할 수 있게 돕는다.
\n초기화 패턴
\n성능 패턴
\n네임스페이스 패턴을 사용함으로써 전역 변수를 줄 일 수 있는 패턴으로 흔히 사용한다.
\nvar SH = {}\n\nSH.Parent = function() {}\nSH.Child = function() {}\n\nSH.seungdols = 1\nSH.hello_module = {}\nSH.hello_module.korean_hello = {}\nSH.hello_module.korean_hello.data = { HI: '안녕하세요 ?', Hello: '안녕?' }\nSH.hello_module.english_hello = {}전역 네임스페이스 객체의 이름은 보통 어플리케이션 이름이나 라이브러리의 이름, 도메인명, 회사 이름 중에서 선택하여 사용하곤 한다.\n보통 전역 객체 이름은 모두 대문자로 쓰는 명명 규칙을 사용한다.
\n장점
\n단점
\nvar SH = {} //이렇게 쓰면, 기존에 있는 이름과 충돌 가능성이 높다.\n\nif (typeof SH === 'undefined') {\n //개선안\n var SH = {}\n}\n\nvar SH = SH || {}기존 코드를 망가뜨리지 않고, 네임스페이스를 만드는 네임스페이스 함수를 구현 할 수 있다.
\nvar SH = SH || {}\nSH.namespace = function(ns_string) {\n var parts = ns_string.split('.'),\n parent = SH,\n i\n\n if (parts[0] === 'SH') {\n parts = parts.slice(1)\n }\n for (i = 0; i < parts.length; i += 1) {\n if (typeof parent[parts[i]] === 'undefined') {\n parent[parts[i]] = {}\n }\n\n parent = parent[parts[i]]\n }\n return parent\n}위 함수를 가지고 네임스페이스를 안전하게 만들 수 있다.
\nSH.namespace('SH.modules.hello')자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도 문법적인 방법이 없으나, 클로저를 이용해 비공개 멤버를 구현 할 수 있다.
\nfunction private_member() {\n var sh = 'seungdols'\n this.getSH = function() {\n //특권 메서드(privileged method)\n return sh\n }\n}\n\nvar seungdols = new private_member()\n\nconsole.log(seungdols.sh) //접근 안됨.\nconsole.log(seungdols.getSH) //접근 됨.객체 리터럴로 만드는 방법
\nvar myobj = (function() {\n var name = 'seungdols'\n\n return {\n getName: function() {\n return name\n },\n }\n})()자바스크립트에서 클로저를 활용한 비공개 멤버를 쉽게 구현 할 수 있다.
\n비공개 멤버의 허점
\n생성자를 사용해 비공개 멤버를 만들 경우 생성자를 호출하여 새로운 객체를 만들기 때문에 비공개 멤버가 매번 재생성 된다는 단점이 있다.\n이를 해결하려면, 공통 프로퍼티와 메서드를 생성자의 prorotype 프로퍼티에 추가해야 한다. 이렇게 하면, 감춰진 비공개 멤버들도 모든 인스턴스가 함께 쓸 수 있다.\n이를 위해서는 , 생성자 함수 내부에 비공개 멤버를 만드는 패턴과 객체 리터럴로 비공개 멤버를 만드는 패턴을 함께 써야 한다.
\nfunction Seungdols() {\n var name = 'seungdols'\n this.getName = function() {\n return name\n }\n}\n\nSeungdols.prototype = (function() {\n var browser = 'Chrome'\n return {\n getBrowser: function() {\n return browser\n },\n }\n})()\n\nvar sh = new Seungdols()\nconsole.log(sh.getName())\nconsole.log(sh.getBrowser())노출 패턴은 비공개 메서드를 구현하면서 동시에 공개 메서드로도 노출하는 것을 말한다.
\nvar SH\n\n;(function() {\n var isEmpty = false\n\n function isEmpty() {\n //\n }\n\n function isNotEmpty() {\n //\n }\n\n SH = {\n isEmpty: isEmpty,\n isNotEmpty: isNotEmpty,\n }\n})()마지막 부분에서 접근을 허용해도 괜찮은 부분에 대해 SH 객체에 추가해준다. 즉, SH를 통해서는 공개 메서드가 되나, 다른 부분에서는 비공개 멤버가 된다.
\n늘어나는 코드를 구조화하고, 정리하는데 도움되는 패턴이다. 이 패턴을 이용하면, 개별적인 코드를 느슨하게 결합시킬 수 있다.\n모듈패턴은 여러개의 패턴을 조합한 것을 말한다.
\nSEUNGDOLS.namespace('SEUNGDOLS.utilites.ArrayUtils')\n\nSEUNGDOLS.utilities.ArrayUtils = (function() {\n //의존 관계\n var obj = SEUNGDOLS.utilities.object,\n lang = SEUNGDOLS.utilities.lang,\n array_string = '[object Array]',\n tos = Object.prototype.toString\n\n //비공개 메서드\n //...\n\n //var 선언 끝\n\n //일회성 초기화 실행\n //...\n\n //공개 API\n return {\n //1\n //2\n }\n})()모듈 패턴은 점점 늘어가는 코드를 정리 할 때 널리 사용하며, 추천 되는 방법이다.
\n참고
\n모듈을 감싼 즉시 실행 함수에 인자를 전달하는 형태가 있는데, 보통 전역 변수에 대한 참조 또는 전역 변수 자체를 전달한다.\n이렇게 전달을 하게 되면, 탐색작업이 좀 더 빨라진다.
\nSEUNGDOLS.utilities.module = (function(app, global) {\n //\n //\n})(SEUNGDOLS, this)네임스페이스 패턴의 단점을 해결해주는 패턴이다. 더군다나 전역 네임스페이스를 보호해주는 역할을 한다. (아직 이해가 잘…)
\nfunction Sandbox() {\n var args = Array.prototype.slice.call(arguments),\n callback = args.pop(),\n modules = args[0] && typeof args[0] === 'string' ? args : args[0],\n i\n\n //함수가 생성자로 생성되도록 보장\n if (!(this instanceof Sandbox)) {\n return new Sandbox(modules, callback)\n }\n\n //this에 필요한 프로퍼티들을 추가\n this.a = 1\n this.b = 2\n\n // core this 객체에 모듈 추가\n if (!modules || modules === '*' || modules[0] === '*') {\n modules = []\n for (i in Sandbox.modules) {\n if (Sandbox.modules.hasOwnProperty(i)) {\n modules.push(i)\n }\n }\n }\n\n //필요한 모듈들 초기화\n for (i = 0; i < modules.length; i += 1) {\n Sandbox.modules[modules[i]](this)\n }\n\n callback(this)\n}\n\nSandbox.prototype = {\n name: 'seungdols Application',\n version: '1.0',\n getName: function() {\n return this.name\n },\n}\n\nSandbox('dom', 'hello', function() {\n console.log('hello')\n})스태틱 프로퍼티와 메서드란 인스턴스에 따라 달라지지 않는 프로퍼티와 메서드를 말한다.\n자바스크립트 언어에서는 스태틱 멤버를 지칭하는 문법이 지원 되지 않는다. 하지만, 생성자에 프로퍼티를 추가하여 구현할 수 있다.
\nvar Gadget = function() {}\n\nGadget.isShiny = function() {\n return 'you bet'\n}\n\nGadjet.prototype.setPrice = function(price) {\n this.price = price\n}위처럼 코드를 작성하면, 위험한 점이 존재하게 된다. Gadget.isShiny()를 호출 하면, 내부의 this는 Gadget 생성자를 가리키지만, 아래 코드에서는 위험하다.
\nvar iphone = new Gadget()\niphone.setPrice(1000)\n\ntypeof Gadget.setPrice\ntypeof iphone.isShiny스태틱 메서드가 인스턴스를 통해 호출 했을 때도 동작한다면, 편리한 경우가 있을 수 있는데, 이 때는 프로토타입에 메서드를 추가 하는 것만으로도 가능하다.\n그러나, 문제가 포함되어 있다.
\n스태틱 메서드 안에서 this를 사용할 떄 주의해야 한다. Gadget.isShiny()를 호출했을 떄는 isShiny()는 가젯 생성자를 가리키지만, iphone, isShiny()를 호출 했을 때는 this가 iphone을 가리키게 된다.
\n먼저 클로저 함수를 만들고, 비공개 멤버를 이 함수로 감싼 후, 이 함수를 즉시 실행한 결과로 새로운 함수를 반환하게 한다.
\nvar Gadget = (function() {\n var counter = 0\n return function() {\n console.log((counter += 1))\n }\n})()실제로 카운터 값을 인스턴스끼리 공유하는 것을 확인 할 수 있다.
\n객체에 연쇄적으로 메서드를 호출 할 수 있도록 하는 패턴이다.
\n양날의 검인듯 하지만, 알아 두면 좋을 듯한 패턴이다.\n메서드에서 return 할 때에 this를 리턴하면 체이닝이 가능해진다.
\n더글라스 크락포드가 고안한 클래스 기반의 언어에 적응한 사람들이 메서드를 구현하는 방식을 고안했다. 허나 이 방법을 추천하지는 않는다.
\n생성자 본문 내에 인스턴스 프로퍼티를 추가 할 수 있다. 그러나 this에 인스턴스 메서드를 추가하게 되면, 인스턴스 마다 메서드가 재생성 되어 메모리를 잡아 먹어 비효율적이다.
\nif (typoef Function.prototpye.method !== \"function\") {\n Function.prototype.method = function(name, implementation) {\n this.prototype[name] = implementation;\n return this;\n };\n}