JavaScript 함수, 객체 생성, 캡슐화, 속성 및 메서드, 상속_javascript 기술

1. 함수
js를 처음 접했을 때부터 굉장히 유연하다고 느꼈어요. 사람마다 쓰는 방식이 다 다르거든요. 예를 들어 함수를 작성하는 방법은 N가지가 있어요.
예: function showMsg(){ }, var showMsg=function( ){}, showMsg=function(){}
별 차이 없는 것 같은데, 정말 똑같나요?

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

///--------- ------------ ------------------------- ------------ -----

---------
//함수 정의 : 명명된 함수(선언적), 익명 함수(참조 공식)
//선언적, 함수 실행 코드 이전에 정의 코드가 구문 분석됩니다.
function t1(){
dwn("t1")
}
t1();
function t1(){
dwn("new t1")
}
t1()//동적으로 구문 분석되는 참조 유형 함수 연산
var t1=function (){
dwn("new new t1")
}
t1()
var t1=function(){
dwn( "new new new t1");
t1()
//위 출력: new t1, new t1, new new t1, new new new t1


t1, new t1, new newt1, new new new t1이 출력되어야 할 수도 있지만 결과는 다음 문장을 이해해야 합니다. 선언

수식, 정의 코드는 함수 전에 구문 분석됩니다. 실행 코드
한 단계 더 깊이 들어가면 범위 체인 문제라고 해야 합니다. 실제로 처음 두 메서드는 window.t1이 window의 공용 속성으로 할당되어 있음을 알 수 있습니다. 두 개의 값이고 마지막 할당이 최종 값입니다. >후자의 두 메서드는 t1이 변수로 이해될 수 있으며 var를 제거한 후 네 번째 메서드의 결과는 여전히 변경되지 않습니다
그러나 네 번째 메서드의 경우 함수 t1(){}과 같은 문으로 변경됩니다. 수식을 사용하면 결과는 new new new t1,new new new

t1,new new t1,new new t1
제가 이해한 바에 따르면 첫 번째 두 개는 왜 이 답변인지 잘 알 수 있고, 세 번째도 이해가 되지만 마지막 출력은

보다 더 혼란스럽습니다. 답변해 줄 수 있는 전문가가 있기를 바랍니다
. (function(){...})() 과 같은 익명 함수 작성 방법으로는 마지막 괄호를 매개변수 입력
으로 사용하고 var t1=new function(){..}과 같은 구문이 있습니다. 사실 t1은 이미 객체입니다.
예:




코드 복사

코드는 다음과 같습니다. var t2 = new function() { var temp = 100; //비공개 멤버

this.temp = 200; //공용 멤버, 이 두 개념은 세 번째에서 설명하겠습니다. 이후

return temp this.temp;

alert(typeof(t2)); //object
alert(t2.constructor()) //300 >또한 함수를 구성하기 위해 시스템 내장 함수 객체를 사용하는 방법도 있습니다. 예:
var t3 = new Function('var temp = 100; this.temp = 200; return temp this.temp ;'); //이 위치에 new를 추가하든 안 하든 결과는 동일합니다. WHY
alert(typeof(t3)) ; //function
alert(t3()); 🎜>

두 번째, 객체 생성
먼저 객체 지향 프로그래밍(OOP)을 이해하고, OOP 기술을 사용하면 많은

코드 모듈이 사용됩니다. 각 모듈은 특정 기능을 제공합니다. 다른 모듈과 분리되거나 심지어 완전히 독립적입니다
. 이 모듈식 프로그래밍 접근 방식은 엄청난 다양성을 제공하고 코드 재사용 기회를 크게 늘립니다. 이 문제를 더 자세히 설명하기 위해

컴퓨터의 고성능 응용 프로그램이 일류 경주용 자동차라고 가정해 보겠습니다. 전통적인 프로그래밍 기술을 사용하면 자동차는

단일 장치가 됩니다. 자동차를 개선하고 싶다면 유닛 전체를 교체하거나, 제조사에 다시 보내 자동차 전문가에게 업그레이드를 받거나, 새

자동차를 구입해야 합니다. OOP 기술을 사용하는 경우 쇠톱으로 차체를 자르는 대신 제조업체에서 새 엔진을 구입하고 지침에 따라 직접 교체하기만 하면 됩니다.
그러나 대부분의 주장은 JavaScript가 직접적인 객체지향 언어는 아니지만 시뮬레이션을 통해 객체지향 언어가 할 수 있는 많은 일을 할 수 있다는 것입니다. 다형성, 캡슐화, JavaScript로 가능합니다 (불가능하지 않습니다. 생각이 나지 않습니다)




코드 복사


코드는 다음과 같습니다.


///--------------------------------- ---------------- ---------------------------------- -----------

- ------ //객체를 구성하는 다음 세 가지 방법 //새 객체, 객체 인스턴스화 var a=new Object(); a.x=1,a.y= 2; //객체 직접 수량

var b={x:1,y:2}//정의 유형

function Point(x,y){ //C# 클래스와 유사
this.x=x;
this.y=y
}
var p=new Point(1, 2); //클래스 인스턴스화


첫 번째 방법은 기본 객체를 구성하고 속성을 직접 추가하는 방식으로 구현됩니다. 두 번째 방법은 첫 번째 방법과 유사하며 첫 번째 방법의 단축 표현이라고 볼 수 있습니다


. 세 번째 방법은 "클래스"를 기반으로 동일한 유형의 여러 객체를 생성할 수 있습니다

3. 객체 속성 캡슐화(공개 및 비공개)
예제가 포함된 설명
함수 목록(){
var m_elements=[]; //Private 멤버는 객체 외부에서 접근할 수 없습니다. 여기에 var 선언이 없으면 m_elements는 전역 변수

가 되어 외부에서 직접 접근이 가능합니다. (m_elements[0])

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

m_elements=Array .apply(m_elements,arguments);
//사용 시 getter를 시뮬레이션합니다.
//getName() 메서드와 동일: this.length=function(){return m_elements .length;} 사용 시

alist.length();
//공용 속성은 "." 연산자 또는 아래 첨자를 통해 액세스할 수 있습니다.
this.length={
valueOf:function(){
return m_elements.length;
},
toString:function(){
return m_elements.length;
}
}//공개 메서드, 이 메서드는 경고( alist)는 Alert(alist.toString())
this.toString=function(){
return m_elements.toString()
}
// 공개 메서드
this와 동일합니다. .add=function(){
m_elements.push.apply(m_elements,arguments);
}
//Private 메소드는 클로저 개념을 포함하는 다음과 같은 형태입니다. 계속 설명하겠습니다.
//var add=function() 또는 function add()
//{
//m_elements.push.apply(m_elements,arguments)
//}
}
var alist=new List(1,2,3);
dwn(alist); //=alert(alist.toString()), 출력 1,2,3
dwn(alist.length); //출력 3
alist.add(4,5,6);
dwn(alist); //출력 1,2,3,4,5,6
dwn(alist.length); //출력 6

4. 속성 및 메서드 유형
JavaScript에서 객체 속성 및 메서드는 개인 속성(개인 속성), 동적 공개 등 4가지 유형을 지원합니다.

속성(동적 공용 속성), 정적 공용 속성/프로토타입 속성(정적 공용 속성 또는 프로토타입 속성),
정적 속성(정적 속성 또는 클래스 속성). 개인 속성은 외부 세계에서 완전히 액세스할 수 없으며 내부 getter 및

setter를 통해 액세스할 수 있습니다(둘 다 시뮬레이션임). 외부 세계에서 액세스할 수 있으며 각 객체 인스턴스는 복사본을 보유하고 있습니다. 서로 영향을 주지 않습니다. 프로토타입
속성은 각 객체 인스턴스와 고유한 복사본을 공유합니다. 클래스 속성은 인스턴스의 속성으로 사용되지 않고 클래스의 속성으로만 사용됩니다.
다음은 예시입니다.

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

///- -------------------------------- ----- -----------

-- ----
//동적 공개 유형, 정적 공개 유형(프로토타입 속성)
function myClass(){
var p=100; //private 속성
this.x=10; /dynamic public property
}
myClass.prototype.y=20; //정적 공용 속성 또는 프로토타입 속성은 myClass의 프로토타입에

속성을 ​​동적으로 추가하며 이는 인스턴스화된 모든 객체에 적용됩니다. . 여기서는 프로토타입을 사용하는데 매우 유용합니다
//고급 JavaScript 단계가 되려면 프로토타입과 클로저를 이해하고 적절하게 적용해야 합니다
myClass.z=30 //정적 속성

var a=new myClass();
dwn(a.p) //정의되지 않음
dwn(a.x) //10
dwn(a.y) //20
a.x=20; 🎜>a.y=40;
dwn(a.x); //20
dwn(a.y); //40
delete(a.x); //객체 a의 속성 삭제
delete( a.y); //객체 a의 y 속성 삭제
dwn(a.x); //정의되지 않음
dwn(a.y); //20 정적 공용 속성 y가 프로토타입 속성 y
dwn으로 복원됩니다. ( a.z 삭제 후); // 정의되지 않은 클래스 속성은 객체를 통해 액세스할 수 없습니다


5. 프로토타입(prototype)
여기서 논의한 프로토타입과 클로저 둘 다 단 몇 마디로 명확하게 설명할 수 있는 것이 아닙니다. 이것이 여러분에게 어느 정도 깨달음을 줄 수 있다면 운이 좋습니다.

“고양이를 찍고 호랑이를 그려라”라는 관용어처럼, 여기서 고양이는 프로토타입이고 호랑이는 유형입니다. Tiger.prototype=someone cat 또는

tiger.prototype=new cat()
프로토타입 속성은 고유한 속성을 공유하기 때문에 객체 인스턴스당 복사, 인스턴스 중 하나가 프로토타입 속성의 값을 조정하면 모든 인스턴스가 조정됩니다

이 속성을 사용할 때마다 이에 주의해야 합니다
다음은 유형 체인입니다. 프로토타입 관계:

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

function ClassA(){
}
ClassA.prototype=new Object()
function ClassB(){
}
ClassB.prototype=new ClassA() ;
function ClassC(){
}
ClassC.prototype=new ClassB();
var obj=new ClassC()
dwn(obj 인스턴스of ClassC); 🎜>dwn(objinstanceofClassB); //true
dwn(objinstanceofClassA); //true
dwn(objinstanceofObject); //true
기본값이 있는 점 객체:
function Point2(x,y){
if (x) this.x=x;
if (y) this.y=y
}
//Point2 객체의 x 설정 , y의 기본값은 0입니다.
Point2.prototype.x=0;
Point2.prototype.y=0
//p1은 기본(0,0) 객체입니다.
var p1 = new Point2(); //오류 없이 var p1=new Point2를 작성할 수 있습니다. WHY
//P2 할당
var p2=new Point2(1,2)
dwn(p1.x " ," p1.y); //0,0
dwn(p2.x "," p2.y); //1,2
객체의 속성을 삭제한 후 프로토타입 속성은 다음으로 돌아갑니다. 초기화된 상태:
function ClassD(){
this.a=100;
this.b=200;
this.c=300
}
ClassD.prototype=new ClassD() ; //값을 포함하여 ClassD의 원래 속성을 프로토타입으로 설정합니다. ​​
ClassD.prototype.reset=function(){ //프로토타입이 아닌 속성 삭제
for (각각 var) {
삭제[각각];
}
var d=new ClassD()
dwn(d.a); //100
d.a*=2; >d.b*= 2;
d.c*=2;
dwn(d.a); //200
dwn(d.b); //400
dwn(d.c); d.reset( ); //프로토타입이 아닌 속성을 삭제하고 모든 프로토타입을 반환합니다.
dwn(d.a) //100
dwn(d.b) //200
dwn(d.c);


6. 상속
두 클래스가 동일한 인스턴스 유형인 경우 두 클래스 사이에는 일정한 관계가 있습니다. 동일한 인스턴스의 유형을 일반화합니다

관계. 상속이라고 합니다. 이는 C#과 JAVA 모두에서 사용할 수 있으므로 구체적인 이해는 다루지 않겠습니다.
자바스크립트에서는 상속이 메서드에서 직접 지원되지는 않지만 앞서 언급했듯이 시뮬레이션이 가능합니다.
메서드는 구성 상속, 프로토타입 상속, 인스턴스 상속, 복사 상속의 네 가지 유형으로 요약할 수 있습니다. 마스터한 후 혼합연속

방법도 있는데 앞의 4가지 중 몇개를 골라서 섞어주는 방법이에요~
다음 예시는 왕의귀환에서 따온건데, 신청, 전화 및 일부가 포함됩니다. Array의 사용에 관심이 있으시면 정원에서

을 검색하실 수 있습니다
1. 공사 계속 방법의 예:




코드 복사

코드는 다음과 같습니다. //컬렉션 유형 정의 함수 컬렉션(크기)

{

this.size = function(){return size} ; //공용 메서드, 상속 가능
}

Collection.prototype.isEmpty = function(){ //정적 메서드, 상속 불가 상속됨
return this.size() == 0;
}

//컬렉션 유형을 "상속"하는 ArrayList 유형 정의
function ArrayList()
{
var m_elements = []; //비공개 멤버는 상속할 수 없습니다.
m_elements = Array.apply(m_elements, 인수)

//ArrayList 유형은 Collection을 상속합니다.
this.base = Collection ;
this.base.call(this, m_elements.length );

this.add = function()
{
return m_elements.push.apply(m_elements, 인수); 🎜>}
this.toArray = function()
{
return m_elements;
}
}

ArrayList.prototype.toString = function()
{
return this.toArray().toString();
}
//ArrayList 유형을 상속하는 SortedList 유형 정의
function SortedList()
{
//The SortedList 유형은 ArrayList를 상속합니다
this.base = ArrayList;
this .base.apply(this, 인수)

this.sort = function()
{
var arr = this.toArray();
arr.sort.apply(arr, 인수)
}
}

//ArrayList 구성
var a = new ArrayList(1, 2,3);
dwn(a);
dwn (a.size()); //a는 Collection에서 size() 메서드를 상속합니다
dwn(a.isEmpty); isEmpty() 메서드를 상속하지 않습니다

//SortedList를 하나 구성합니다.
var b = new SortedList(3,1,2)
b.add(4,0); //b ArrayList에서 add() 메서드를 상속합니다.
dwn(b.toArray() ); //b ArrayList에서 toArray() 메서드를 상속했습니다.
b.sort() //b 자체 구현된 sort() 메서드입니다.
dwn(b.toArray());
dwn(b );
dwn(b.size()); //b는 Collection에서 size() 메서드를 상속합니다.

🎜>2, 프로토타입 상속 예시:

코드 복사

코드는 다음과 같습니다

//포인트 유형 정의
함수 포인트(차원)
{

this.dimension = 차원
}

//정의 Point2D 유형, "상속" 포인트 유형
function Point2D(x, y)
{
this.x = x
this.y = y
Point2D.prototype; .distance = function()
{
return Math.sqrt(this.x * this.x this.y * this.y)
}
Point2D.prototype = new Point(2) ; //Point2D는 Point를 상속합니다

//Point3D 유형을 정의하고 Point 유형도 상속합니다
function Point3D(x, y, z)
{
this.x = x; >this.y = y;
this.z = z;
}
Point3D.prototype = new Point(3); //Point3D도 Point를 상속합니다

//구성 A Point2D 객체
var p1 = new Point2D(0,0);
//Point3D 객체 생성
var p2 = new Point3D(0,1,2)

dwn( p1 .dimension);
dwn(p2.dimension);
dwn(p1instanceofPoint2D); //p1은 Point2D입니다.
dwn(p1instanceofPoint); //p1도 Point입니다. dwn(p2 instanceof Point); //p2는 ​​Point입니다


위의 두 메서드가 가장 일반적으로 사용됩니다.
3, 인스턴스 상속 메서드 예:

이 메서드 예를 이야기하기 전에 , 생성 상속 방법의 한계에 대해 다음과 같이 이야기해 보겠습니다.

코드 복사 코드는 다음과 같습니다. function MyDate ()

{

this.base = Date;
this.base.apply(this, 인수)
}
var date = new MyDate( );
alert(date .toGMTString); //정의되지 않음, date는 Date 유형에서 상속되지 않으므로 toGMTString 메소드가 없습니다.


핵심 객체의 일부 메소드는 상속될 수 없습니다. 핵심 객체가 우리만큼 사용자 정의되지 않았기 때문에 생성자 일반 객체처럼 생성자에서

할당 또는 초기화 작업
을 수행하고 이를 프로토타입 상속으로 바꾸는 것은 어떻습니까? ,

코드 복사 코드는 다음과 같습니다. function MyDate(){ }

MyDate.prototype=new Date();

var date=new MyDate();
alert(date.toGMTString); //'[object]'는 날짜 객체가 아닙니다. Date 유형을 상속하지 않습니다!


이제 인스턴스 상속으로 전환합니다.

코드를 복사합니다. 코드는 다음과 같습니다. function MyDate()

{

var instance = new Date() //인스턴스는 새로 생성된 날짜 객체입니다.
instance.printDate = function(){
document.write("

"instance.toLocaleString() "

")
} //printDate() 메서드를 인스턴스로 확장
//인스턴스를 반환합니다. constructor Value return
}
var myDate = new MyDate();
dwn(myDate.toGMTString()); //이번에는 올바른 시간 문자열이 출력된 것 같습니다. . 인스턴스


, 상속 성공
myDate.printDate(); //반환 인스턴스가 없으면 프라이빗 개체 메서드이므로 첨자로 액세스할 수 없습니다.

4 , 상속 방법 복사 예:

코드 복사 코드는 다음과 같습니다. Function.prototype .extends = function(obj)

{

for(var Each in obj)
{
this.prototype[each] = obj[each]
//의 속성을 복사합니다. 그러나 느리고 문제가 발생하기 쉽습니다
//그래서 이 "상속" 방법은 일반적으로 권장되지 않습니다
}
}
var Point2D = function(){
//...
}
Point2D.extends(new Point())
{
//...
}


이 상속 메서드 거의 사용되지 않는 것 같습니다.
5, 혼합 상속 예:

코드 복사 코드는 다음과 같습니다. function Point2D( x, y)

{

this.x = x;
this.y = y
}
function ColorPoint2D(x, y, c)
{
Point2D .call(this, x, y); //부모 클래스의 생성자를 호출하는 생성 상속입니다.
//이전 예에서는
과 동일합니다.//this.base= Point2D ;//this.base.call(this,x,y);
this.color = c;
}
ColorPoint2D.prototype = new Point2D(); 여기에서 상속하고 ColorPoint2D가 Point2D 객체를 프로토타입으로 사용하도록 합니다