본문 바로가기

자바스크립트

 (52)
자바스크립트 new를 이용한 객체 생성 과정 Cons() { this.value = 'value'; } var c = new Cons(); 1. new는 빈객체를 만든다. { } 2. this는 이 객체를 가리키게 된다. 3. Cons 함수가 실행된 다음에 자동으로 this가 return 된다. 그리하여 c는 this를 참조하게 되고 c.value로 생성된 객체의 'value' 값을 불러올 수 있다.
자바스크립트 함수 내부의 변수는 private이다? private 구현하는 법 아래의 함수에 접근하는 방법은 function func() { var value = 'private'; } func()로 호출하는 방법 뿐이다. new 연산자를 붙여 객체를 생성할 수도 있다. const obj = new func(); 그러나 내부의 value에는 접근할 수 없다. func()로 호출하면 내부 컨텍스트에서만 실행되고 말 뿐이고 new func()로 obj에 객체로 담는다고 해도 func() 실행시 value는 'private' 값을 담고 더 이상 쓰이지 못하기 때문에 바로 가비지 컬렉터로 간다? (이거는 확신하지 못하겠다.) 다만 value를 클로저에서 가져다 쓴다면 남겨둘 수 있다. (클로저란 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수다.) 때문에 함수 내부의 변수는 pr..
클래스 사용법과 2가지 상속 (class, pseudoclassical) 기본 규칙 class는 사실 함수와 같다. 그러나 class 선언은 함수 선언과 달리 호이스팅이 일어나지 않는다. 때문에 선언되기 전에 사용하면 오류가 발생한다. 또 엄격 모드에서만 사용할 수 있다. class의 내부에 선언한 함수 앞에 static을 붙이면 인스턴스를 생성하지 않고도 사용할 수 있다. 대신 인스턴스를 통해서 사용할 수는 없다. class Book { static nextPage() { } } Book.nextPage(); // 가능 const book = new Book(); book.nextPage(); // 불가능 인스턴스의 속성은 일반 객체와 달리 클래스 메소드 안에 정의돼야 한다. 상속 클래스를 이용한 상속은 다음과 같다. class Human { constructor(name)..
프로토타입 체인 예제 위 예제에서의 p.number는 링크된 Cons.prototype.number를 호출하지만 아래 예제에서는 p.number에 10을 넣은 순간부터 p.number를 호출 했을 때 프로토타입 체인에 의해 밑에서부터 number 변수를 찾으면 p에 이미 number 변수를 찾을 수 있기 때문에 10이 호출된다.
객체지향 프로그래밍이란? 자바스크립트에서 객체를 생성하는 4가지 방법, 프로토타입은 무엇이고 왜 사용해야하는가? 객체지향 프로그래밍이란? 철학적인 개념과 닮아 있어 어렵게 느껴지는 것 같다. 객체를 쉽게 말하자면 세상 곳곳에 있는 사물이라고 비유할 수 있다. 예를 들어 책에는 책만의 네모진 형태가 있고, 종이로 돼 있고, 겉 표지가 있고, 한 장씩 넘길 때마다 새로운 내용이 나오는 등의 공통된 속성이 있다. 여기에 세부적으로 크기는 어떤지, 종이 재질은 어떤지, 디자인은 어떤지, 내용은 어떻느냐에 따라서 개별 책들이 정의된다. 프로그래밍에서도 공통으로 묶을 수 있는 요소들이 존재하고 개별 사물들이 그러하듯 이 공통된 요소들에 저마다의 다른점들을 붙여 다양한 것들을 만들 수 있다. 책을 정의할 수 있는 공통된 요소들과 각 책을 구분할 수 있게 해주는 요소들이 합쳐져 개별 책이 되는 것이다. 전자는 모든 책에 적용되는..
자바스크립트 div 엘리먼트를 스크린샷해서 이미지 파일로 만들기 이미지 파일의 속성에 따라서 안 되는 경우도 있으니 구글링해서 해결해야 한다. 로컬 드라이브에 있는 이미지 파일은 crossorigin="anonymous"을 쓰면 안 되는 것 같다. // 스크린샷을 할 div 엘리먼트를 가져온다. width와 height가 설정돼 있어야 한다. const captureDiv = document.getElementById('captureDiv'); // 버튼 등을 이용해서 적당한 때 함수를 호출한다. makeDivToImageFile(captureDiv); function saveAs(url, fileName) { const link = document.createElement('a'); link.href = url; link.download = fileName; doc..
자바스크립트 그림 그리기 - canvas save 1. 그리기 기능 // 초기값 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; context.strokeStyle = 'black'; context.lineWidth = 1; // path를 생성했는지 여부 let hasPath = false; function onMouseMove(event) { const x = event.offsetX; const y = event.offsetY; if(!hasPath) { // path 생성 context.beginPath(); // path의 좌표 지정 context.m..
자바스크립트 사용자의 위도와 경도 구하기 function showLocation(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; console.log(latitude, longitude); // 위도와 경도를 보여준다. } function errorHandler() { } // 성공했을 때 showLocation 함수를 반환하고 // 실패했을 때 errorHandler 함수를 반환한다. navigator.geolocation.getCurrentPosition(showLocation, errorHandler);

티스토리툴바