JavaScript 프로토타입 object_javascript 기술의 속성 설명

一、什么是JavaScript中对象的prototype属性
　　JavaScript中对象的prototype属性，是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会”继承”赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢？
对于对象的prototype属性的说明，JavaScript手册上如是说：所有 JavaScript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法)，但该对象不能被赋予不同的原型。然而，用户定义的对象可以被赋给新的原型。

　　在JavaScript中，prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象（Function），函数对象都有一个子对象prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。在通过new创建一个类的实例对象的时候，prototype对象的成员都成为实例化对象的成员。
　　1、该对象被类所引用，只有函数对象才可引用；
　　2、在new实例化后，其成员被实例化，实例对象方可调用。
　　同时，函数是一个对象，函数对象若直接声明成员，不用被实例化即可调用。
JavaScript通过一种链接机制来支持继承，而不是通过完全面向对象语言（如Java）所支持的基于类的继承模型。每个JavaScript对象都有一个内置的属性，名为prototype。prototype属性保存着对另一个JavaScript对象的引用，这个对象作为当前对象的父对象。 
　

점 표기법을 통해 객체의 함수나 속성을 참조할 때 해당 객체에 함수나 속성이 없으면 객체의 프로토타입 속성을 사용합니다. 이런 일이 발생하면 객체의 프로토타입 속성에서 참조하는 객체를 검사하여 요청된 속성이나 함수가 있는지 확인합니다. 프로토타입 속성에 의해 참조되는 객체에 필요한 기능이나 속성이 없으면 이 객체(프로토타입 속성에 의해 참조되는 객체)의 프로토타입 속성을 추가로 확인하고 요청된 기능이나 속성을 찾을 때까지 체인을 검색합니다. 또는 요청된 함수나 속성이 체인의 끝에 도달했지만 체인의 끝에 도달했지만 정의되지 않은 경우가 반환됩니다.이런 의미에서 이 상속 구조는 "is a" 관계보다는 "has a" 관계에 더 가깝습니다.
맙소사, 아무것도 이해가 안 가는데 어떻게 해야 합니까? 정말 멋진 것 같지만 솔직히 나도 이해가 안 돼요! ^_^ ^_^ ^_^
2. 프로토타입 속성의 적용 예
일반적인 클래스에는 배열 변수(Array), 논리 변수(Boolean), 날짜 변수(Date )가 포함됩니다. , 구조변수(Function), 수치변수(Number), 객체변수(Object), 문자열변수(String) 등 이와 관련된 클래스 메소드도 프로그래머들이 자주 사용한다. 배열의 push 방식, 날짜의 get 시리즈 방식, 문자열의 분할 방식 등
그런데 실제 프로그래밍 과정에서 기존 방식의 단점을 느끼시나요? 프로토타입 방식이 탄생했습니다! 아래에서는 예제를 통해 간단한 것부터 깊은 것까지 프로토타입을 사용하는 방법을 설명합니다.
먼저 어리석은 예제를 살펴보겠습니다.

JavaScript 코드
function func(){
func.prototype. name = “func의 프로토타입”;
}
var f = new func();
alert(f.name); //func의 프로토타입
먼저 func 객체를 만들고 이름을 설정합니다. 속성, f 인스턴스화

1. 몇 가지 간단한 예:
(1) 숫자 추가:
JavaScript 코드
Number.prototype.add=function(num){
return (이 숫자); //여기서는 숫자
}를 가리킵니다
alert((3).add(15));//18
(2) Boolean.rev() : 함수, 부정 부울 변수
구현 방법: Boolean.prototype.rev = function(){return(!this);}
테스트: Alert((true).rev()) -> . 기존 메소드 구현 및 개선 프로토타입 첫 소개:
(1) Array.push(new_element)
함수: 배열 끝에 새 요소 추가
구현 방법:
Array .prototype.push = function(new_element){
this[this.length]=new_element;
return this.length;
}
한번에 할 수 있도록 더욱 강화해보겠습니다. 여러 요소!
구현 방법:
Array.prototype.pushPro = function() {
var currentLength = this.length;
for (var i = 0; i < 인수.길이; i ) {
This[currentLength i] = 인수[i];
}
return this.length;
}
이해하기 어렵지 않으시겠죠? 비유하자면, Array.pop을 강화하여 어떤 위치에서든 원하는 수의 요소를 삭제하는 방법을 고려할 수 있습니다(구체적인 코드는 자세히 설명하지 않음)

3. 새로운 기능 구현, 심층 프로토타입:이란 무엇입니까? 실제 프로그래밍에 사용되는 것은 확실히 기존 방법을 향상시킬 뿐만 아니라 더 많은 기능적 요구 사항도 포함합니다. 아래에서는 실제 문제를 해결하기 위해 프로토타입을 사용하는 두 가지 예를 제공합니다.
(1) String.left()
문제: VB를 사용해 본 사람이라면 문자열의 왼쪽에서 n자를 취하는 left 함수를 아실 겁니다. 그러나 단점은 전각과 반각이 모두 하나의 문자로 간주되어 가로채기가 불가능하다는 점입니다. 중국어와 영어의 혼합 레이아웃입니다. 긴 문자열
기능: 문자열의 왼쪽에서 n자를 가로채서 전자와 반자의 구분을 지원합니다.
구현 방법:
문자열. 프로토타입.왼쪽 = 함수(숫자, 모드){
if(!/d /.test(숫자))return(this);
var str = this.substr(0,num);
if (!mode) return str;
var n = str .Tlength() – str.length;
num = num – parseInt(n/2);
return this.substr(0,num);
}
테스트: 경고(“aa Laaa".left(4)) -> 랄랄라 표시
경보("aalalaaa".left(4,true)) -> 랄랄라 표시
이 메서드는 위의 메서드를 사용합니다. 언급된 String.Tlength() 메서드와 마찬가지로 몇 가지 좋은 새 메서드를 사용자 정의 메서드 간에 결합할 수도 있습니다!
(2) Date.DayDiff()
함수: 두 날짜 변수 사이의 간격(년, 월, 일, 주)을 계산합니다.
구현 방법:
Date.prototype.DayDiff = function(cDate ,모드){
                                                                 cDate.getYear();                         > 모드){
케이스 “y”:
result/=base*365;
break;
케이스 “m”:
result/=base*365/12;
break;
케이스 “ w”:
result/=base*7;
break;
default:
result/=base;
break;
}
return(Math.floor(result ));
}
테스트: Alert((new Date( )).DayDiff((new Date(2002,0,1)))) -> )).DayDiff((new Date(2002,0,1)),” m”)) -> Display 10
물론 응답 시간, 분 또는 초를 얻기 위해 더 확장할 수도 있습니다. .
(3) Number.fact()
함수 : 특정 숫자의 계승
구현 방법 :
Number.prototype.fact=function(){
var num = Math.floor( this);
if(num<0)return NaN;
if(num==0 || num==1)
return 1;
else
return (num*(num -1).fact());
}
테스트: Alert((4).fact()) -> 표시 24
이 방법은 주로 프로토타입에서도 재귀적 방법이 사용되는 것을 보여줍니다. 방법 작동합니다!
예:
배열의 최대값 가져오기:
JavaScript 코드
var oArr=new Array(); 프로토타입.MAX=function(){ 
 var i,max=this[ 0]; 
 for(i=1;i if(max max=this[i]
} } 🎜> }
return max;
}
alert(oArr.MAX())
인스턴스는 사용자 정의 클래스 추가 방법:
JavaScript 코드
function TestObject()
{ 
 this.m_Name = “ffffffffff”; 
} 

TestObject.prototype.ShowName = function()
{
경고(this.m_Name); > };
var f=new TestObject();
f.ShowName();
사용자 정의 클래스의 프로토타입 업데이트:

JavaScript 코드
function TestObjectA()
{
this.MethodA = function()
{
Alert('TestObjectA.MethodA()')
}
} 

function TestObjectB() 
{ 
 this.MethodB = function() 
 { 
  alert('TestObjectB.MethodB()');  
 }
}

TestObjectB.prototype = new TestObjectA();
이건 오해받은 상속이라고 들었는데 앞으로 천천히 배워보겠습니다.
또 다른 예를 보면 여러분과 제가 미쳐버린 것 같습니다.

JavaScript 코드
function RP() 
{ 
 RP.PropertyA = 1; 
 RP. MethodA = function()
{ 경고(“RP.MethodA”);

this.PropertyA = 100;
this.MethodA = function()
{ 🎜 >{
Alert(“RP.prototype.MethodA”);
//다음이 실행됩니다.
rp = new RP()
alert(RP.PropertyA); / /경고 결과: 1 
RP.MethodA();//경고 결과: RP.MethodA 
alert(rp.PropertyA);//경고 결과: 100 
rp. MethodA(); //경고 결과는 다음과 같습니다. this.MethodA
delete RP.PropertyA;
alert(RP.PropertyA); //경고 결과는 다음과 같습니다.

delete rp.PropertyA ;
alert( rp.PropertyA);//경고 결과: 100
delete rp.MethodA;
rp.MethodA();//경고 결과: RP.prototype.MethodA
매개변수가 있는 다른 것을 보고 원의 면적을 계산합니다.

JavaScript 코드
                                                                                                                         함수 정의와 구조적 차이는 없습니다. , 그래서 모든 기능에는 이러한 숨겨진 속성이 있다고 할 수 있습니다. */                                                     5);
alert(parseInt(Circ.area()))