JavaScript 객체 지향 튜토리얼

Javascript는 C와 유사한 언어입니다. 객체 지향적인 점은 C++/Java에 비해 이상하지만 실제로는 매우 강력합니다. 지난 이틀 동안 전 동료가 나에게 Javascript의 객체지향 프로그래밍에 관해 문의해 왔습니다. 그래서 나는 그가 읽을 수 있도록 기사를 작성하고 싶습니다. 이 기사는 주로 Javascript의 객체지향 프로그래밍을 전반적인 관점에서 설명하고 싶습니다. . Cool Shell의 기사를 다시 게시했는데 아주 잘 작성되었습니다...

또한 이 기사는 주로 ECMAScript 5를 기반으로 하며 새로운 기술을 소개하는 것을 목표로 합니다. 호환성에 대해서는 마지막 섹션을 참조하세요.

예비 연구

Javascript에서 변수의 정의는 기본적으로 다음과 같다고 알고 있습니다.

var name = 'Chen Hao';;

var email = 'haoel( @)hotmail.com';

var website = 'http://coolshell.cn';

객체로 작성하려면 다음과 같습니다. 이:

var chenhao = {

이름:'Chen Hao',

이메일: 'haoel(@)hotmail.com',

웹사이트 : 'http://coolshell .cn'

}

그래서 다음과 같이 접속할 수 있습니다.

//회원으로서

chenhao. name;

chenhao.email;

chenhao.website;

//해시맵 형식

chenhao["name"];

chenhao[ "email"];

chenhao["website"];

함수와 관련하여 Javascript 함수는 다음과 같습니다.

　var doSomething = function(){

alert('Hello World.');

};

다음과 같이 할 수 있습니다:

　var sayHello = function(){

var hello = “안녕하세요, 저는 “+ this.name

+ “, 제 이메일 주소는: ” + this.email

+ “, 내 웹사이트는 다음과 같습니다: ” + this.website;

alert(hello);

};

//직접 할당, 이는 C/C++와 매우 유사합니다. 함수 포인터

chenhao.Hello = sayHello;

chenhao.Hello();

저는 이러한 것들이 상대적으로 간단하고 누구나 이해할 수 있다고 믿습니다. 자바스크립트 객체 함수를 직접 선언하고, 직접 할당하고, 직접 사용하는 것을 볼 수 있습니다. 런타임을 위한 동적 언어.

보다 표준화된 작성 방법도 있습니다.

//함수를 클래스로 사용하는 것을 볼 수 있습니다.

var Person = 기능(이름, 이메일, 웹사이트){

this.name = 이름;

this.email = 이메일;

this. website = website;

this.sayHello = function(){

var hello = “안녕하세요, 저는 “+ this.name + “, n” +

입니다 “내 이메일은: ” + this.email + “, n” +

“내 웹사이트는: ” + this.website;

alert(hello);

};

};

var chenhao = new Person(“Chen Hao”, “haoel@hotmail.com”,

“http://coolshell.cn” ; 🎜>위의 예에서 다음 사항을 볼 수 있습니다.

◆ Javascript의 데이터 및 멤버 캡슐화는 매우 간단합니다. 어떤 클래스도 전적으로 객체 작업이 아닙니다. 순전히 동적입니다!

◆ Javascript 함수의 this 포인터가 중요하지 않은 경우 지역 변수이거나 지역 함수입니다.

◆ 자바스크립트 객체 멤버함수는 사용시 임시로 선언할 수 있고, 전역함수를 직접 할당할 수도 있습니다.

◆ Javascript 멤버 함수는 인스턴스에서 수정될 수 있습니다. 즉, 다른 인스턴스에서 동일한 함수 이름의 동작이 동일하지 않을 수 있습니다.

　속성 구성 – Object.defineProperty

먼저 다음 코드를 살펴보세요.

　//객체 생성

var chenhao = Object.create(null) ;

//속성 설정

Object.defineProperty( chenhao,

'name', { value: 'Chen Hao',

쓰기 가능: true ,

구성 가능: true,

열거 가능: true });

//여러 속성 설정

Object.defineProperties( chenhao,

{

'email' : { 값: 'haoel@hotmail.com',

쓰기 가능: true,

구성 가능: true,

열거 가능: true },

'웹사이트': { 값: 'http://coolshell.cn',

쓰기 가능: true,

구성 가능: true,

enumerable: true }

}

);

이러한 속성 구성이 무엇을 의미하는지 이야기해 보겠습니다.

쓰기 가능: 이 속성의 값을 변경할 수 있는지 여부입니다.

configurable: 이 속성의 구성을 변경할 수 있는지 여부입니다.

열거 가능: 이 속성을 for...in 루프에서 탐색할 수 있는지 아니면 Object.keys에서 열거할 수 있는지 여부입니다.

값: 속성 값.

get()/set(_value): 접근자를 가져오고 설정합니다.

Get/Set 접근자

get/set 접근자는 get/set을 사용하여 값을 바꾸는 것을 의미합니다(값과 함께 사용할 수 없음).

　var age = 0;

Object.defineProperty( chenhao,

'age', {

get: function() {return age+1;},

설정: 함수(값) {나이 = 값;}

열거 가능: true,

구성 가능: true

}

);

chenhao.age = 100; //set 호출

alert(chenhao.age); //get을 호출하고 101을 출력합니다(get에서 +1);

보다 실용적인 예를 살펴보겠습니다. 기존 속성(나이)을 사용하여 get 및 set을 통해 새 속성(birth_year)을 구성합니다.

　Object.defineProperty(chenhao,

'birth_year',

{

get: function() {

var d = new Date();

var y = d.getFullYear( );

return( y – this.age );

},

설정: 함수(연도) {

var d = new Date();

var y = d.getFullYear();

this.age = y – 연도;

}

}

);

alert(chenhao.birth_year);

chenhao.birth_year = 2000;

alert(chenhao.age);

조금 번거로운 것 같으니 다음과 같이 쓰면 어떨까요:

var chenhao = {

이름: “Chen Hao”,

이메일: “haoel@hotmail.com”,

웹사이트: “http://coolshell.cn”,

age : 100,

getbirth_year() {

var d = new Date();

var y = d.getFullYear();

return ( y – this.age );

},

birth_year(연도) 설정 {

var d = new Date();

var y = d.getFullYear();

this.age = y – 연도;

}

};

alert(chenhao.birth_year) ;

chenhao.birth_year = 2000;

alert(chenhao.age);

예, 이렇게 할 수 있지만, DefineProperty()를 통해 다음과 같은 작업을 수행할 수 있습니다.

1) 쓰기 가능, 구성 가능, 열거 가능 등의 속성 구성을 설정합니다.

2) 객체에 속성을 동적으로 추가합니다. 예: 일부 HTML DOM 개체.

객체 속성 구성 보기

이러한 객체 구성을 보고 관리하면, 객체의 속성과 구성을 출력할 수 있는 아래 프로그램이 있습니다.

// List 개체 속성.

function listProperties(obj)

{

var newLine = ”
“;

var names = Object.getOwnPropertyNames(obj );

for (var i = 0; i

var prop = names[i];

document.write(prop + newLine);

// getOwnPropertyDescriptor 함수를 사용하여 객체의 속성 구성(설명자)을 나열합니다.

var descriptor = Object.getOwnPropertyDescriptor(obj, prop);

for(설명자의 var attr) {

document.write(“…” + attr + ': ' + 설명자[attr]);

document.write(newLine);

}

document.write(newLine);

}

}

listProperties(chenhao);

　call, Apply, Bind 및 this

Javascript의 this 포인터는 C++/Java와 매우 유사합니다. . 예를 살펴보겠습니다. (이 예는 매우 간단하므로 더 이상 말하지 않겠습니다.)

　function print(text){

document.write(this.value + ' – ' + 텍스트+ '
');

}

var a = {값: 10, 인쇄: 인쇄};

var b = {값: 20, print : print};

print('hello');// this => 전역, "정의되지 않음 – hello" 출력

a.print('a');// this => ; "10 – a" 출력

b.print('b') // this => b, "20 – b" 출력

a['print' ] ('a'); // this => a, 출력 “10 – a”

이 두 함수의 차이점은 매개변수가 다르게 보인다는 것입니다. 다른 하나는 성능이 다르고 적용 성능이 훨씬 나쁩니다. (성능을 보려면 JSPerf에 가서 살펴보세요)

print.call(a, 'a') // this => a, 출력 “10 – a”

print.call(b, 'b'); // this => b, 출력 “20 – b”

print.apply(a, ['a']) // this => ; a, 출력 “10 – a”

print.apply(b, ['b']); // this => b, 출력 “20 – b”

그러나 바인드에서는 마지막으로 this 포인터는 다를 수 있지만 Javascript는 동적이기 때문입니다. 다음 예와 같이

var p = print.bind(a);

p('a'); // this => 출력 “10 – a”

p.call(b, 'b'); // this => a, 출력 “10 – b”

p.apply(b, ['b']) // this => a, 출력 “10 – b”

상속 및 오버로딩

위의 예를 통해 실제로 Object.create()를 통해 상속할 수 있습니다. 아래 코드를 참조하세요. Object에서 상속받습니다.

var Person = Object.create(null);

Object.defineProperties
(
Person,
{
'name' : { value: 'Chen 하오'},
'이메일' : { 값 : 'haoel@hotmail.com'},
'웹사이트': { 값: 'http://coolshell.cn'}
}
);

Person.sayHello = function () {
var hello = “

안녕하세요, 저는 “+ this.name + “,
+
”입니다. 이메일: ” + this.email + “,
” +
“내 웹사이트: ” + this.website;
document.write(hello + “
”);
}

var Student = Object.create(Person);
Student.no = “1234567″; //학생번호
Student.dept = “컴퓨터과학과”

//Person 속성 사용
document.write(Student.name + ' ' + Student.email + ' ' + Student.website +'
');

//Person 메소드 사용
Student.sayHello();

// SayHello 메소드 오버로드
Student.sayHello = function (person) {
var hello = “

안녕하세요, 저는 “+ this.name + “,
”
“내 이메일: ” + this.email + “,
” +
“내 웹사이트: ” + this.website + “,
+
” no는: ” + this. no + “,
” +
“내 부서는 ” + this.dept;
document.write(hello + '
');
}
//
Student.sayHello()를 다시 호출합니다.

//Student 속성 보기(no, dept 및 오버로드된 sayHello만)
document.write('

' + Object.keys(Student) + '
');

위의 예를 사용하면 Person의 속성이 실제로 Student에 복사되지는 않지만 액세스할 수 있음을 알 수 있습니다. 이는 Javascript가 대리자를 사용하여 이 메커니즘을 구현하기 때문입니다. 실제로 이것이 프로토타입이고 Person이 Student의 프로토타입입니다.

코드에 속성이 필요한 경우 Javascript 엔진은 먼저 현재 개체에 이 속성이 있는지 확인하고, 그렇지 않은 경우 Prototype 개체에 이 속성이 있는지 확인하고 프로토타입이 나올 때까지 계속합니다. 개체가 발견되거나 프로토타입 개체가 더 이상 없을 때까지 발생합니다.

이를 증명하기 위해 Object.getPrototypeOf()를 사용하여 다음을 확인할 수 있습니다.

Student.name = 'aaa';
//Output aaa
document.write ('

' + Student.name + '

');
//첸 하오 출력
document.write('

' +Object.getPrototypeOf(학생). name + '

');

따라서 C++의 Base::func()처럼 하위 개체의 함수에서 상위 개체의 함수를 호출할 수도 있습니다. 따라서 hello 메소드를 오버로드할 때 아래와 같이 상위 클래스 코드를 사용할 수 있습니다.

//오버로드된 SayHello 메소드의 새 버전
Student.sayHello = function(person) {
Object.getPrototypeOf(this).sayHello.call(this);
var hello = “내 학생 번호: ” + this. no + “,
” +
“내 부서: ” + this.dept;
document.write(hello + '
');
}

이 기능은 매우 강력합니다.

조합

위의 사항은 우리의 요구 사항을 충족할 수 없습니다. 왜 조합을 사용하는가? 이것이 OO 디자인에서 가장 중요한 것임을 우리 모두 알고 있기 때문입니다. 그러나 이는 Javascript를 특별히 잘 지원하지 않으므로 여전히 수행할 수 있습니다.

먼저 컴포지션 함수를 정의해야 합니다. (대상은 이에 대해 작동하는 객체이고 소스는 소스 객체입니다.) 다음 코드는 매우 간단합니다. 소스를 하나씩 지정하고 대상으로 정의합니다.

　함수 구성(대상, 소스)

{

var desc = Object.getOwnPropertyDescriptor;

var prop = Object.getOwnPropertyNames;

var def_prop = Object.defineProperty;

prop(source).forEach(

function(key) {

def_prop(target, key, desc(source, key) ))

}

)

return target;

}

이 기능을 사용하면 지금 여기서 플레이할 수 있습니다.

//Artist
var Artist = Object.create(null);
Artist.sing = function() {
return this.name + '노래 시작…';
}
Artist.paint = function() {
return this.name + '그림 시작…';
}

//Athlete
var Sporter = Object.create(null);
Sporter.run = function() {
return this.name + 'start running…';
}
Sporter.swim = function() {
return this.name + 'starts. 수영…';
}

작곡(사람, 아티스트);
document.write(Person.sing() + '
');
document .write(사람 .paint() + '
');

구성(Person, Sporter);
document.write(Person.run() + '
') ;
document.write(Person.swim() + '
');

//Person에 무엇이 있는지 확인하세요. (출력: sayHello,sing,paint,swim,run)
document.write('

' + Object.keys(Person) + '
');

프로토타입 및 상속

먼저 Prototype에 대해 이야기해보자. 먼저 다음 루틴을 살펴보겠습니다. 이 루틴은 C 언어의 함수 포인터와 매우 유사합니다.

var plus = function(x,y){
document.write( x + ' + ' + y + ' = ' + (x+y) + '
');
return x + y;
};

var minus = function(x,y){
document.write(x + ' – ' + y + ' = ' + (x-y) + '
');
return x – y;
};

var 연산 = {
'+': 더하기,
'-': 빼기
};

var 계산 = 함수(x, y, 연산){
반환 연산[연산](x, y);
};

calculate(12 , 4, '+');
calculate(24, 3, '-');

그렇다면 프로토타입을 사용해야 할까요? 다음 예를 살펴보세요.

　var Cal = function(x, y){

this.x = x;

this.y = y;

}

Cal.prototype.Operations = {

'+': 함수(x, y) { return x+y;},

'-': 함수(x, y) { return x-y;}

};

Cal.prototype.calculate = function(Operation){

return this.Operations[Operation](this.x, this. y);

};

var c = new Cal(4, 5);

c.calculate('+');

c .calculate('-');

Prototype의 사용법은 JavaScript 언어에서 가장 중요한 내용입니다. 인터넷에 이 문제에 대한 기사가 너무 많습니다. 직설적으로 말하면 프로토타입은 객체를 확장하는 것입니다. 새 인스턴스를 만드는 대신 기존 인스턴스를 "복사"하여 새 인스턴스를 반환하는 것이 특징입니다. 복사된 인스턴스는 우리가 "프로토타입"이라고 부르는 것이며 이 프로토타입은 사용자 정의할 수 있습니다(물론 여기서 실제 복사는 없으며 실제로는 위임일 뿐입니다). 위의 예에서는 Cal 인스턴스를 확장하여 작업 속성과 계산 메서드를 갖습니다.

이런 식으로 이 기능을 통해 상속을 구현할 수 있습니다. 첫 번째 Person을 기억하세요. 다음 예는 Person을 상속할 Student를 만드는 것입니다.

기능 사람(이름, 이메일, 웹사이트){
this.name = 이름;
this.email = 이메일;
this.website = 웹사이트;
};

Person.prototype.sayHello = function(){
var hello = “안녕하세요, 저는 “+ this.name + “,
” +
“제 이메일은 “ + this입니다 .email + “,
” +
“내 웹사이트는 다음과 같습니다: ” + this.website;
return hello;
};

function 학생(이름, 이메일, 웹사이트 , 아니오, 부서){
var proto = Object.getPrototypeOf;
proto(Student.prototype).constructor.call(this, 이름, 이메일, 웹사이트);
this.no = no;
this.dept = dept;
}

//프로토타입 상속
Student.prototype = Object.create(Person.prototype);

//생성자 재설정
Student.prototype.constructor = Student;

//오버로드 sayHello()
Student.prototype.sayHello = function(){
var proto = Object.getPrototypeOf;
var hello = proto (Student.prototype).sayHello.call(this) + '
';
hello += "내 학생 번호는 다음과 같습니다. " + this. no + ",
+
" 내 부서는 ” + this. dept;
return hello;
};

var me = new Student(
“gtfx”,
“gtfx0209@gmail .com" ,
"http://dyygtfx.com",
"12345678″,
"컴퓨터 과학"
);
document.write(me.sayHello());

호환성

위 코드는 ECMAScript 5 사양을 따르기 때문에 모든 브라우저에서 실행되지 않을 수 있습니다. ECMAScript 5의 브라우저 호환성 목록은 "ES5 브라우저 호환성" 항목을 참조하세요. 테이블'은 여기요.

이 글의 모든 코드는 최신 버전의 Chrome에서 테스트되었습니다.

ES5와 호환되지 않는 브라우저에서 사용할 수 있는 기능은 다음과 같습니다.

Object.create() 함수

　function clone(proto) {

function Dummy() { }

Dummy.prototype = proto;

Dummy.prototype.constructor = Dummy;

return new Dummy(); Object.create(Person);

}

var me = clone(Person);

defineProperty() 함수

function DefineProperty(target)에서 해당 항목 , 키, 설명자) {

if (descriptor.value){

target[key] = descriptor.value;

}else {

설명자 . get && target.__defineGetter__(key, descriptor.get);

descriptor.set && target.__defineSetter__(key, descriptor.set);

}

반환 대상

}

keys() function

Function 키(객체) { var result, key

result = [];

for (객체의 키){

if (object.hasOwnProperty(key)) result.push(key)

}

return result;

}

Object.getPrototypeOf() 함수

함수 proto(object) {

return !object? null

: 객체에 '__proto__'가 있습니까? . __proto__

: /* 노출되지 않습니까? */ object.constructor.prototype

}

바인딩 함수

　var 슬라이스 = [].slice

functionbind(fn,bound_this) { varbound_args

bound_args = Slice.call(arguments, 2)

return function() { var args

args =bound_args.concat(slice.call(arguments))

return fn.apply(bound_this, args) }

}

위 내용은 자바스크립트 객체지향 튜토리얼 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!