본문 바로가기

Javascript

(5)

Class 클래스 Class 자바스크팁트는 프로토타입 기반의 객체지향 언어입니다. static method or static properties 프로터타입에 할당되지 않고 생성자 함수 객체에 직접 할당되어있는 프로퍼티와 메소드를 static method, static properties라고 합니다. 생성자 함수를 new 연산자 없이 함수로써 호출할 때 사용됩니다. 인스턴스가 직접적으로 접근할 수 없습니다. prototype method 생성자 함수 프로토타입 내부에 할당된 메소드들을 prototype method라고 합니다. 인스턴스가 직접적으로 접근할 수 있습니다. 상속 상속을 사용하여 코드의 재사용성을 높일 수 있습니다. ES5 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현할 수 있습니다. ..

객체 지향 Prototype 객체지향 프로그래밍 OOP(Object Oriented Programming) 이란? 서로 관련 있는 데이터와 함수를 객체(하나의 역할을 수행하는 메소드와 변수의 묶음)로 정의해서 서로 상호작용할 수 있도록 프로그래밍해나가는 것을 의미합니다. 각 객체는 메시지를 받을 수 있고, 데이터를 처리할 수도 있으며, 또 다른 객체에게 메시지를 전달할 수도 있습니다. 자바스크립트는 prototype을 기반으로 객체지향 프로그래밍을 해나갈 수 있습니다. 객체지향을 사용하면 중복되는 관련 객체를 재사용할 수 있어 중복을 어느 정도 줄일 수 있고, 관련 있는 객체들의 역할 분담을 좀 더 확실하게 할 수 있어 가독성이 높아지고 생산성과 유지보수 및 확장성이 높아집니다. 생성자 함수와 인스턴스 생성 자바스크립트는 new 연..

Javascript This 자바스크립트에서 this는 실행 컨텍스트가 생성될 때 바인딩됩니다. 즉, 함수가 호출될 때 this가 결정된다는 것입니다. 아래 소스를 보면 어떻게 호출했느냐에 따라 this가 달라집니다. var student = { name: "jennie", myName: function () { console.log(this.name); }, }; var myName = student.myName; myName(); // undefined student.myName(); // jennie 결과가 다른 이유는 myName()은 함수로 호출을 했고 student.myName()는 메소드로 호출했기 때문입니다. 함수 호출 시 모든 객체는 전역 객체의 프로퍼티입니다 전역 컨텍스트를 실행하는 주체는 전역 객체입니다. 모든 ..

실행 컨텍스트 실행 컨텍스트란? 자바스크립트가 실행되는 환경으로 함수를 실행할 때 필요한 조건, 환경정보를 제공하는 객체입니다. 실행 컨텍스트를 이해하면 Scope, hoisting, closure, this와 같은 중요한 동작을 이해할 수 있습니다. 실행 컨텍스트의 내부 var a = 1; function outer() { console.log(a); // 실행 순서(1): 1출력 function inner() { // var a; --> undefined (호이스팅) console.log(a); // 실행 순서(2): 1출력 var a = 3; } inner(); console.log(a); // 실행 순서(3): 1출력 } outer(); console.log(a); // 실행 순서(4): 1출력아래는 위 코드를..

데이터 타입(원시형 vs 참조형) 자바스크립트에서 데이터 타입에는 아래와 같이 원시형과 참조형으로 나뉩니다. 자바스크립트 메모리 구조는 스택 메모리(정적 할당, 변수, 원시형 데이터 저장)와 힙 메모리(동적 할당, 참조형 데이터, 저장) 영역으로 나뉘어 있습니다. 원시형(Primitive Type) 객체를 제외한 모든 타입은 원시 값(불변 값)으로 값을 그대로 할당합니다. boolen null undefined number string symbol (ES6) 아래와 같이 newName에 name을 할당하고 다시 "jennie"로 값을 재할당 한 후 name과 newName을 확인해 보면 데이터의 불변성(newName의 값을 재할당 해도 name의 값이 변하지 않음)을 확인할 수 있습니다. let name = "sara"; let newN..

이전 1 다음

티스토리툴바