목록Programming language/JavaScript (32)
For Programmer

call 이란? * call은 어떠한 함수를 실행할때마다 인자를 지정해줘서 this값을 해당 인자로 바꾸는 것을 말한다.따라서 this를 설정해주는 메서드라고 생각하면 된다. 함수.call(해당 함수 this에 들어갈 인자 , 해당함수의 파라미터 .....) 형식이다. bind란? *어떤 함수의 this값을 영구적으로 고정시켜주는 새로운 함수를 만들어내는것을 말한다. call과는 거의 비슷하지만 var kimSum = sum2.bind(kim, 인자,인자..) 와같이 새로운함수로 반환해준다는 것만 기억하면된다. 구조는 똑같다. call 메서드를 활용한 상속 *함수도 객체이기때문에 상속할때 객체상속방식을 이용할 수있다.(1st,2nd방식) 또한 기본적으로 많이쓰는 방식은 3th상속방식이다. * 상속에서 에..

* __proto__ 이용하기 *__proto__는 표준으로 체택된방식은아니다. 또한 Object.create와도 공통된 점인데 객체는 상속을 받고 부모의 객체 프라퍼티 값을 변경해도 부모 객체의 프라퍼티에는 적용이 안된다. __proto__예제 Object.create(상속받을 부모객체 이름) 이용하기 * debugger; 기능은 코드의 흐름을 막아서 실행후 f5를 눌러 크롬 웹사이트에서 f12 -> source -> Watch로 원하는 변수의 상속관계등을 파악할 수 있다. * Object.create()도 상속을 하고나서 자식의 프라퍼티값을 이용하여 부모의 프라퍼티값을 변경을해도 부모의 프라퍼티값에 직접적인 변경이 발생하지 않는다. Object.create(상속받을 부모객체 이름) 예제

클래스 사용하기 *일반적인 함수와 class를 비교해놓은 코드이다. 실제로 es6문법이 도입되면서 class를 많이사용하게 되었다. class는 자바와 비슷하게 생성자(constructor)가 존재하며 생성자는 var kim = new Person('kim',10,20); 과 같이 new라는 키워드를 통해 객체를 생성할 시 생성할때 한번 실행된다. 클래스에서 메서드 선언하기 * 클래스에서 메서드를 선언할 수있는 방법은 다양하다. 웬만하면 2nd선언 방식을 많이사용한다. 1st방식은 생성자 안에서 사용하는 방식이고 2nd방식과 3th방식은 완전히 동일한 생성방식이다. 단 2nd방식이 간편함으로 2nd방식을 많이 사용한다. 4th방식은 kim이라는 객체에 직접 생성하는 방식이다. 단, 같은 이름으로(sum4..

프로토타입 이해하기 *Person() 함수를 이용해서 객체를 생성하게 되면 sum() 함수도 무조건 같이 생성되게 된다. 이는 메모리낭비를 가져올 수 있으며 이때 사용가능한 것이 prototype이다. prototype은 함수만 가지고 있는데 .prototype을 이용하여 함수는 prototype Object을 가지게 된다. prototype Object라는 것은 빈공간이라고 생각하면된다. 객체는 new라는 생성자를 통해 생성하게 되면 무조건 __proto__라는 속성을 가지게 되는데 이는 조상이었던 함수의 Prototype Object를 가리키게 된다. 즉, 객체가 생성되면서(var lee = new Person2()) 위 sum()이라는 함수를 찾기 위해 우선 자기자신부터 그 위의 조상 , 그리고 O..

원시데이터 타입 레퍼객체란? 자바스크립트에서 값의 복사와 참조 * 원시데이터(String,number,bollean) 일때는 대입할 때 값의 복사가 일어나고(1번) 객체를 가리키고있는 변수를 대입할때는 값의 참조(2번)가 일어난다. 이때는 값이 참조가 되기 때문에 객체 c를 변수 d에 넣었을 경우 d의 내부 id값을 변경할 경우 c의 내부 id값도 변경이 발생한다. 단, 새로운 객체를 생성할 경우(3번) 이름이 같다고 할지라도 다른 객체이다. 함수에서의 값의 참조 *b의 id값을 변경하지만 b에는 a객체가 대입이 되기때문에 a의 id값의 변경이 발생한다.

자바스크립트에서는 함수도 객체이다. Object객체란? * 자바스크립트의 모든 객체는 Object 객체를 상속 받는데, 그런 이유로 모든 객체는 Object 객체의 프로퍼티를 가지고 있다. Object객체의 API 사용 * Object객체의 내부 메서드 contain를 생성하여 모든 객체들은 Object객체를 상속받기때문에 모든 객체들은 contain메서드를 사용할 수있다. Object 객체를 직접 커스터마이징 할경우 발생할 수있는 문제 *위의 코드를 바탕으로 객체 o 를 for in 문으로 출력해보면 다음과같이출력이 된다. *object는 모든객체의 부모이기때문에 object의 prototype에 메서드를 커스터마이징할경우 모든 객체는 for in문으로 출력시 해당 함수도 같이출력하게된다. (원래 상속..

내장객체의 종류 *기본적으로 자바스크립트는 해당객체를 지원하고 있으며 호스트환경에 따라 더추가적으로 지원된다. 추가적인 내장객체는 공식문서에서 확인하자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 표준 내장 객체 이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다. developer.mozilla.org 내장객체를 이용하여(array함수) 내장객체 함수를 커스터마이징 해보기 * 1번은 기본적인 함수 생성방식을 이용하여 배열의 내부원소에 랜덤으로 접근하는 함수를 만든것이다. 2번은 Array라는 생성자 함수의 prototype에 직접접근하여 array 내부메서드를 만들어 배열의 ..