JavaScript_javascript 기술로 클래스를 구현하는 방법에 대한 토론

JavaScript에서는 객체를 생성하는 방법이 다양하므로 객체를 생성하는 방법은 매우 유연합니다. 그렇다면 객체를 생성하는 가장 적절한 방법은 무엇입니까? 구성 패턴, 프로토타입 패턴 또는 객체 리터럴 패턴?

그런데 이 모드는 정확히 무엇인가요?

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

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

답은 가능합니다. 자바스크립트는 객체를 생성할 수 있습니다! 이러한 개체에는 데이터와 데이터를 조작할 수 있는 메서드가 포함될 수 있으며 다른 개체도 포함될 수 있습니다. 클래스는 없지만 생성자는 있습니다. 클래스 상속 메커니즘은 없지만 프로토타입을 통해 상속이 가능합니다.

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

우리 모두는 자바스크립트에 개인 변수가 있다는 것을 알고 있습니다. "var" 키워드를 통해 정의된 변수는 함수 본문 내에서만 접근할 수 있으며 함수 외부에서는 접근할 수 없습니다. 그렇다면 "var" 키워드를 사용하여 변수를 정의하지 않으면 어떻게 될까요? 지금은 이 문제를 자세히 다루지 않고 "this"를 통해 액세스할 수 있습니다. 이 문제에 대해서는 나중에 자세히 설명하겠습니다.

이제 이전 질문으로 돌아가겠습니다. 객체를 생성하는 가장 적절한 방법은 무엇입니까?
우리가 이미 알고 있는 것을 활용하고 Person 객체를 생성하여 시도해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

var Person = {
firstName : 'John' ,
lastName : 'Cody',
fullName : '',
message : '',

createFullName : function () {
fullName = this.firstName ' ' this.lastName;

changeMessage : 함수(msg) {
this.message =
},

getMessage : 함수() {
this .createFullName();
return this.message ' ' fullName;
}
}

Person.firstName = 'Eli'
꽃 '
Person.changeMessage('welcome');
var message = Person.getMessage(); // Eli Flowers를 환영합니다
alert(message); 객체의 원래 의도 모드(리터럴 패턴). 이는 우리가 일반적으로 객체를 생성하는 방법과 매우 유사합니다. 비공개/래핑된 멤버에 대해 신경 쓸 필요가 없고 이 개체의 인스턴스가 생성되지 않는다는 것을 알고 있는 경우. 그렇다면 이 방법이 당신에게 아주 잘 맞을 거예요. 공개 회원은 비공개 회원이 할 수 있는 모든 일을 할 수 있습니다. 그렇죠? 그러나 이는 클래스가 아니라 인스턴스화할 수 없고 상속할 수 없는 객체입니다.

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

코드 복사

코드는 다음과 같습니다. 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);


구성 패턴(Constructor Pattern)의 예입니다. 그렇다면 이것은 클래스인가, 객체인가? 아마도 둘 다일 것입니다. 요청을 할 때 이를 Person 객체로 사용할 수 있습니다. 결국 그것은 단지 기능일 뿐이다. 그러나 "new" 키워드를 사용하여 새 인스턴스를 생성하는 것은 가능합니다.

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

1. 이 함수가 호출될 때마다 "this"라는 특수 변수가 있습니다. 전 세계적으로 사용 가능합니다. 전역 범위는 함수 자체의 범위에 따라 다릅니다.

2. "new" 키워드를 통해 이 함수의 인스턴스가 생성될 때마다 "this" 변수는 함수 자체를 가리키며 이 "new" 작업은 함수의 코드 실행에 영향을 미칩니다. 몸. 이는 건축 패턴이기도 합니다.

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

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

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

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

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

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

이것은 우리가 원하는 대부분의 결과를 얻었지만 때로는 두 개의 입력 변수 "this"와 "that"이 사람들에게 쉽게 혼란을 줄 수 있습니다. 특히 늘 순수 개인 소유를 주장해 온 이들에게는 혼란이 더 잦다.

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

코드 복사 코드는 다음과 같습니다.

var Person = function () {

//private
var firstName = 'John';
var lastName = 'Cody';
var fullName = ''
var message =


var createFullName = function () {
fullName = firstName ' ' lastName
}

//public setters
var setMessage = function (msg) {
message = msg;
}

var setFirstName = 함수(fName) {
firstName = fName;
}

var setLastName = 함수(lName) {
lastName = lName;
}

var getMessage = function () {
createFullName();
반환 메시지 ' ' fullName; 공개
return {
setFirstName: setFirstName,
setLastName: setLastName,
setMessage: setMessage,
getMessage: getMessage
}

var person1 = new Person();
person1.setFirstName('Eli');
person1.setLastName('Flowers')
person1.setMessage('welcome'); message = person1 .getMessage(); // Eli Flowers
alert(message)


이것은 공개 패턴입니다. 크리스티안 하일만(Christian Heilmann)에게 깊은 감사를 드립니다. 이 패턴을 사용하는 방법은 요청의 "getters" 및 "setters"를 속성으로 사용하는 것입니다. 우리 중 많은 사람들이 전통적인 Java 프로그래밍에서 이 수치를 찾았으며 이를 구현하는 것이 복잡하지 않다는 것은 분명합니다. 이는 클래스가 인터페이스에서 상속되는 경우와 유사한 상황이기도 합니다.

이 모델의 대부분의 측면은 아주 사소한 문제 하나만 제외하고 잘 구현되었습니다. 클래스의 인스턴스가 생성될 때마다. 새로 생성된 개체는 해당 변수와 함수의 복사본을 가져옵니다. 이제 변수를 복사하는 데에는 문제가 없습니다. 그러면 각 개체의 데이터가 개체 자체에 속하기를 바랍니다. 그들은 단지 데이터를 조작할 뿐입니다. 그렇다면 왜 복사해야합니까?

이것이 프로토타입의 장점입니다. 어떤 경우든 모든 것이 프로토타입으로 제작되어 서로 공유될 수 있습니다. 우리가 해야 할 일은 프로토타입을 기반으로 공개 함수를 만드는 것뿐입니다.

코드 복사

코드는 다음과 같습니다.

var Person = function () {

//private
var WelcomeMessage = '환영합니다';
var fullName = '';
var firstName = '';
var lastName = "";
var createFullName = function () {
Person.prototype.setFirstName('asdsad');
fullName = firstName ' ' lastName;
};

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

//public
Person.prototype = {
getFullName: function () {
createFullName();
환영 메시지 '' fullName;
},
setFirstName: 함수(fName) {
firstName = fName;
},
setLastName: 함수(lName) {
lastName = lName;
},
ChangeMessage: 함수(mesg) {
welcomeMessage = mesg;
}
}

새 사람()을 반환합니다. // 사람; //새 사람();
};


var person1 = new Person();
person1.setFirstName('Eli');
person1.setLastName('꽃');
person1.ChangeMessage('환영합니다');
var message = person1.getFullName(); // asdsad 꽃을 환영합니다
alert(message);

원래型模式存이 一个问题是它不能访问私有变weight及私有函数，正因为这个问题，我们才会介绍闭包以及始终组织好创建类中存가 代码以使得它에 있습니다.全局范围内不会变得很混乱。所有都是属于Person 类 的 작용 范围内 。

另外一个问题是每一欞例被创建时， 전부被执行一遍，包括原型的绑우리는 중앙의 일부 人来说，这仅仅只是一个效率问题입니다.下绑定这个原型。

这样将会使得绑实会는 第一个实例被创建时执行，并且在那之后所有其他的实例書将只会进行检查操。작동이 불가능합니다.是，这样还是不能解决我们们们例子中提到的问题,因为我们只은 새로운 再来一次创建的函数用于生成一个闭包来达到这个类的效果입니다.内存的使用。

等等，还有另外一个问题是私有函数不能直接访问原型函数。

为什么你们一定得需要私有函数和私有变weight呢?我知道你一定是想实现类的封装性，想确保类中性属性或者内据不数据不会被突然地修改了或者被内부적其他程序所修改，或者任何其他的操作…

你应该记住你是不能将 javascript 代码编译成이 두 가지로 제조적이며, 对于这种情况, 你在一정확률상상很恼화吧，这样代码始终city是可用的。所以，如果任何人想搅乱代码的话，不管你真正实现私有或者没有实现私有，不管你将代码给团队中的其他成员或者卖去，他们道可以搅乱代码。实现私有化可能有那么一点点帮助吧。

另一个其他编程者使用的技术是使用约定命name ，使用下划线 “_”给所有你想设成私有任何的东西加上前缀以规定它成为私有。

复主代码 代码如下:

(기능 () {
var Person = function () {
this._fullName = '';
this.welcomeMessage = '';
this.firstName =
this.lastName = "";
_that = this;

this._createFullName = function () {
this.ChangeMessage('Namaste')
this._fullName '' this. 성;
};
}

//코드 최적화를 위한 공유 함수
Person.prototype = {
constructor: Person,
getFullName: function () {
this._createFullName();
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);

'비공개'나 그와 유사한 것을 생각하지 말라는 것이 아닙니다. 당신은 코드의 디자이너이므로 코드를 관리하는 방법과 가장 효과적인 것이 무엇인지 알게 될 것입니다. 필요에 따라 하나의 디자인 패턴을 사용하거나 여러 디자인 패턴을 함께 조합하여 사용할 수 있습니다.

어떤 디자인 패턴을 채택하기로 결정하든 항상 가능한 한 적게 수행하고, 전역 범위에서 클로저를 구현하지 말고, 메모리 누수를 최소화하고, 코드를 최적화하고, 코드를 잘 구성하는 것을 기억하세요. 따라서 범위, 클로저 및 "this"의 동작에 대해 가능한 한 많이 배우도록 노력하십시오.

드디어 즐거운 프로그래밍 되세요!

번역 후 감상

자바스크립트를 자주 사용하는데 복사해서 바로 사용할 수 있다는 느낌이 듭니다. 나는 최근에 extjs를 사용했는데, 그 클래스 프레임워크는 사용하기 매우 쉽습니다. 이 기사에서 우리는 JavaScript에서 클래스를 구현하는 다양한 방법을 이해할 수 있으며 기사 마지막 부분에서는 클래스의 전용 멤버 구현에 대해 논의합니다.