Object.defineProperties
(
Person,
{
'name' : { value: 'Chen Hao'},
'email' : { value : ' haoel@hotmail .com'},
'website': { value: 'http://jb51.net'}
}
)
Person.sayHello = function () {
var hello = "
안녕하세요, 저는 " this.name "입니다.
"내 이메일 주소는 " this.email ",
" 내 웹사이트는 " this.website;
document.write(hello "
");
}
var Student = Object.create(Person);
Student. no = " 1234567"; //학생ID
Student.dept = "컴퓨터공학"; //Department
//Person
document.write(Student.name '' Student.email ' ' Student.website '
');
//Person 메서드 사용
Student.sayHello()
//SayHello 메서드 오버로드
학생.sayHello = 함수(사람) {
var hello = "
안녕하세요. 저는 " this.name "입니다."
"내 이메일은 " this.email "입니다. , "내 웹사이트는 " this.website ",
"
"내 학생 번호는 " this. no ",
"
"내 부서는 " this.dept;
document.write(hello '
');
}
//다시 전화하기
Student.sayHello();
//학생 속성 보기(no, dept 및 오버로드된 sayHello만)
document.write('' Object.keys(Student) '
')
위의 예를 사용하면 Person의 속성이 실제로 Student에 복사되지는 않지만 해당 속성에 액세스할 수 있음을 알 수 있습니다. 이는 Javascript가 대리자를 사용하여 이 메커니즘을 구현하기 때문입니다. 실제로 이것이 프로토타입이고 Person이 Student의 프로토타입입니다.
//Output aaa
document.write('
' Student.name '
//첸 하오 출력
document.write('
' Object.getPrototypeOf(Student).name '
'); 🎜 >
따라서 C의 Base::func()처럼 하위 개체의 함수에서 상위 개체의 함수를 호출할 수도 있습니다. 따라서 hello 메소드를 재정의할 때 아래와 같이 상위 클래스의 코드를 사용할 수 있습니다.
//오버로드된 SayHello 메서드의 새 버전
Student.sayHello = function(person) {
Object.getPrototypeOf(this).sayHello.call(this );
var hello = "내 학생 번호: " this. no ",
"
"내 부서: "
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 '그림 시작...'
//Sportsman
var Sporter = Object.create(null)
Sporter. run = function() {
return this.name '달리기 시작합니다...'
}
Sporter.swim = function() {
return this.name '수영 시작...' ;
}
구성(사람, 아티스트)
document.write(Person.sing() '
')
document.write(Person.paint() '< ;br>');
구성(Person, Sporter)
document.write(Person.run() '
')
document.write(Person. swim( ) '
');
//Person에 무엇이 있는지 확인하세요. (출력: sayHello,sing,paint,swim,run)
document.write('
' Object.keys(Person) '
')
프로토타입 그리고 상속
먼저 Prototype에 대해 이야기해 보겠습니다. 먼저 다음 루틴을 살펴보겠습니다. 이 루틴은 C 언어의 함수 포인터와 매우 유사합니다.
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, '');
이것을 캡슐화하려면 프로토타입을 사용해야 합니다. 아래 예를 보세요.
this.y = y
}
Cal.prototype.Operations = {
' ': 함수 (x, y) { return x y;},
'-': function(x, y) { return x-y;}
}
Cal.prototype.calculate = function(Operation) {
return this.Operations[작업](this.x, this.y)
var c = new Cal(4, 5); .calculate(' ' );
c.calculate('-')
프로토타입의 사용법은 자바스크립트 언어에서 가장 중요한 내용입니다. 인터넷에 이 문제에 대한 기사가 너무 많습니다. 직설적으로 말하면 프로토타입은 객체를 확장하는 것입니다. 새 인스턴스를 만드는 대신 기존 인스턴스를 "복사"하여 새 인스턴스를 반환하는 것이 특징입니다. 복사된 인스턴스는 우리가 "프로토타입"이라고 부르는 것이며 이 프로토타입은 사용자 정의할 수 있습니다(물론 여기에는 실제 복사본이 없고 위임만 있습니다). 위의 예에서는 Cal 인스턴스를 확장하여 작업 속성과 계산 메서드를 갖습니다.
이런 식으로 이 기능을 통해 상속을 구현할 수 있습니다. 첫 번째 Person을 기억하세요. 다음 예는 Person을 상속할 Student를 만드는 것입니다.
기능 사람(이름, 이메일, 웹사이트) {
this.name = 이름;
this.email;
this.website = 웹사이트
}
Person.prototype.sayHello = function() 🎜>var hello = "안녕하세요. 저는 " this.name "입니다."
"내 이메일은 " this.email ",
" 내 웹사이트는 "입니다. .website;
return hello
};
function Student(이름, 이메일, 웹사이트, 번호, 부서){
var proto = Object.getPrototypeOf
proto(학생) .prototype) .constructor.call(this, name, email, website);
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 = "내 학생 번호는 "입니다. ",
"
"내 부서는 "입니다.
return hello
; 나 = 신입생(
"Chen Hao",
"haoel@hotmail.com",
"http://jb51.net",
"12345678",
"컴퓨터 과학 "
);
document.write(me.sayHello());
호환성
위 코드는 모든 브라우저에서 작동하지 않을 수 있습니다. ECMAScript 5의 사양입니다. ECMAScript 5의 브라우저 호환성 목록은 여기에서 "ES5 브라우저 호환성 목록"을 볼 수 있습니다.
이 글의 모든 코드는 최신 버전의 Chrome에서 테스트되었습니다.
다음은 ES5와 호환되지 않는 브라우저에서 사용할 수 있는 일부 기능입니다.
Object.create() 함수
코드 복사
Dummy.prototype = proto;
Dummy .prototype.constructor = Dummy;
return new Dummy(); //Object.create(Person)과 동일
var me = clone(Person );
defineProperty() 함수
코드 복사
descriptor.get && target. __defineGetter__(key, descriptor.get);
descriptor.set && target.__defineSetter__(key, descriptor.set)
}
반환 대상
}
keys() function
코드 복사
}
}
Object.getPrototypeOf() 함수
코드 복사
}
바인드 함수
코드 복사
코드는 다음과 같습니다. var Slice = [].slice functionbind(fn,bound_this) { varbound_args bound_args = Slice.call(arguments, 2)
return function() { var args
args =bound_args.concat(slice.call(인수))
return fn.apply(bound_this, args) }
}
参考
W3CSchool MDN(Mozilla Developer Network)
MSDN(Microsoft Software Development Network)
Javascript OOP 이해
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
