>  기사  >  웹 프론트엔드  >  javascript_js 객체 지향으로 클래스를 작성하는 네 번째 방법

javascript_js 객체 지향으로 클래스를 작성하는 네 번째 방법

WBOY
WBOY원래의
2016-05-16 18:50:47863검색

4. 생성자와 프로토타입은 클래스를 직접 어셈블합니다. 동일한 생성자는 동일한 유형을 어셈블합니다.
이전 기사에서 우리는 JavaScript로 클래스를 작성하는 것이 생성자와 프로토타입에 지나지 않는다는 것을 알고 있습니다. 이 경우 클래스를 작성하는 도구 함수를 작성합니다.

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

/**
* $class는 클래스 작성 도구 함수 중 하나입니다.
* @param {Object} 생성자
* @param {Object} 프로토타입
*/
function $class(constructor,prototype) {
var c = constructor || function(){};
var p = 프로토타입 || {}; return c;
}


흠. 도구 클래스가 작성되었으니 조립해 보겠습니다. 생성자를 사용하여 클래스 인스턴스의 속성(필드)을 생성하고 프로토타입 객체를 사용하여 클래스 인스턴스의 메서드를 생성합니다.


//Constructor
function Person( name) {
this.name = name;
}
//Prototype 객체
var proto = {
getName : function(){return this.name},
setName : function( name){this.name = name;}
}

//Assembly
var Man = $class(Person,proto)
var Woman = $class(Person, proto) ;


자, 이제 남자와 여자의 두 클래스를 얻었습니다. 그리고 같은 종류입니다. 테스트 내용은 다음과 같습니다.


console.log (남자 == 여자) ;//true
console.log(Man.prototype == Woman.prototype);//true


객체를 생성하고 살펴보기


var man = new Man("Andy")
var 여성 = new Woman("Lily") ;
console.log(man 인스턴스of Man);//true
console.log(여성 인스턴스of Woman);//true
console.log(man 인스턴스of Person);//true
console .log(woman instanceof Person);//true


모든 것이 예상한 대로입니다. 그런데 다음 코드의 결과가 false로 출력되는 문제가 있습니다.


코드를 복사하세요. 코드는 다음과 같습니다.
console.log(man.constructor == Person);//false


이건 불쾌합니다. 위의 코드에서 사람이 실제로 다음을 통해 생성되었음을 알 수 있습니다. Man 클래스 new var man = new Man ("Andy")이면 객체 인스턴스 man의 생성자는 Man을 가리켜야 하지만 왜 역효과를 낳을까요?
Person의 프로토타입이 $class로 다시 작성되었기 때문입니다: c.prototype = p
좋아, $class를 약간 다시 작성하고 모든 메소드를 생성자의 프로토타입에 걸어두겠습니다. 생성자의 프로토타입)


function $class (constructor,prototype) {
var c = constructor || function(){};
var p = 프로토타입 {}// c.prototype = p; for(var atr in p)
c.prototype[atr] = p[atr]
return c;
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.