JavaScript 객체지향 방법과 차이점_js 객체지향

첫 번째: 이 키워드를 사용하세요

function Class1()
{
this.onclick = function(e)
{
for (var i=0; i                                                                                                 속성 추가 및 메서드가 있으며 대부분의 OOP 언어와 마찬가지로 런타임에 추가할 수도 있습니다.

두 번째: 프로토타입 키워드 사용

function clickFunc(e)
{
for (var i=0; i {
var a = new Date()
}
}

function Class2()
{
}

Class2.prototype.onclick = clickFunc;

이 사용법은 첫 번째 사용법만큼 유연하지 않습니다. 그러나 새로운 객체가 나오기 전에 언제든지 객체의 속성과 메서드를 추가할 수도 있습니다.

하지만 상대적으로 보면 첫 번째 방법이 상대적으로 집중적이고 코드를 읽기 쉽기 때문에 첫 번째 방법을 선호합니다. 그러나 달릴 때는 달리기 효율성이 상당히 다릅니다. 아래 테스트 코드를 살펴보겠습니다.

var total = new Array();

function Test1()
{
var a = new Date()
for (var i=0; i {
var c = new Class1()
//total.push(c); b = new Date();
Alert(b.getTime()-a.getTime())
}

function Test2() {
var a = new 날짜 ();
for (var i=0; i {
var c = new Class2()
//total.push(c); }
var b = new Date();
Alert(b.getTime()-a.getTime());
}

첫 번째 단계는 실행 시간을 테스트하는 것입니다. find Test1()은 142ms가 걸리는 반면 Test2()는 50ms만 소요됩니다. 시간 효율성 측면에서 프로토타입 방법이 이보다 더 효율적입니다.
두 번째 단계는 메모리 사용량을 테스트하는 것입니다. total.push(c); 줄에서 주석을 제거해야 합니다. 주석을 배열에 추가해야 하는 이유는 생성 시 객체가 많아지는 것을 방지하기 위해서입니다. , 참조되지 않은 객체는 GC입니다. 첫 번째 방법은 20~30M의 메모리를 차지하는 반면, 두 번째 방법은 100K 이상만 필요로 하기 때문에 그 차이는 그리 크지 않은 것으로 나타났습니다.

원인 추론:
이 두 코드를 처리할 때 첫 번째 코드인 JS 파서가 객체별로 별도의 메소드를 생성하여 메모리 오버헤드가 증가하고 메소드를 생성하면 실행 시간이 늘어납니다. 둘째, JS 파서는 대부분의 OOP 컴파일러와 마찬가지로 객체의 데이터 세그먼트와 메소드 세그먼트를 별도로 저장합니다. 객체의 전용 데이터의 경우 각 객체마다 하나의 복사본이 있으며 이러한 메소드는 공용 메소드 섹션에 넣습니다. 실행 시간과 메모리 오버헤드를 줄입니다.