일반적으로 사용되는 몇 가지 객체 생성 모드
새로운 키워드로 만듭니다
객체를 만드는 가장 기본적인 방법은 대부분의 언어가 말하는 것 이상입니다. 객체가 없다면 새로 얻을 수 있습니다!
var gf = new Object (); gf.name = "tangwei"; gf.bar = "c ++"; gf.saywhat = function () {console.log (this.name+"sad : 영원히 사랑합니다");}리터럴로 만듭니다
이것은 사실 인 것처럼 보이지만 어떻게 변수를 정의하는 복잡하고 낮은 수준의 방법을 어떻게 좋아할 수 있습니까? 스크립팅 언어로서, 그것은 다른 형제들과 같은 스타일을 가져야하므로 객체 리터럴을 정의하는 방법이 나타납니다.
var gf = {이름 : "tangwei", bar : "c ++", say what : function () {console.log (this.name+"sad : 영원히 사랑합니다"); }}공장 모델
실제로, 이것은 실제로 가장 일반적으로 사용되는 객체 정의 방법이지만, 비슷한 속성을 가진 많은 객체가 있다면 어떻게해야합니까? 하나의 정의가 하나씩 만들어지면 많은 양의 코드가 생성됩니다. 공장을 만들고 대량을 제작하지 않겠습니까? 그래서 JavaScript 세계에서 최초의 풍선 아기. . . 아니요, "공장 모델"이 탄생합니다!
함수 creategf (name, bar) {var o = new Object (); o.name = 이름; O.bar = bar; o.saywhat = function () {alert (this.name + "sad : 영원히 사랑합니다"); } return o;} var gf1 = creategf ( "bingbing", "d"); var gf2 = creategf ( "mimi", "a");건설자
공장 패턴은 여러 유사한 객체를 만드는 문제를 해결하지만 문제는 다시 발생합니다. 이 객체는 모두 물체에 의해 형성됩니다. 객체의 특정 유형을 구별하는 방법은 무엇입니까? 현재 다른 모드 인 생성자 모드로 전환해야합니다.
함수 gf (이름, 바) {this.name = 이름; this.bar = bar; this.say what = function () {alert (this.name + "say : 영원히 사랑합니다"); }} var gf1 = new Gf ( "vivian", "f"); var gf2 = new Gf ( "vivian2", "f");여기서 우리는 위의 예에서 CreateGF를 대체하기 위해 대문자로 시작하는 생성자를 사용합니다. 생성자의 첫 번째 문자는 협약에 따라 대문자를 대응해야합니다. 여기서 새 개체를 만든 다음 생성자의 범위를 새 개체에 할당하고 생성자에서 메소드를 호출합니다.
위의 방법에는 아무런 문제가없는 것 같지만 두 인스턴스에서 호출 된 생성자의 Say what 메소드가 동일한 함수 인스턴스가 아니라는 것을 알 수 있습니다.
console.log (gf1.saywhat == gf2.say what); //거짓
동일한 방법을 호출하지만 다른 인스턴스를 선언하는 것은 자원 낭비입니다. 생성자 외부의 Saywhat 기능의 진술을 최적화 할 수 있습니다.
함수 gf (이름, 바) {this.name = 이름; this.bar = bar; this.say what = say what} 함수는 무엇을 말하며 () {alert (this.name + "sad : 당신을 영원히 사랑");}이것은 동일한 메소드 인스턴스를 여러 번 정의하는 문제를 해결하지만 새로운 문제가 다시 발생합니다. 우리가 정의한 내용은 글로벌 범위 방법이지만이 방법은 직접 호출 할 수 없으며 이는 약간 모순됩니다. 특정 캡슐화로 물체를보다 우아하게 정의하는 방법은 무엇입니까? JavaScript 프로토 타입 객체 패턴을 살펴 보겠습니다.
프로토 타입 객체 패턴
프로토 타입 객체를 이해하십시오
함수를 만들 때 함수에는 프로토 타입 속성이 있으며,이 속성은 생성자를 통해 생성 된 기능의 프로토 타입 객체를 가리 킵니다. Layman의 용어로, 프로토 타입 객체는 다른 객체에 대한 공유 속성과 방법을 제공하는 메모리의 개체입니다.
프로토 타입 모드에서는 생성자의 인스턴스 속성을 정의 할 필요가 없으며 속성 정보를 프로토 타입 객체에 직접 할당 할 수 있습니다.
함수 gf () {gf.prototype.name = "vivian"; gf.prototype.bar = "c ++"; gf.prototype.saywhat = function () {alert (this.name + "sad : 영원히 사랑"); }} var gf1 = new gf (); gf1.saywhat (); var gf2 = new Gf ();생성자와의 차이점은 모든 인스턴스에서 새 개체의 특성과 방법을 공유 할 수 있다는 것입니다. 즉, GF1 및 GF2는 동일한 특성 및 방법에 액세스합니다. 우리가 할당 한 속성 외에도 프로토 타입 객체에는 내장 된 속성도 있습니다. 모든 프로토 타입 객체에는 생성자 속성이 있는데, 이는 프로토 타입 속성을 포함하는 함수에 대한 포인터입니다 (다시 지점을 감히 해야하는지). 사진을 통해이 트위스트의 과정을 명확하게 정리해 봅시다.
모든 객체에는 프로토 타입 객체 (프로토 타입)가 있습니다. 프로토 타입 객체에는 프로토 타입 속성을 포함하는 함수를 가리키는 생성자 속성이 있습니다. GF의 인스턴스 GF1과 GF2는 모두 프로토 타입 객체를 가리키는 내부 속성을 포함합니다 (프로토는 Firefox 브라우저에서 개인 속성으로 나타납니다). 객체의 속성에 액세스하면 먼저 인스턴스 객체 에이 속성이 있는지 묻습니다. 그렇지 않다면, 우리는 프로토 타입 객체를 계속 찾을 것입니다.
프로토 타입 객체 사용
이전 예에서는 프로토 타입 객체에 특성을 추가 할 때 각각에 GF.Prototype을 추가해야한다는 것을 알았습니다. 이 작업은 매우 반복적입니다. 위의 객체 생성 패턴에서, 우리는 객체가 리터럴 형태로 만들 수 있음을 알고 있습니다. 여기서 우리는 또한 그것을 향상시킬 수 있습니다.
함수 gf () {} gf.prototype = {name : "vivian", bar : "c ++", say what : function () {alert (this.name+"sad : 영원히 사랑"); }}우리가 특별한주의를 기울여야 할 곳이 있습니다. 기능이 정의 될 때마다 프로토 타입 객체가 동시에 생성되기 때문에 생성자 속성은 더 이상 객체 GF를 가리키지 않으며이 개체는 자동으로 새 생성자 속성을 얻습니다. 이곳에서 우리는 GF.Prototype을 사용하여 원래 프로토 타입 객체를 본질적으로 덮어 씁니다. 따라서 생성자는 더 이상 GF를 가리키지 않고 개체를 가리키지 않고 새 개체의 생성자 속성이되었습니다.
var gf1 = new Gf (); console.log (gf1.constructor == gf); // falseconsole.log (gf1.constructor == Object) // true
일반적 으로이 미묘한 변화는 우리에게 영향을 미치지 않지만 생성자에 대한 특별한 요구가있는 경우 GF.Prototype의 생성자 특성을 명시 적으로 지정할 수도 있습니다.
gf.prototype = {생성자 : GF, 이름 : "vivian", bar : "c ++", say what : function () {alert (this.name+"said : 영원히 사랑합니다"); }} var gf1 = new gf (); console.log (gf1.constructor == gf); // true프로토 타입 객체 패턴에 대한 예비 이해를 통해 모든 인스턴스 객체는 프로토 타입 패턴의 기본 기능인 동일한 속성을 공유하지만 종종 개발자에게는 "이중 편도 검"입니다. 실제 개발에서, 우리가 희망하는 사례는 자체 속성을 가져야하는데, 이는 실제 개발에서 프로토 타입 패턴 만 사용하는 사람들이 거의없는 주된 이유이기도합니다.
생성자 및 프로토 타입 조합 패턴
실제 개발에서 우리는 생성자를 사용하여 객체의 속성을 정의하고 프로토 타입을 사용하여 공유 속성 및 방법을 정의하여 다른 매개 변수를 전달하여 다른 객체를 생성하면서 공유 방법과 속성을 공유 할 수 있습니다.
함수 gf (이름, 바) {this.name = 이름; this.bar = bar;} gf.prototype = {생성자 : gf, say what : function () {alert (this.name + "sad : 영원히 사랑합니다"); }} var gf1 = new Gf ( "vivian", "f"); var gf2 = new Gf ( "vivian1", "c");이 예에서는 생성자 함수에서 객체의 각 속성 값을 정의하고 생성자 속성을 정의하고 프로토 타입 객체의 기능을 말해 GF1 및 GF2 속성 사이에 영향을 미치지 않도록합니다. 이 패턴은 또한 많은 JS 라이브러리 (부트 스트랩 등)에서 채택한 기본 모드를 포함하여 실제 개발에서 가장 일반적으로 사용되는 객체 정의 방법입니다.