JavaScript : 프로토 타입을 사용하는 대신 생성자에서 함수 정의 - 차이점은 무엇입니까?

Question

저는 자바 스크립트 전문가는 아니며 코드의 두 가지 스 니펫 사이에 어떤 차이가 있는지 이해하려고합니다. TypeScript로 변환하려는 프로젝트가 있고 두 코드 조각 사이의 차이점을 이해해야합니다.

var Pony = (function() { 
    function Pony() { } 
    Pony.prototype.bite = function() { 
     alert("Chomp!"); 
    }; 
    return Pony; 
})(); 

var Pony2 = (function() { 
    function Pony2() { 
     var self = this; 
     self.bite = function() { 
      alert("Chomp!"); 
     }; 
    } 
    return Pony2; 
})(); 

Answer 1

둘 사이의 차이점은 var에 포니에 저장된 객체에 속성을 통해 처음 포니의 프로토 타입을 얻을 수 있습니다 어디 Pony2는 것 같은 곳이 프로토 타입의 관련 비트를 따라 확장하거나 사용할 수 있다는 것입니다 그냥 함수로 간주됩니다. 따라서 프로토 타입적인 상속을 나중에 사용하지 않을 계획이라면 나중에 상응하는 것입니다.

Answer 2

사용하는 한 차이가 없습니다. 그러나 성능 측면에서 볼 때 전자의 방법이 바람직합니다. 그것은 그러나 this, prototypePony1 및 prototypePony2 모두 공유의 동일한 복사본을 사용하여 정의 된 이후, thisPony1 및 thisPony2 모두의 bite 기능의 자신의 사본을 얻을 위의 예에서

var prototypePony1 = new Pony(); 
var prototypePony2 = new Pony(); 
var thisPony1 = new Pony2(); 
var thisPony2 = new Pony2(); 

prototypePony1.hasOwnProperty('bite'); //returns false 
prototypePony2.hasOwnProperty('bite'); //returns false 
thisPony1.hasOwnProperty('bite'); //returns true 
thisPony2.hasOwnProperty('bite'); //returns true 

Pony.prototype.bite = function() { alert('Nomnomnom!'); }; 
Pony2.prototype.bite = function() { alert('Nomnomnom!'); }; 

prototypePony1.bite(); //alerts 'Nomnomnom!' 
prototypePony2.bite(); //alerts 'Nomnomnom!' 

thisPony1.bite(); //alerts 'Chomp!', instance property is accessed first 
delete thisPony2.bite; 
thisPony2.hasOwnProperty('bite'); //returns false 
thisPony2.bite(); //alerts 'Nomnomnom!' 

:의 당신의 예를 조금 확장 할 수 bitePony의 생성자.

Pony2에서 bite 프로토 타입을 정의한 후에는 thisPony1에서 인스턴스 속성에 계속 액세스합니다. 새로 정의 된 프로토 타입 속성이 thisPony2에있는 인스턴스 속성을 삭제하기 전까지는 아닙니다.

개체 메서드를 정의하는 방법에 대한 자세한 내용은 here을 참조하십시오.

Answer 3

위의 대답은 프로토 타입을 두는 것과 인스턴스를 적용하는 것의 차이점에 대한 좋은 개요를 제공합니다. 타이프 라이터로 변환하는 방법에 대한 질문에 관해서는, 아래 당신이 그 (것)들에게 쓰기 얼마나 모두 :

class Pony { 
    bite(){ 
     alert('chomp'); 
    } 
} 

class Pony2 { 
    bite: () => void; 
    constructor(){ 
     this.bite =() => alert('chomp'); 
    } 
}