JavaScript/JavaScript기초 (35) 썸네일형 리스트형 [Javascript] 프로토타입 메서드 프로토 타입 메서드 객체에 상속을 추가해주는 __proto__ 는 예전 방식이므로 사용을 지양하는 것이 좋음 __proto__ 대신 아래의 프로퍼타입 메서드를 사용하여 상속받을 객체를 추가 Object.create(obj, [descriptors]) : [[Prototype]]이 obj를 참조하는 새로운 빈 객체를 만듬. 이때 프로퍼티 설명자를 추가로 넘길 수 있음. Object.getPrototypeOf(obj) : obj의 [[Prototype]]을 반환합니다. Object.setPrototypeOf(obj, proto) : obj의 [[Prototype]]이 proto가 되도록 설정합니다. let parentsObj = { a:1 } //parentsObj를 상속받는 createObj를 생성 let.. [Javascript] 함수의 prototype 함수의 prototype 프로퍼티 함수를 new 연산자를 통해 생성하면 객체가 생성됨 함수를 객체로 생성 전 함수.prototype = obj 로 생성될 객체의 [[prototype]]를 설정할 수 있음 function myFunc(a,b){ this.a = a; this.b = b; } let obj = { c:3, d:4 } //Function.prototype를 이용하여 obj를 참조시킴 myFunc.prototype = obj //new 연산자를 이용하여 함수를 객체로 생성 let myFuncObj = new myFunc(1,2); for(let key in myFuncObj) console.log(`${key} : ${myFuncObj[key]}`); myFunc에 obj가 참조된 것을 볼 수 .. [Javascript] 프로토타입 상속 [[prototype]] 자바스크립트에서 객체는 [[prototype]] 라는 숨겨저있는 프로퍼티를 가지고 있음 [[prototype]] 의 값은 null 또는 다른 객체의 참조가 되는데, 이 참조가 되는 대상을 '프로토타입(prototype)' 라고 함 자바스크립트에서는 객체가 프로퍼티를 읽으려고 할때 존재하지 않으면 [[prototype]]에서 참조하고 있는 객체에서 프로퍼티를 자동으로 찾음. 이러한 동작 방식을 '프로토타입 상속' 이라고 함 [[prototype]] 를 통해 다른 객체를 참조하려면 [[prototype]]의 getter, setter 인 __proto__ 를 통해 참조할 수 있음 let person = { name:'park', age:25 } let co_worker = { pos.. [Javascript] 프로퍼티 getter/setter 데이터 프로퍼티와 접근자 프로퍼티 프로퍼티의 종류는 데이터 프로퍼티(data property)와 접근자 프로퍼티(accessor property)로 나뉨 지금까지 사용했던 모든 프로퍼티는 데이터프로퍼티이고 접근자 프로퍼티는 본질이 함수인데, 값을 얻고(get) 설정(set) 할 수 있음 외부에서 접근자 프로퍼티를 볼때는 함수가 아닌 일반적인 프로퍼티로 보임 getter와 setter 접근자 프로퍼티는 getter와 setter로 나눌 수 있음 객체의 리터럴 안에서 get, set으로 표현되고 객체를 호출할때는 getter가, 객체에 값을 할당할때는 setter가 자동으로 실행됨 let obj = { firstName:'ns', lastName:'park', get myName(){ return this... [Javascript] 프로퍼티 플래그와 설명자 프로퍼티 플래그 객체의 프로퍼티는 값과 함께 플래그(flag)라고 하는 특별한 속성을 3가지 가지고 있음 3가지 플래그 writable : 이 속성이 true이면 값을 수정할 수 있고, false이면 수정이 불가능함 enumerable : 이 속성이 true이면 반복문을 사용하여 나열할 수 있음 configurable : 이 속성이 true이면 해당 프로퍼티를 삭제하거나 플래그 수정이 가능함 일반적인 방식으로 객체 생성시 위 3가지 플래그의 기본값은 true로 설정되고 플래그를 수정할 수 있음 Object 의 getOwnPropertyDescriptor 메서드를 사용하면 해당 프로퍼티의 정보를 얻을 수 있음 getOwnPropertyDescriptor의 문법 let descriptor = Object.g.. [Javascript] 함수 바인딩 함수 바인딩 setTimeout과 같은 메서드를 이용하여 객체 메서드를 실행시킬 때 아래와 같이 this 의 컨텍스트를 잃어버림 let obj = { name:'park', printName(){ console.log('name: '+ this.name); } } setTimeout(obj.printName,1000); 이러한 이유는 setTimeout 에 obj에서 분리된 printName이라는 함수가 전달되기 때문임 setTimeout을 이용해 함수를 호출할 때 함수의 this는 window가 할당되므로 위의 호출한 함수의 this는 obj가 아니라 window가 되므로 this.name 프로퍼티의 값이 할당되지 않았음 래퍼 이러한 문제를 해결하기 위한 방안으로 첫번째는 래퍼함수를 사용 let obj.. [Javascript] 데코레이터, 포워딩과 call/apply 데코레이터를 이용하여 캐싱 기능 추가 데코레이터란 함수의 인수로 받은 함수의 행동을 변경시켜 주는것을 의미함 아래 코드는 데코레이터 함수를 이용하여 특정 함수에 캐싱 기능을 추가 function myFunc(num){ console.log(`${num}을 호출함`); return num * num; } // num을 호출받아서 num * num 의 결과를 리턴해주는 함수 function decoFunc(func){ // 함수의 cache를 생성해주는 데코레이터 let cache = new Map(); //캐시를 저장할 맵 생성 return function(num){ if(cache.has(num)){ //인수로 받은 num 키가 있을경우 return cache.get(num); //캐시에서 값을 불러옴 .. [Javascript] setTimeout과 setInterval 호출 스케줄링 일정시간이 지난 후 원하는 함수의 호출을 예약하는 것을 호출 스케줄링(scheduling a call) 이라고 함. setTimeout과 setInterval을 이용하여 호출 스케줄링을 실행할 수 있지만 두 함수는 아래와 같은 차이가 있음. setTimeout: 일정시간이 지난 후 함수를 한번 호출함 setInterval: 일정시간 간격을 두어 함수를 지속적으로 호출함 setTimeout setTimeout은 아래와 같이 사용할 수 있음 setTimeout( func[ , dely, arg1, arg2 ... ] ) func: 전달할 함수 delay: 실행 전 대기시간. miliseconds 단위 (기본값은 0) arg: 함수에 전달할 인자 setTimeout으로 몇초후 실행되었는지 콘솔에.. 이전 1 2 3 4 5 다음
