javascript_javascript 스킬의 프로토타입 속성 분석 및 설명 예시

Javascript에서는 모든 것이 객체이고, 문자열도 객체이고, 배열도 객체이고, 변수도 객체이고, 함수도 객체이므로 ['a','b','c'].push('d') 가 허용됩니다. 이런 수술이 존재합니다. 클래스 자체도 객체이며 속성과 메서드를 정의할 수도 있습니다.

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

function Test(){};
Test.str = 'str';
Test.fun = function(){return 'fun';}

var r1 = Test.str; // str
var r2 = Test.fun(); // 재미

var inst = new Test()
var r3 = inst.str;
var r4 = inst.fun(); // undefineprototype은 클래스에 작용하는 속성입니다. 기본적으로 모든 Javascript 클래스에는 프로토타입 속성이 있지만 클래스 인스턴스에는 없습니다.

function Test(){};

var p1 = typeof(String.prototype); // 객체
var p2 = typeof(Test.prototype); >var p3 = typeof(new Test().prototype); // 정의되지 않음

var p4 = typeof(Object.prototype); // 객체
var p5 = typeof(new Object().prototype ); // 정의되지 않은 값 획득 및 할당

Javascript에서는 객체에 존재하지 않는 속성이나 메서드를 얻으면 해당 객체에 해당하는 클래스가 있는지 확인하려고 합니다. 속성 또는 메소드가 프로토타입 속성에 포함되어 있고 프로토타입도 Javascript 객체입니다. 그렇지 않은 경우 프로토타입은 해당 클래스의 프로토타입에 액세스하고 필요한 속성 또는 메소드를 찾을 때까지 레벨별로 액세스합니다. 프로토타입 속성이 null입니다.

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

function Test(){}; >Test.test = 'str';

function pt1()
{ this.test1 = 'pt1' }; = 'pt2'; };
pt2.prototype.test3 = 'test3';
pt2.prototype.test1 = 'test4'

pt1.prototype = new
Test.prototype = new pt1();
var inst = new Test();

var p1 = inst.test; // 정의되지 않음
var p2 = inst.test1; test4 대신
var p3 = inst.test2; // pt2
var p4 = inst.test3; // test3 할당은 값을 얻는 것보다 훨씬 간단합니다.


프로토타입 레이어의 속성값을 레이어별로 조회하는 것이 아니라, 현재 인스턴스에 직접 값을 할당하고, 존재하지 않는 경우 생성합니다.

내장 클래스 강화
내장 클래스의 프로토타입은 자바스크립트에서 직접 수정할 수 없습니다. 그러나 프로토타입의 속성을 수정하여 내장 클래스의 동작을 수정할 수 있습니다.

코드 복사

코드는 다음과 같습니다. Array.prototype = {push:function( ){alert ('test1');}}; // 작동하지 않음 Array.prototype.push = function(){alert('test2');} // 가능 var test = new Array ('a ','b','c');

test.push('d'); // 한 번에 여러 요소를 삽입할 수 있는 test2의 Array.push 함수:

Array. 프로토타입.pushs = function()
{
var pos = this.length
for(var i=0; i{
this[ pos] = 인수[i ];
return this.length;
}
var test = new Array('a','b','c')
test.pushs ('d' ,'e');


for 문을 사용하여 속성을 출력할 때 내장 클래스의 프로토타입에 추가된 함수도 표시된다는 점에 유의할 가치가 있습니다. 🎜>



코드 복사

코드는 다음과 같습니다.

var for(var i 테스트 중) { str = (' ' i); // '0 1 2 3 4 5 pushes'는 맞춤 기능을 푸시합니다. }

그러나 hasOwnProperty()로 판단할 수 있습니다.




코드 복사

코드는 다음과 같습니다:

var str; for(var i in test) { if(test.hasOwnProperty(i)) // 푸시 기능을 필터링합니다. . { str = (' ' i) }

}

주의할 점
앞서 언급했듯이 프로토타입은 클래스의 속성입니다. 프로토타입의 속성 값을 변경하면 예상치 못한 재난이 발생할 수 있습니다!

코드 복사


코드는 다음과 같습니다.

function Test(){}
Test.prototype.num = 3;

var inst1 = new Test()
var inst2 = new Test(); >
Test.prototype.num = 4; // Test.prototype.num을 가리키는 모든 값.
var p1 = inst1.num; // 4
var p2 = inst2.num; // 4

inst1.num = 5; // 할당은 inst 객체에 대한 num 속성을 생성합니다. .
Test.prototype.num = 6; // Test.prototype.num을 가리키는 모든 값.
var p3 = inst1.num; // 5 여기에 반환되는 것은 Test.prototype.num의 값이 아니라 방금 생성된 inst1.num의 값입니다.
var p4 = inst2.num; // 6

delete Test.prototype.num;
var p5 = inst1.num; // 5 inst1.num이 여전히 존재합니다.
var p6 = inst2.num; // 정의되지 않은 Test.prototype.num이 삭제되었습니다.