JavaScript의 함수 및 모듈 이해

Question

JavaScript에서 함수와 모듈을 더 잘 이해하려고합니다. 특히 내 자신의 데이터 형식을 만드는 가장 좋은 방법을 이해하고 있습니다. 아래에 Rectangle1.js와 Rectangle2.js라는 두 개의 파일 목록과이를 더 잘 이해하기 위해 만든 샘플 출력이 있습니다.

나는 내 자신의 데이터 유형을 만들기 위해 내 코드를 구조화하는 최선의 방법이 어떤 것인지 (또는 다른 방법으로) 이해할 수 있도록 커뮤니티의 도움을 받고 싶습니다.

Rectangle1.js

function Rectangle(x,y,w,h) { 
    width = w; 
    height = h; 

    this.area1 = function() { 
    return width*height; 
    } 
} 

Rectangle.prototype.area2 = function() { 
    return width * height; 
}; 

Rectangle.area3 = function() { 
    return width * height; 
} 

exports.Rectangle = Rectangle; 

Rectangle2.js struc의

var RECTANGLE = (function(my) { 
    function init(x,y,w,h) { 
    this.w = w; 
    this.h = h; 
    } 

    function area() { 
    return this.w * this.h; 
    } 

    my.init = init; 
    my.area = area; 
    return my; 
})(RECTANGLE || {}); 

exports.RECTANGLE = RECTANGLE; 

SAMPLE 상호

var r2 = require('Rectangle2.js'); 
r2.RECTANGLE.init(1,2,3,4); 
r2.RECTANGLE // ...can see the private properties 
r2.RECTANGLE.area() // returns 12 

var r1 = require('Rectangle1.js'); 
r1 // shows area3 in r1 
var rect = new r1.Rectangle(1,2,3,4); 
rect // shows area1 in rect 
rect.area1() // visible in methods, spits out 12 
rect.area2() // not visible in methods, spits out 12 
r1.Rectangle.area3() // not visible in rect, spits out 12 

Answer 1

바람직한 방법 자바 스크립트에서 객체를 튜링하는 것은 몇 가지 문제가 있지만 몇 가지 문제가 있지만 Rectangle1.js에서 작성한 객체에 더 가깝습니다.

생성자 함수에서 인수를 수락하면 인스턴스 변수에 할당하지 않고 다소 안전하지 않은 전역 범위는 Rectangle.area3()이 동일한 결과를 반환하는 이유를 설명합니다. this 키워드를 사용하면 인스턴스 변수를 지정하고 액세스 할 수 있습니다. 같은 다른 모든 것들을 유지, 당신은 오히려이 같은 생성자 (this.의 사용에주의)를 정의해야합니다 :

function Rectangle(x,y,w,h) { 

    this.width = w; 
    this.height = h; 

    this.area1 = function() { 
    return this.width*this.height; 
    } 
} 

Rectangle.prototype.area2 = function() { 
    return this.width * this.height; 
}; 

또한

, 이상적으로, 당신의 모든 인스턴스에 걸쳐 동일하게 재사용 될 함수를 정의 할 때 동일한 객체 인 경우에는 생성자 함수에서 this이 아닌 Rectangle.prototype에 정의하는 것이 더 좋습니다. 첫 번째 경우에는 하나의 Function 객체 만 만들어지고 Rectangle의 모든 인스턴스에 대해 공유됩니다. 후자의 경우 Rectangle의 모든 인스턴스에 대해 새 인스턴스가 만들어집니다.

구조 모듈은 Node.js와 같은 CommonJS와 같은 모듈에서 코드를 구성 할 수있는 자바 스크립트 플랫폼을 타겟팅 할 때 훌륭하게 사용합니다.