JavaScript로 클래스를 구현하는 방법 살펴보기

JavaScript에서 클래스를 구현하는 방법에 대해 토론

Javascript에서 객체를 생성하는 방법은 다양하므로 객체를 생성하는 방법은 매우 유연합니다. 그렇다면 객체를 생성하는 가장 적절한 방법은 무엇입니까? 구성

모드, 프로토타입 모드 또는 객체 리터럴 모드?

그런데 이 모드들이 정확히 뭔가요?

설명에 앞서, 자바스크립트에 대한 기본지식을 명료하게 소개하겠습니다.

객체지향 프로그래밍을 자바스크립트로 구현하는 것이 가능한가요?

답은 가능합니다. 자바스크립트는 객체를 생성할 수 있습니다! 이러한 개체에는 데이터를 조작할 수 있는 데이터와 메서드가 포함될 수 있으며, 다른 개체도 포함될 수 있습니다. 클래스는 없지만 생성자가 있습니다

. 클래스 상속 메커니즘은 없지만 프로토타입을 통해 상속이 가능합니다.

이제 자바스크립트에서 객체를 생성하고 객체 기반 프로그래밍을 구현하는 데 필요한 구성 요소를 이해한 것 같습니다.

우리 모두는 자바스크립트에 개인 변수가 있다는 것을 알고 있습니다. "var" 키워드를 통해 정의된 변수는 함수 본문 내에서만 접근할 수 있으며 함수 외부에서는 접근할 수 없습니다. 그렇다면

“var” 키워드를 사용하여 변수를 정의하지 않으면 어떻게 될까요? 지금은 이 문제에 대해 심도 있게 논의하지 않을 예정입니다. 이 문제에 대해서는 다음

에서 자세히 설명하겠습니다.

이제 이전 질문으로 돌아가겠습니다. 객체를 생성하는 가장 적절한 방법은 무엇입니까?

우리가 이미 알고 있는 지식을 활용하여 Person 객체를 만들어 보도록 하겠습니다.

[javascript]

var Person = {

firstName : 'John',

lastName : 'Cody',

fullName : '',

message : '',

createFullName: function () {

fullName = this.firstName + ' ' + this.lastName;

},

changeMessage: 함수(msg) {

this.message =

},

getMessage : function () {

this.createFullName()

return this.message + ' ' + fullName ;

}

}

Person.firstName = 'Eli';

Person.lastName = '꽃'

Person.changeMessage('welcome');

var message = Person.getMessage(); // Eli Flowers를 환영합니다

alert(message);

이것은 객체의 문자 그대로의 패턴입니다. 이는 우리가 일반적으로 객체를 생성하는 방법과 매우 유사합니다. 비공개/래핑된 멤버에 대해 신경 쓸 필요가 없고 이 개체의 인스턴스가 생성되지 않는다는 것을 알고 있는 경우. 그렇다면 이 방법이 당신에게 아주 잘 맞을 거예요. 공개 회원은 비공개 회원이 할 수 있는 모든 일을 할 수 있습니다. 그렇죠? 그러나 이것은 클래스가 아니라 객체입니다. 인스턴스화할 수 없고 상속할 수도 없습니다.

다른 것을 시도해 보겠습니다.

[javascript]

var Person = function() {

this.firstName = 'John';

this.lastName = 'Cody';

var fullName = ''

this.message = '' ; >

var _that = this;

var createFullName = function() {

fullName = _that.firstName + ' ' + _that .lastName 🎜> }

this.getMessage = function () {

createFullName()

return this.message + ' ' + fullName

}

}

var person1 =

person1; firstName = '엘리';

person1.lastName = '꽃'

person1.changeMessage('welcome')

var message = person1.getMessage(); / Welcome Eli Flowers

alert(message)

이것은 생성자 패턴의 인스턴스입니다. 그렇다면 이것은 클래스인가, 객체인가? 두 가지 모두를 고려해야 합니다. 요청 시 Person

객체로 처리할 수 있습니다.

사용합니다. 결국 그것은 단지 기능일 뿐이다. 그러나 "new" 키워드를 사용하여 새 인스턴스를 생성하는 것은 가능합니다.

이 방법을 사용할 때 항상 다음 사항을 기억해야 합니다.

1. 이 함수가 호출될 때마다 특수 전역적으로 사용할 수 있는 "this"라는 변수입니다. 전역 범위는 함수 자체의

범위에 따라 달라집니다.

2. "new" 키워드를 통해 이 함수의 인스턴스가 생성될 때마다 "this" 변수는 함수 자체를 가리키며 이 "new" 작업은 함수에 영향을 미칩니다. body

안의 코드가 실행됩니다. 이는 건축 패턴이기도 합니다.

3. "this" 변수에 연결된 모든 변수는 공용 속성이 되고 "var" 키워드를 통해 정의된 모든 변수는 전용 속성이 됩니다.

4. "this"에 첨부된 함수를 특권 함수라고 합니다. "this"에 첨부된 모든 개인 변수와 함수에 액세스할 수 있습니다.

5. Private 함수는 다른 Private 변수 및 Private 함수에 액세스할 수 있습니다.

6. Private 함수는 "this"에 연결된 변수 및 함수에 직접 액세스할 수 없습니다. 개인 변수 "_that"을 생성하고 "this" 값을 할당하면 이를 수행할 수 있습니다.

7. 모든 개인 변수 및 함수는 "this"에 연결된 다른 개인 함수 및 기타 함수에서 사용할 수 있습니다. 이는 JavaScript 범위 내에서 전적으로 가능합니다.

8. 변수: "var" 키워드를 사용하지도 않고 전역 범위를 얻기 위해 "this" 변수에 첨부하지도 않습니다. 예를 들어 사용자 정의 함수의 범위입니다. 스코프와 클러스터에 대한 지식을 다시 이해하려면

이 필요합니다.

이것은 우리가 원하는 대부분의 결과를 얻었지만 때로는 두 개의 입력 변수 "this"와 "that"이 사람들에게 쉽게 혼란을 줄 수 있습니다. 특히나 항상

만을 고집해오던 분들은 더욱 혼란스럽습니다.

조금 수정해서 시도해 보겠습니다.

[javascript]

var Person = function () {

//private

var firstName = 'John';

var lastName = 'Cody';

var fullName = '';

var message = ''; >

var createFullName = function () {

fullName = firstName + ' ' + lastName

} }

//공개 설정자

var setMessage = 함수(msg) {

message = msg;

} }

var setFirstName = 함수(fName) ) {

firstName = fName;

}

var setLastName = function (lName) {

lastName =

}

var getMessage = function () {

createFullName()

return message + ' ' + fullName; 🎜>

}

//공개된 함수

return {

setFirstName: setFirstName,

setLastName: setLastName ,

setMessage:

getMessage: getMessage

}; >

var person1 = new Person();

person1.setFirstName('Eli')

person1.setLastName('꽃'); >

person1.setMessage('welcome');

var message = person1.getMessage(); // Eli Flowers를 환영합니다

alert(message);

공개 패턴입니다. 크리스티안 하일만(Christian Heilmann)에게 깊은 감사를 드립니다. 이 패턴을 사용하는 방법은 요청의 "getters" 및 "setters"를

속성으로 사용하는 것입니다. 우리 중 많은 사람들이 전통적인 Java 프로그래밍에서 이 수치를 찾았으며 이를 구현하는 것이 복잡하지 않다는 것은 분명합니다. 이는 클래스가

인터페이스에서 상속되는 경우와 유사한 상황이기도 합니다.

이 모델은 대부분의 측면이 잘 구현되어 있지만 아주 사소한 문제가 하나 있습니다. 클래스의 인스턴스가 생성될 때마다. 새로 생성된 이 개체는 변수 및 함수의 복사본을 가져옵니다.

사본. 이제 변수를 복사하는 데에는 문제가 없습니다. 그러면 각 개체의 데이터가 개체 자체에 속하기를 바랍니다. 그들은 단지 데이터를 조작할 뿐입니다

. 그렇다면 왜 복사해야합니까?

이것이 프로토타입의 장점입니다. 모든 경우에 모든 것이 프로토타입으로 제작되어 서로 공유될 수 있습니다. 우리가 해야 할 일은 프로토타입

을 기반으로 공개 함수를 만드는 것뿐입니다.

[javascript]

var Person = function () {

//private

var WelcomeMessage = '환영합니다';

var fullName = '';

var lastName = ""; = function () {

Person.prototype.setFirstName('asdsad');

fullName = firstName + ' ' + lastName

//constructor

var Person = function () { }; //매번 생성됩니다

//public

Person.prototype = {

getFullName: function () {

createFullName();

return WelcomeMessage + ' ' + fullName; ,

setFirstName: 함수(fName) {

firstName = fName;

},

setLastName: 함수(lName) { 🎜>

lastName = lName;

},

ChangeMessage: 함수(mesg) {

WelcomeMessage = 메시지

}

return new Person(); //new Person()

var person1 = new Person();

person1.setFirstName ('Eli')

person1.setLastName('Flowers')

person1 . ChangeMessage('welcome');

var message = person1.getFullName(); // 환영합니다. 꽃

alert(message); 프로토타입 패턴의 한 가지 문제점은 개인 변수 및 개인 함수에 액세스할 수 없다는 것입니다. 이 문제로 인해 클로저를 도입하고 생성된 클래스에 존재하는 코드를 항상

전체적으로 지저분해지지 않습니다. 모두 Person 클래스의 범위 내에 있습니다.

또 다른 문제는 인스턴스가 생성될 때마다 프로토타입 바인딩을 포함한 모든 코드가 실행된다는 점입니다. 우리 중 일부에게는 단순히 효율성의 문제일 뿐입니다.

이를 처리하는 한 가지 방법은 공개 기능을 사용할 수 없을 것으로 예상되는 경우에만 프로토타입을 바인딩하는 것입니다.

이렇게 하면 첫 번째 인스턴스가 생성될 때만 프로토타입 바인딩 작업이 수행되고 그 이후의 모든 인스턴스는 검사만 수행됩니다. 안타깝게도 이 클래스 Effect를 달성하기 위해 클로저를 생성하는 새 함수만 생성할 수 있기 때문에 위의 예에서 언급한 문제를

해결할 수 없습니다. 이 경우 최소한 메모리 사용량의

부분을 줄입니다.

잠깐, 또 다른 문제는 프라이빗 함수가 프로토타입 함수에 직접 접근할 수 없다는 점입니다.

프라이빗 함수와 프라이빗 변수는 왜 필요한가요? 클래스 캡슐화를 달성하고 클래스의 속성이나 내부 데이터가 갑자기 수정되거나

다른 내부 프로그램이나 다른 작업에 의해 수정되지 않도록 해야 한다는 것을 알고 있습니다. ...

자바스크립트 코드를 바이너리로 컴파일할 수 없다는 점, 이런 상황 때문에 어느 정도 짜증이 난다는 점을 기억하셔야 하므로 코드는 항상 사용 가능합니다. 따라서

누구든지 코드를 엉망으로 만들고 싶다면, 당신이 정말로 비공개인지 아닌지, 팀의 다른 구성원에게 코드를 주거나 판매하든 관계없이 코드를 엉망으로 만들 수 있습니다. 코드.

민영화를 시행하는 것이 조금 도움이 될 수 있습니다.

다른 프로그래머가 사용하는 또 다른 기술은 명명 규칙을 사용하여 비공개로 만들려는 항목 앞에 밑줄 "_"을 붙여 비공개로 지정하는 것입니다.

[javascript]

(함수 () {

    var Person = function () {  

        this._fullName = '';  

        this.welcomeMessage = '';  

        this.firstName = '';  

        this.lastName = "";  

_저것=이것;  

  

        this._createFullName = function () {  

            this.ChangeMessage('나마스테');  

            this._fullName = this.firstName + ' ' + this.lastName;  

        };  

    }  

  

    //코드 최적화를 위한 공유 함수  

    Person.prototype = {  

        생성자: Person,  

        getFullName: function () {  

            this._createFullName();  

            return this.welcomeMessage + ' ' + this._fullName;  

        },  

        ChangeMessage: 함수(mesg) {  

            this.welcomeMessage = mesg;  

        }  

    }  

  

    this.Person = 사람;  

})();  

  

var person1 = new Person();  

person1.firstName = '엘리';  

person1.lastName = '꽃';  

person1.ChangeMessage('환영합니다');  

var message = person1.getFullName(); // 나마스테 엘리  꽃  

alert(message);  

 

我不是说你不应该考虑 “비공개” 或者类似的知识。你是代码的设计者，所以你将知道怎么来管理并文道怎么做才是最好的。根据你的

 

需求，你可以使用任何一种设计模式或者多个设计模式组一起使用。

 

无论你决定采用哪种设计模式，始终记住做尽计模少的事情，不要围内实现闭包，尽weight减少内存泄露，以及优化代码，并且组织好

 

代码🎜>

 

最后，祝编程愉快!

译后ㅋㅋㅋ

javascript를 사용하여 对于它的印象一直道是直接拷贝过来就可以用的입니다.也ming白재 

 javascript 中实现类的各种方式，以及在文章最后讨论了类中私有成员的实现情况。