기록공간

자바스크립트 (JavaScript) 간단정리 본문

FrontEnd/JavaScript

자바스크립트 (JavaScript) 간단정리

입코딩 2020. 11. 21. 15:44
반응형

· 자바스크립트의 특징

                                                     
  1. 인터프리트 언어                                                   
     컴파일 과정이 필요없이 브라우저가 읽고... 해석하고... 실행한다.                     
  2. 동적 데이터타입                                                   
     모든 변수를 『var』로 선언하면 끝이다.                                    
     데이터 타입을 별도로 지정해 줄 필요가 없다.                                  
  3. 객체 지향 언어                                                   
     단, 자바와 다른 점은 클래스 개념을 사용하지 않으며                              
     프로토타입을 활용하게 된다. 

                                                              
· 직접적으로 많이 사용하는 용도

                                               
  1. 이벤트에 반응하는 동작의 구현                                           
  2. AJAX 를 통해 페이지 로딩 과정 없이 컨텐츠 연동이나 데이터 제출 가능                  
  3. HTML 엘리먼트 구조 / CSS 디자인 등을 동적으로 전환                          
  4. 사용자 입력 데이터에 대한 검증                                          
                                                            
· 자바스크립트 객체  

                                                    
  1. 내장 객체, 사용자 정의 객체                                           
     ※ 내장 객체는 생성자 함수가 미리 작성되어 있으며                               
        사용자 정의 객체는 사용자가 이 생성자 함수를 정의하는 것이다.                     
  2. 사용자 정의 객체                                                  
     ① 객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야 하는데...                    
        생성자라고 부르는 특별한 함수가 객체를 활성화 시키는데 필요하다.                    
        『var arr = new Array();』                                
     ② 생성자로 객체를 생성하기 위해서는                                       
        자바와 마찬가지로 『new』 연산자를 활용하게 된다.                           
     ③ 생성자(객체)의 이름은 첫 글자를 대문자로 표기한다.                            
     ④ 생성자 내부에 속성, 함수를 생성하기 위해                                  
        『this』 키워드를 사용한다.                                       
     ⑤ 객체의 멤버인 속성과 함수는 『.(dot)』 연산자로 접근한다.                      
     ⑥ 사용자 정의 객체를 만드는 기본 형식 및 구조                                
        (생성자를 구성하는 기본 형식 및 구조)                                  

function 생성자명(인자리스트) ← 생성자명의 첫 글자... 대문자     
{                                            
    // 속성 정의                                 
    this.멤버명 = 인자;                           
                                             
    // 메소드 정의                                
    // (동작)                                  
    this.멤버명 = function(인자리스트)               
    {                                        
    		// 메소드 내부 코드                        
    		...                                 
    		return 반환값;                         
    };                                       
}                                            

                                 
     ⑦ 프로토타입                                                    
        한 객체가 가지고 있는 속성과 메소드를                                   
        다른 객체(혹은 다른 여러 객체)가 공유할 수 있도록 지원하는 개념                   
        ex)

function Car(x, y)                              
{                                               
    this.x=x;                                   
    this.y=y;                                   
                                                
    this.getDistance = function()               
    {                                           
        return (this.x * this.x + this.y * this.y);
    }                                                                                          
}                                               

                  
       → 이 코드가 자동차(Car)를 나타내는 객체라고 가정한다.                        
          여기서 『getDistance()』는 최초 위치부터 거리를 계산하는 함수라고 가정한다.      
          이 때, 여러 대의 자동차를 사용하는 경우...                                                        

var c1 = new Car(10, 20)
var c2 = new Car(10, 40)
	:                   


         이와 같은 구문을 활용하여 객체를 생성했다면...                            
         객체들마다 『getDistance()』 메소드(함수)를 가지게 되면서                 
         메모리 낭비를 초래하게 된다.                                       
                                                                
         이 때... 객체들마다 메소드(함수)를 가지는 것이 아니라                       
         하나의 메소드(함수)를 만들어 공유하기 위해                               
         프로토타입을 정의하게 된다.                                        
                                                                
         ※ 모든 객체는 프로토타입이라는 숨겨진 객체를 포함하고 있다.                     
            『Car』 객체의 프로토타입은 『Car.prototype』이라는                 
            숨겨진 객체를 갖고 있다는 것이다.                                 

function Car(x, y)                          
{                                           
	this.x=x;                               
	this.y=y;                               
}                                           
                                            
// 메서드가 필요할 때에만 메모리에 퍼올려주도록 한다.             
Car.prototype.getDistance = function()      
{                                           
   return (this.x * this.x + this.y * this.y
}                                           
                                            
// 메서드가 필요할 때에만 메모리에 퍼올려주도록 한다.             
var c3 = new Car(10, 80);                   
c3.getDistance();                           

                                  

반응형

'FrontEnd > JavaScript' 카테고리의 다른 글

로컬 스토리지(Local Storage)  (0) 2021.04.20
<script>를 <body> 맨 뒤에 삽입하는 이유?  (0) 2021.04.19
바닐라 자바스크립트(Vanilla JS)란?  (0) 2021.04.19
AJAX 정리  (0) 2020.12.09
jQuery(제이쿼리) 정리  (0) 2020.12.09
Comments