본문 바로가기

분류 전체보기

 (229)
모듈화와 클래스생성(2) 클래스 라이브러리에 메소드 추가하기 var Class = function() { var klass = function() { this.init.apply(this, arguments); } klass.prototype.init = function() {} // 프로토타입의 단축형 klass.fn = klass.prototype; // 클래스의 단축형 klass.fn.parent = klass; // 클래스 프로퍼티 추가 klass.extend = function(obj) { var extended = obj.extended; for(var i in obj) { klass[i] = obj[i]; } if(extended) extended(klass) } // 인스턴스 프로퍼티 추가 klass.include..
모듈화와 클래스 생성(1) new 키워드는 return 문의 동작과 함수의 컨텍스트를 변경한다. var Person = function(name) { this.name = name; } var alice = new Person('devjones'); Person('grindman'); new 키워드를 붙이지 않고 Person('grindman')처럼 호출하면 놀랍게도 name 변수가 전역변수가 되고 함수는 undefined를 리턴한다. new 키워드를 이용해 생성자 함수를 호출하면 컨텍스트가 전역(윈도우)에서 만들려고 하는 인스턴스 전용의 새로운 빈 컨텍스트로 바뀐다. this 키워드는 현재 인스턴스를 가리킨다. 생성자 함수에서 return이 없으면 현재 컨텍스트를 가리키는 this를 리턴한다. 또는 기본형을 제외한 모든 타입을 ..
프로토타입 체이닝 자바스크립트에서 특정 객체의 프로퍼티나 메소드에 접근하려 할 때, 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]] 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티를 차례대로 검색하는 것을 프로토타입 체이닝 이라 한다. 기본 데이터 타입 확장 자바스크립트는 Object.prototype, String.prototype 등과 같이 표준 빌트인 프로토타입 객체에도 사용자가 직접 정의한 메소드들을 추가하는 것을 허용한다.
생성자 함수가 동작하는 방식 new 연산자로 자바스크립트 함수를 생성자로 호출하면, 1. 빈 객체 생성 및 this 바인딩 생성자 함수 코드가 실행되기 전 빈 객체가 생성된다. 바로 이 객체가 생성자 함수가 새로 생성하는 객체이며, 이 객체는 this로 바인딩된다. 따라서 이후 생성자 함수의 코드 내부에서 사용된 this는 이 빈 객체를 가리킨다. 하지만 여기서 생성된 객체는 엄밀히 말하면 빈 객체는 아니다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체와 연결되어 있으며, 이를 통해 부모 객체의 프로퍼티나 메서드를 마치 자신의 것처럼 사용할 수 있기 때문. 생성자 함수가 생성한 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 설정한다. 2. this를 통한 프로퍼..
this 바인딩 메소드내부에서의 this. -> this는 자신을 호출한 객체에 바인딩. 함수호출시 this 바인딩 -> 전역객체에 바인딩 -> 내부함수 역시 함수. 따라서 this는 전역 객체에 바인딩. -> 내부함수에서 this바인딩: var that = this; -> 제이쿼리에서, bind 메소드를 통해 사용자가 원하는 객체를 this에 바인딩할 수 있는 기능제공 생성자 함수 호출시 this 바인딩 var Person = function(name) { this.name = name; }; var foo = new Person('foo'); console.log(foo.name);// foo call과 apply 메소드를 이용한 명시적인 this 바인딩 apply메소드의 첫번째 인자에 this가 바인딩된다. cal..
함수 생성 자바스크립트는 다음과 같이 3가지 방법으로 함수를 생성한다. * 함수 선언문(function statement) * 함수 표현식(function expression) * Function() 생성자 함수 다음은 함수 리터럴이다. function add(x, y) { return x + y; } 함수 선언문과 함수 표현식의 경우 위 함수 리터럴을 사용한다. Function() 생성자 함수. var add = new Function('x', 'y', 'return x + y'); console.log(add(3, 4)); // 7
연산자 + 연산자 더하기, 문자열 연결. typeof 연산자 ==(동등, coercive) 연산자, ===(일치, strict) 연산자 == : 타입변환후 비교 === : 타입변경x 비교 !! 연산자 피연산자를 불린값으로 변환.
기본타입의 표준메소드 자바스크립트는 var num = 0.5; var str = 'string'; 과 같은 기본타입의 경우에도 표준메소드를 정의하고 있다. 표준메소드를 기본타입이 객체처럼 호출 가능하다.
배열(3) 배열 객체를 생성자함수로 생성가능하다. var arr = new Array(3); 유사 배열 객체 배열이 아닌 객체가 length 프로퍼티를 가지면, 그 객체를 유사 배열 객체라 부른다. 이들 객체는 객체주제에 배열 메소드(push(), pop()...) 사용이 가능하다. 그냥은 안되고 apply() 메소드를 사용해야 한다. length 또한 증가됨을 알 수 있다. ∴ 자바스크립트의 arguments 객체나 jQuery 객체가 유사 배열 객체이다.
배열(2) 배열 vs 객체 typeof 연산자: 배열, 객체 모두 object length 프로퍼티: 배열있음. 객체는 undefined. 배열 표준 메소드: 배열있음. 객체 undefiend. 객체의 프로토타입은 Object.prototype 배열의 프로토타입은 Array.prototype 그리고 Array.prototype의 프로토타입은 Object.prototype 배열도 객체다. 따라서 프로퍼티 추가가능. for in 문으로 열거할경우, 배열의 프로퍼티가 모두 출력된다. 따라서 배열의 요소만 출력하고싶은 경우 for 문을 이용한다. 배열도 객체라 delete 연산자를 사용할 수 있지만, undefined를 할당하는 작업이다. 따라서 요소의 완전한 삭제는 splice() 배열 메소드를 사용한다. splice(..

티스토리툴바