javascript patterns - chapter 3. literals and constructors
Post on 23-Jun-2015
681 Views
Preview:
DESCRIPTION
TRANSCRIPT
3리터럴과 생성자JavaScript Patterns
시작 하면서
• 객체, 배열, 정규식 등의 리터럴에 관해
• 함수에 비해 리터럴 표기법을 쓰는 게 더 좋은 이유
• 사용자 정의 생성자
• “생성자 사용을 자제하고 리터럴 표기법을 사용하라!”
1 객체 리터럴
• 이름-값 쌍의 해시 테이블
• 다른 언어의 ‘연관 배열’과 유사
• 함수가 값이 되면 메서드
// 빈 객체에서 시작한다.var dog = {};
// 프로퍼티 하나를 추가한다.dog.name = "Benji";
// 이번에는 메서드를 추가한다.dog.getName = function () { return dog.name; };
프로퍼티와 메서드 값을 변경할 수 있다.dog.getName = function () { // 메서드가 하드코딩된 값을 반환하도록 재정의한다. return "Fido";};
프로퍼티나 메서드를 완전히 삭제한다.delete dog.name;
다른 프로퍼티나 메서드를 추가한다.dog.say = function () { return "Woof!";};dog.fleas = true;
객체 리터럴 표기법
var dog = { name: "Benji", getName: function() { return this.name; }};
빈 객체
• 완벽히 빈 객체는 없다.
• {} 객체조차도 이미 Object.prototype에서 상속
• “비어있다” = 상속받은 것 외 프로퍼티가 없다.
객체 리터럴 문법 규칙
• 객체를 중괄호로 감싼다. ({ 와 })
• 객체 내의 프로퍼티와 메서드를 쉼표로 분리한다.마지막 이름-값 쌍 뒤에 쉼표가 들어가면 IE에서는 에러가 발생한다.
• 프로퍼티명과 프로퍼티 값은 콜론으로 분리한다.
• 객체를 변수에 할당할 때는 닫는 중괄호 뒤에 세미콜론을 빼먹지 않도록 하라.
생성자 함수로 객체 생성하기
// 첫 번째 방법 - 리터럴 사용var car = { goes: “far };
// 다른 방법 - 내장 생성자 사용// 경고: 이 방법은 안티패턴이다.var car = new Object();car.goes = “far”;
짧다! 유효범위 판별 과정이 없다!
객체 생성자의 함정
• Object() 생성자가 인자를 받을 수 있다.
• 안티패턴으로 알아보자.
// 빈 객체var o = new Object();console.log(o.constructor === Object); // true
// 숫자 객체var o = new Object(1);console.log(o.constructor === Number); // trueconsole.log(o.toFixed(2)); // "1.00"
// 문자열 객체var o = new Object("I am a string");console.log(o.constructor === String); // true// 일반적인 객체에는 substring()이라는 메서드가 없지만 문자열 객체에는 있다.console.log(typeof o.substring); // "function"
// 불린 객체var o = new Object(true);console.log(o.constructor === Boolean); // true
2 사용자 정의 생성자 함수
• 자바에서 클래스를 사용하여 객체를 생성하는 방식과 유사하지만,
• 자바스크립트에서는 그저 함수일 뿐이다.
var Person = function(name) { this.name = name; this.say = function() { return "I am " + this.name; };};
var adam = new Person("Adam");adam.say(); // "I am Adam"
var Person = function(name) { // 객체 리터럴로 새로운 객체를 생성한다. // var this = {};
// 프로퍼티와 메서드를 추가한다. this.name = name; this.say = function() { return "I am " + this.name; };
// this를 반환한다. // return this;};
var adam = new Person("Adam");adam.say(); // "I am Adam"
생성자의 반환 값
• 생성자는 암묵적으로 this를 반환
• 반환 값을 따로 정할 수 있다. (단, 객체만)
• 객체가 아니라면?무시되고 this를 반환한다.
var Objectmaker = function() { // 생성자가 다른 객체를 대신 반환하기로 결정했기 // 떄문에 다음의 'name' 프로퍼티는 무시 this.name = "This is it";
// 새로운 객체를 생성하여 반환 var that = {}; that.name = "And that's that"; return that;};
// 테스트해보자var o = new Objectmaker();console.log(o.name); // "And that's that"
3 new를 강제하는 패턴
• 실수 가능한 케이스 : new를 빼먹는다.
• 생성자에서 반환하는 this가 전역객체를 가리키게 되어버림
// 생성자function Waffle() { this.tastes = "yummy";}
// 새로운 객체var good_morning = new Waffle();console.log(typeof good_morning); // "object"console.log(good_morning.tastes); // "yummy"
// 안티패턴:// 'new'를 빼먹었다.var good_morning = Waffle();console.log(typeof good_morning); // "undefined"console.log(window.tastes); // "yummy"
// 생성자function Waffle() { this.tastes = "yummy";}
// 새로운 객체var good_morning = new Waffle();console.log(typeof good_morning); // "object"console.log(good_morning.tastes); // "yummy"
// 안티패턴:// 'new'를 빼먹었다.var good_morning = Waffle();console.log(typeof good_morning); // "undefined"console.log(window.tastes); // "yummy"
ECMAScript 5스트릭트 모드에서는 this가 전역객체를 가리키지 않도록 처리
명명 규칙
• 생성자 함수명 : 첫글자는 대문자
• 일반 함수와 메서드 : 첫글자는 소문자
that 사용function Waffle() { var that = {}; that.tastes = "yummy"; return that;}
문제점 : 프로토타입과의 연결고리를 잃어버림
스스로를 호출하는 생성자
function Waffle() { if ( !(this instanceof Waffle) ) { return new Waffle(); }
this.tastes = “yummy”;}Waffle.prototype.wantAnother = true;
스스로를 호출하는 생성자
function Waffle() { if ( !(this instanceof arguments.callee) ) { return new Waffle(); }
this.tastes = “yummy”;}Waffle.prototype.wantAnother = true;
ECMAScript 5 Strict Mode
4 배열 리터럴
// 세 개의 원소를 가지는 배열// 경고: 안티패턴var a = new Array("itsy", "bitsy", "spider");
// 위와 똑같은 배열var a = ["itsy", "bitsy", "spider"];
console.log(typeof a); // 배열도 객체이기 때문에 "object"가 출력console.log(a.constructor === Array); // true
배열 생성자의 특이성// 세 개의 원소를 가지는 배열을 생성var a = new Array(3);console.log(a.length); // 3console.log(typeof a[0]); // “undefined”
// RangeError가 발생var a = new Array(3.14);console.log(typeof a); // “undefined”
배열인지 판별하는 방법
// ECMAScript 5 지원하지 않는 경우if (typeof Array.isArray === "undefined") { Array.isArray = function (arg) { return Object.prototype.toString.call(arg) === "[object Array]"; };}
Array.isArray([]); // true
5 JSON
• 프로퍼티명은 따옴표로 감싸야 한다.
• 함수나 정규식 리터럴은 사용할 수 없다.
JSON 다루기
•JSON.parse()
•JSON.stringify()
•json.org
6 정규 표현식 리터럴
// 정규식 리터럴var re = /\\/gm;
// 생성자var re = new RegExp("\\\\", "gm");
정규 표현식 리터럴 문법function getRE() { var re = /[a-z]/; re.foo = "bar"; return re;}
var reg = getRE(), re2 = getRE();
console.log(reg === re2); // truereg.foo = "baz";console.log(re2.foo); // "baz"
정규 표현식 리터럴 문법function getRE() { var re = /[a-z]/; re.foo = "bar"; return re;}
var reg = getRE(), re2 = getRE();
console.log(reg === re2); // truereg.foo = "baz";console.log(re2.foo); // "baz"
ECMAScript 5리터럴을 사용해도 새로운 객체가 생성
7 원시 데이터 타입 래퍼
•Number()
•String()
•Boolean()
// 원시 데이터 타입 문자열을 객체로 사용var s = "hello";console.log(s.toUpperCase()); // "HELLO"
// 값 자체만으로도 객체처럼 동작"monkey".slice(3, 6); // "key"
// 숫자도 마찬가지(22 / 7).toPrecision(3); // "3.14"
// 프로퍼티 확장은 불가능var greet = “Hello there”;greet.smile = true;typeof greet.smile; // “undefined”
// new를 사용하지 않을 경우 원시 데이터 타입으로 변환typeof Number(1); // “number”typeof Number(“1”); // “number”typeof String(1); // “string”
8 에러 객체
• 기본 프로퍼티
• name : 객체를 생성한 생성자 함수의 name 프로퍼티
• message : 객체를 생성할 때 생성자에 전달된 문자열
• throw문은 에러 객체 외 직접 정의한 객체도 사용 가능
try { // 에러를 발생시킨다. throw { name: "MyErrorType", // 임의의 에러 타입 message: "oops", extra: "This was rather embarrassing", remedy: genericErrorHandler // 에러를 처리할 함수 };} catch(e) { // 사용자에게 공지한다. alert(e.message); // "oops" // 훌륭하게 에러를 처리한다. e.remedy(); // genericErrorHandler() 호출}
요약
• Date() 생성자를 제외하고 내장 생성자를 쓸 일은 거의 없다.
리터럴 패턴 > 생성자 함수
top related