> 웹 프론트엔드 > JS 튜토리얼 > javascript(함수 확장)_javascript 스킬에 프로토타입 속성을 사용하는 방법

javascript(함수 확장)_javascript 스킬에 프로토타입 속성을 사용하는 방법

WBOY
풀어 주다: 2016-05-16 18:21:01
원래의
884명이 탐색했습니다.

이는 상대적으로 특별한 속성입니다. Javascript의 상속은 일반적으로 이 속성에 의존합니다.
Javascript에서는 모든 것이 객체이고, 문자열도 객체이고, 배열도 객체이고, 변수도 객체이고, 함수도 객체이므로 ['a','b','c'].push(' d') ;이러한 작업이 존재합니다. 클래스 자체도 객체이며 속성과 메서드를 정의할 수도 있습니다.

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

function Test(){};
Test.str = 'str';
Test.fun = function(){return 'fun';}
var r1 = 테스트. str; // str
var r2 = Test.fun(); // fun
var inst = new Test()
var r3 = inst.str; inst.fun() ; // 정의되지 않음

프로토타입은 클래스에 작용하는 속성입니다. 기본적으로 모든 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' }
function pt2()
{ this.test2'; ;
pt2.prototype.test3 = 'test3';
pt2.prototype.test1 = 'test4';
pt1.prototype = new pt2()
Test.prototype() ;
var inst = new Test();
var p1 = inst.test; // 정의되지 않음
var p2 = inst.test1; // test4 대신 pt1
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.prototype.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 str for(var i in test)
{
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; .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이 삭제되었습니다.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿