저자: F. Permadi
번역자: Sheneyan(Ziwu)
시간: 2006.01.03
영문 원문: INTRODUCTION TO JavaScript Functions
중국어 번역(예제 포함): javascript 함수
Ziwu의 메모 : 기능에 대한 꽤 좋은 소개글입니다. 개인적으로 꽤 고전적이라고 생각합니다.
단어 번역 목록
function: 함수(함수는 번역되지 않음)
declare: 정의
할당: 할당, 할당
functionbody: 함수 본문(즉, 함수)
객체: 객체
속성: 속성
unnamed: 익명(여기서 unnamed로 번역되지 않음)
객체 지향 프로그래밍: 지향 상대 프로그래밍
class: 클래스(예를 들어 저는 다음을 번역했습니다. 클래스 데이터 유형을 클래스 데이터 유형으로)
포인터: 포인터
재할당: 재할당
nest: 중첩
feature: 함수, 특성
local/global: local/global
blueprint : blueprint ( ? )
사용자 정의: 사용자 정의
인스턴스: 인스턴스
프로토타입: 프로토타입(제목 제외)
내부: 내부
생성자: 생성자
중복:
함수 정의
함수를 정의하는 방법에는 다음과 같은 방법이 있습니다. 이들 모두 유효하지만 내부적으로 구현되는 방식에는 약간의 차이가 있습니다.
일반적으로 모든 사람이 다음 작성 방법을 사용하여 함수를 정의합니다.
[클립보드에 복사]CODE:
functionName([parameters]){functionBody}; 🎜>예 D1:
[클립보드에 복사]CODE:
함수 추가(a, b) add(1,2)); // 결과 3
이와 같은 함수를 정의하면 함수 내용이 컴파일됩니다(그러나 호출하지 않으면 즉시 실행되지 않습니다). 게다가 이 함수가 생성되면 같은 이름의 객체도 생성된다는 사실을 모르실 수도 있습니다. 예를 들어 이제 "add"라는 개체가 있습니다(자세한 내용은 아래 함수: 개체 섹션을 참조하세요.)
또한 변수 이름을 할당하여 익명 함수를 정의할 수도 있습니다.
예 D2
[클립보드에 복사]코드:
var add=function(a, b)
{
경고(추가(1,2 )); // 결과 3
이 코드는 이전 예제와 동일한 작업을 수행합니다. 구문이 이상해 보일 수도 있지만 함수가 객체이고 쌍에 이름을 할당했다는 사실을 더 잘 알 수 있습니다. var myVar=[1,2,3]과 동일한 명령문으로 간주할 수 있습니다. 이렇게 선언된 함수 내용도 컴파일됩니다.
이러한 기능을 할당할 때 반드시 익명 기능일 필요는 없습니다. 여기서는ExampleD2와 같은 작업을 했지만 함수 이름 "theAdd"를 추가했고, 함수 이름이나 해당 변수를 호출하여 함수를 참조할 수 있습니다.
D2A 예시
[클립보드에 복사]코드:
var add=function theAdd(a, b)
{ ~ 이는 객체 지향에서 매우 유용합니다. 아래와 같이 함수를 객체의 속성으로 만들 수 있기 때문입니다.
[클립보드에 복사]CODE:
var myObject=new Object()
myObject.add=function(a,b){return a b}// 이제 myObject에는 "add"라는 속성(또는 메서드)이 있습니다.
// 다음과 같이 사용할 수 있습니다.
myObject.add(1, 2)
또한 Operator new를 사용하여 함수를 정의합니다. 이는 함수를 정의하는 가장 일반적인 방법이며 특별한 이유가 없는 한 권장되지 않습니다(가능한 이유는 아래 참조).구문은 다음과 같습니다.
[클립보드에 복사]CODE:
varName=new Function([param1Name, param2Name,...paramNName], functionBody); 예 D3:
[클립보드에 복사]CODE:
var add=new Function("a", "b", "return a b;")
alert(add( 3,4 )); // 결과 7
여기에는 a와 b라는 두 개의 매개변수가 있고 함수 본문은 a와 b의 합을 반환합니다. new Function(...)은 소문자 f 대신 대문자 F를 사용한다는 점에 유의하세요. 이는 JavaScript에 Function 유형의 객체를 생성할 것임을 알려줍니다. 또한 매개변수 이름과 함수 본문이 문자열로 전달된다는 점에 유의하세요. 원하는 대로 매개변수를 추가할 수 있으며, JavaScript는 함수 본문이 오른쪽 대괄호 앞의 마지막 문자열임을 알고 있습니다(매개변수가 없으면 함수 본문만 작성할 수 있습니다). 한 줄에 모든 내용을 작성할 필요는 없습니다(긴 코드를 구분하기 위해 문자열 연결을 사용하거나 사용함). 태그는 JavaScript에게 다음 줄에서 나머지 문자열을 찾도록 지시합니다. 예는 다음과 같습니다.
예 D4
[클립보드에 복사]CODE:
// " "
// 및 ""의 다른 사용법에 유의하세요.
var add=new Function("a", "b",
"alert"
"('adding 'a' 및 'b);
return a b;"); Alert(add( 3,4)); // 결과 7
이러한 방식으로 함수를 정의하면 해당 함수가 컴파일되지 않으며, 다른 방식으로 정의된 함수보다 속도가 느려질 수 있습니다. 그 이유는 다음 코드를 살펴보세요.
예제 D5
[클립보드에 복사]CODE:
function createMyFunction(myOperator)
{
return new Function ("a", "b", "return a" myOperator "b;")
}
var add=createMyFunction(" ") // 함수 "add" 생성 🎜>var subtract=createMyFunction("-"); // "subtract" 함수 생성
var Multiply=createMyFunction("*") // "multiply" 함수 생성
// 함수 테스트
Alert(" 덧셈의 결과=" add(10,2)); //결과는 12입니다.
alert("뺄셈의 결과=" subtract(10,2)) //결과는 8입니다. 🎜>alert("Multiply Result=" Multiply(10,2)); // 결과는 20입니다.
alert(add);
이 흥미로운 예는 서로 다른 매개변수를 전달하여 생성된 세 가지 다른 함수를 만듭니다. 실시간으로 새로운 기능. 컴파일러는 최종 코드가 어떻게 보일지 알 수 없기 때문에 new Function(...)의 내용은 컴파일되지 않습니다. 그렇다면 이점은 무엇입니까? 예를 들어, 게임처럼 사용자가 자신만의 기능을 만들 수 있어야 하는 경우 유용할 수 있습니다. 사용자가 "플레이어"에 "행동"을 추가하도록 허용해야 할 수도 있습니다.그러나 다시 말하지만, 특별한 목적이 없는 한 일반적으로 이 형식을 사용하지 않아야 합니다.
함수: 객체
함수는 JavaScript에서 객체의 특별한 형태입니다. 첫 번째 [b] 클래스 데이터 유형입니다. 이는 속성을 추가할 수 있음을 의미합니다. 다음은 주목해야 할 몇 가지 흥미로운 사항입니다.
앞서 언급했듯이 함수를 정의할 때 JavaScript는 실제로 뒤에서 객체를 생성합니다. 이 객체의 이름은 함수 이름 자체입니다. 이 객체의 유형은 function입니다. 다음 예에서는 깨닫지 못할 수도 있지만 실제로는 Ball이라는 객체를 생성했습니다.
예제 1
[클립보드에 복사]CODE:
function Ball() // 조금 이상해 보일 수도 있지만 이 선언은 Ball이라는 객체
i=1;
} 이 함수의 실제 코드를 출력합니다. 예 2: Alert(Ball)을 클릭하면 Ball의 내용을 볼 수 있습니다.
객체 함수를 포함하여 객체에 속성을 추가할 수 있습니다. 함수 정의의 본질은 객체를 생성하는 것이기 때문입니다. 우리는 "비밀스럽게" 함수에 속성을 추가할 수 있습니다. 예를 들어 여기서는 Ball 함수를 정의하고 callsign 속성을 추가합니다.
[클립보드에 복사]CODE:
function Ball() // 조금 이상해 보일 수 있지만 이 명령문
{은 Ball이라는 객체를 생성하고 } // 인용하거나 속성을 늘립니다.
Ball.callSign = "The Ball" 다음과 같이 속성을 추가합니다.
Alert(Ball.CallSign) to Ball // 출력 "The Ball"
함수는 객체이므로 함수에 포인터를 할당할 수 있습니다. 다음 예에서와 같이 ptr 변수는 myFunction 개체를 가리킵니다.
[클립보드에 복사]CODE:
function myFunction(message)
{
Alert(message)
}
var ptr=myFunction; // ptr은 myFunction을 가리킵니다
ptr("hello"); // 이 문장은 myFunction을 실행합니다: "hello" 출력
함수 이름이 포인터 이름으로 대체된 것처럼 이 함수를 실행할 수 있습니다. 따라서 위 줄에서 ptr("hello"); 와 myFunction("hello"); 의 의미는 동일합니다.
함수에 대한 포인터는 객체 지향 프로그래밍에서 매우 유용합니다. 예: 동일한 함수를 가리키는 여러 객체가 있는 경우(다음과 같이):
예 4A
[클립보드에 복사]CODE:
function sayName(name)
{
경고(이름);
}
var object1=new Object(); // 세 개의 객체 생성
var object2=new Object(); Object();
object1.sayMyName=sayName; // 이 함수를 모든 개체에 할당
object2.sayMyName=sayName;
object1.sayMyName object1"); // "object1" 출력
object2.sayMyName("object2"); // "object2" 출력
object3.sayMyName("object3"); // "object3" 출력
함수 자체가 아닌 포인터만 저장되므로 함수 개체 자체를 변경하면 해당 함수를 가리키는 모든 포인터가 변경됩니다.아래와 같이 볼 수 있습니다:
예 5:
[클립보드에 복사]CODE:
function myFunction()
{
Alert(myFunction.message) ;
}
myFunction.message="old";
var ptr1=myFunction;
ptr1(); // "신규" 출력
PTR 2 ( ); // "New" 출력
함수 생성 후에 할당할 수 있지만 함수 객체에 대한 포인터가 아닌 함수 객체 자체를 가리켜야 합니다. 다음 예에서는 myfunction()의 내용을 변경하겠습니다.
예 6:
[클립보드에 복사]CODE:
function myFunction()
{
Alert("Old")
}
myFunction(); // "기존" 출력
myFunction=function()
{
Alert("New")
myFunction(); "새 기능"
기존 기능은 어디에 있나요? ? 버려진.
유지해야 하는 경우 변경하기 전에 포인터를 할당할 수 있습니다.
예 6A:
[클립보드에 복사]CODE:
function myFunction()
{
Alert("Old")
}
var selectedFunction=myFunction;
myFunction=function()
{
Alert("New")
}; // "New" 출력
savedFuncion(); // "Old" 출력
하지만 주의하세요. 다음과 같은 예는 수정하는 대신 myFunctionPtr이라는 다른 함수를 생성하므로 작동하지 않습니다.
예 6B:
[클립보드에 복사]CODE:
function myFunction()
{
Alert("Old")
}
var selectedFunc=myFunction;
savedFunc=function()
{
Alert("New")
}; // "Old" 출력
savedFunc(); // "New" 출력
함수 내에 함수를 중첩할 수도 있습니다. 다음 예에는 getHalfOf라는 함수가 있고 그 안에 계산이라는 또 다른 함수가 있습니다.
예제 7
[클립보드에 복사]CODE:
function getHalfOf(num1, num2, num3)
{
functioncalculate(number)
{
숫자/2 반환
}
var result="";
result =calculate(num1) " "
result =calculate(num2) " ";
result =calculate(num3);
return result;
}
var resultString=getHalfOf(10,20,30)
alert(resultString); "
내부적으로 중첩된 함수만 호출할 수 있습니다. 즉, 외부 함수(getHalfOf())가 실행 중일 때만 계산이 존재하므로 getHalfOf.calculate(10)을 호출할 수 없습니다. 이는 이전 논의와 일치합니다(함수는 컴파일되지만 호출할 때만 실행됩니다).
이름 충돌을 고려하고 계실 수도 있습니다.예를 들어, 다음 중 계산이라는 함수 중 어떤 함수가 호출됩니까?
예 8
[클립보드에 복사]CODE:
함수 계산(번호)
{
반환 번호/3
}
function getHalfOf(num1, num2, num3)
{
함수 계산(숫자)
{
반환 숫자/2
}
var result= "";
결과 =calculate(num1) " ";
result =calculate(num2) "
result =calculate(num3) "
var resultString=getHalfOf(10,20,30);
alert(resultString); // 출력 "5 10 15"
이 예에서는 컴파일러가 먼저 로컬 메모리 주소를 검색하므로 내장된 계산 기능이 사용됩니다. 인라인(로컬) 계산 함수를 삭제하면 이 코드는 전역 계산 함수를 사용합니다.
함수: 데이터 유형 및 생성자
다른 객체 유형과 완전히 다른 함수의 또 다른 특별한 기능을 살펴보겠습니다. 함수는 데이터 유형에 대한 청사진으로 사용될 수 있습니다. 이 기능은 사용자 정의 데이터 유형을 시뮬레이션하기 위해 객체 지향 프로그래밍에서 자주 사용됩니다. 사용자 정의 데이터 유형을 사용하여 생성된 개체를 일반적으로 사용자 정의 개체라고 합니다.
함수를 정의한 후에는 새로운 데이터 유형도 생성합니다. 이 데이터 유형은 새 개체를 만드는 데 사용할 수 있습니다. 다음 예에서는 Ball이라는 새로운 데이터 유형을 만들었습니다.
예제 DT1
[클립보드에 복사]CODE:
function Ball()
{
}
var ball0=new Ball(); // ball0은 이제 새 개체를 가리킵니다
alert(ball0); // ball0은 이제 개체이므로 "Object"를 출력합니다.
이러한 방식으로 ball0=new Ball()은 뭐? new 키워드는 Object 유형(ball0이라고 함)의 새 객체를 만듭니다. 그런 다음 Ball()을 실행하고 이 참조를 ball0(호출 객체의 경우)에 전달합니다. 아래에서는 Ball()이 실제로 실행되면 "새 공 만들기"라는 메시지가 표시됩니다.
예제 DT2
[클립보드에 복사]CODE:
함수 공(메시지)
{
경고(메시지)
var ball0=new Ball("creating new Ball"); // 객체 생성 및 메시지 출력
ball0.name="ball-0"; // ball0에는 이제 name 속성이 있습니다.
alert(ball0. name); // 출력 "ball-0"
위 코드의 6번째 줄은 아래 코드의 6~8번째 줄의 약어라고 생각하면 됩니다.
[ 클립보드로 복사]CODE:
function Ball(message)
{
Alert(message);
}
var ball0=new Object()
ball0.construct= Ball;
ball0.construct("creating new ball"); // ball0.Ball("creating..") 실행
ball0.name="ball-0";
ball0.construct=Ball 코드 줄은 예제 4의 ptr=myFunction과 동일한 구문을 갖습니다.
여전히 이 줄의 의미를 이해하지 못한다면 돌아가서 예시 4를 검토하세요. 참고: ball0.Ball("...")을 직접 실행하는 것을 고려할 수도 있지만 ball0에는 Ball("...")이라는 속성이 없고 사용자가 무엇인지 모르기 때문에 작동하지 않습니다. 뭔가 하고 싶어.
위와 같이 new 키워드를 사용하여 객체를 생성하면 새로운 객체가 생성됩니다. 생성 후에 이 객체에 속성을 추가할 수 있습니다(위에서 속성 이름을 추가한 것처럼). 다음 문제는 이 객체의 다른 인스턴스를 생성하는 경우 아래 속성과 같이 이를 새 객체에 다시 추가해야 한다는 것입니다.)
예제 DT3(공 객체 3개 생성)
[클립보드에 복사]CODE:
function Ball()
{
}
var ball0=new Ball(); // ball0은 이제 Ball 유형의 새 인스턴스를 가리킵니다.
ball0.name="ball-0" // ball0에는 이제 "name" 속성이 있습니다.
var ball1 =new Ball();
ball1.name="ball-1";
var ball2=new Ball()
alert(ball0.name); ball-0"
alert(ball1.name); // "ball-1" 출력
alert(ball2.name); // 아, ball2에 "name"을 추가하는 걸 깜빡했네요!
ball2에 속성 이름을 추가하는 것을 잊어버렸는데, 이로 인해 정식 프로그램에서 문제가 발생할 수 있습니다. 속성을 자동으로 추가하는 좋은 방법이 있나요? 음, 하나가 있습니다: this 키워드를 사용하세요. 이 단어는 기능상 특별한 의미를 갖습니다. 함수를 호출한 개체를 가리킵니다. 아래의 또 다른 예를 살펴보겠습니다. 이번에는 생성자에 다음 속성을 추가합니다.
예제 DT4
[클립보드에 복사]CODE:
function Ball(message, 지정된Name )
{
Alert(message);
this.name=specifiedName; )
alert(ball0.name); // "Soccer Ball"을 인쇄합니다.
궁극적으로 생성자가 실행되도록 하는 것은 새 키워드입니다. 이 예에서는 Ball("creating new Ball", "Soccer Ball")을 실행하고 키워드는 ball0을 가리킵니다.
따라서 다음 줄: this.name=specifiedName은 ball0.name="Soccer Ball"이 됩니다.
이는 주로 ball0에 속성 이름을 추가하고 속성 값은 Soccer Ball이라는 의미입니다.
이제 ball0에 이름 속성을 추가하기만 하면 됩니다. 이는 이전 예에서 했던 것과 매우 유사해 보이지만 더 좋고 확장 가능한 방법입니다. 이제 속성을 수동으로 추가하지 않고도 원하는 만큼 많은 공을 만들 수 있습니다. 또한 사람들은 생성된 Ball 객체가 생성자를 명확하게 이해하고 Ball의 모든 속성을 쉽게 찾을 수 있기를 바랍니다. Ball에 더 많은 속성을 추가해 보겠습니다.
예제 DT5
[클립보드에 복사]CODE:
function Ball(color, 지정된 이름, 소유자, 무게)
{
this.name=specifiedName ; ", "John", 20);
var ball1=new Ball("회색", "Bowling Ball", "John", 30);
var ball2=new Ball("노란색", "골프 Ball ", "John", 55);
var Balloon=new Ball("red", "Balloon", "Pete", 10);
alert(ball0.name); Soccer Ball"
alert(balloon.name); // "풍선" 출력
alert(ball2.weight) // "55" 출력
안녕하세요! 객체 지향 용어를 사용하면 Ball은 이름, 색상, 소유자, 무게 등의 속성을 가진 객체 유형이라고 말할 수 있습니다.
문자열이나 숫자와 같은 단순한 데이터 유형을 속성으로 추가하는 데만 국한되지 않습니다. 객체를 속성에 할당할 수도 있습니다.아래에서 supervisor는 Employee의 속성입니다.
예 DT6
[클립보드에 복사]CODE:
function Employee(이름, 급여, mySupervisor)
{
this.name=name;
this.salary=salary;
this.supervisor=mySupervisor; 🎜>var Manager=new Employee("Joan", 50, boss); Employee("Rose", 50, boss);
alert(manager.supervisor.name "은 "manager.name"의 감독자입니다.
alert(manager.name "의 감독자는 " 관리자입니다.) .supervisor.name);
무엇이 출력되나요?
위의 예에서 볼 수 있듯이 관리자와 팀리더 모두 감독자 속성을 가지며 이 속성은 Employee 유형의 개체입니다.
모든 유형의 객체를 속성으로 사용할 수 있습니다. 이전 예제 4(예제 DT4 아님)를 떠올려 보면 함수도 객체입니다. 따라서 함수를 객체의 속성으로 만들 수 있습니다. 아래에서는 getSalary와 addSalary라는 두 가지 함수를 추가하겠습니다.
예제 DT7
[클립보드에 복사]CODE:
함수 직원(이름, 급여)
{
this.name=name; =salary;
this.addSalary=addSalaryFunction;
this.getSalary=function()
{
return this.salary }; 🎜>function addSalaryFunction(추가)
{
this.salary=this.salary 추가;
}
var boss=new Employee("John", 200000) boss .addsalary (10000); // 상사의 급여가 10K 증가합니다 ... 상사의 급여가 왜 그렇게 많이 늘어날 수 있습니까? '(
Alert (boss.getsalarly ()); // 210K를 출력합니다 ... 기본 급여도 왜 also so high... :'(
AddSalary 및 getSalary는 속성에 함수를 할당하는 여러 가지 방법을 보여줍니다. 초기 토론을 기억하신다면 함수를 선언하는 세 가지 방법에 대해 논의했습니다. 모두 여기에 적용 가능합니다. , 그러나 위에 표시된 두 가지가 가장 일반적입니다.
다음으로 코드의 이 부분이 실행되면 getSalary 함수가 실행됩니다. 앞서 여러 번 언급했듯이 함수 선언의 결과는 객체가 생성되므로 boss가 생성되고(다음 줄 19) boss에 getSalary 속성이 있습니다.
[클립보드에 복사]. 코드:
function 직원(이름, 급여)
{
this.name=name; addSalary=addSalaryFunction;
this.getSalary=function()
}
}
function addSalaryFunction(추가)
{
this.salary=this.salary 추가;
}
var boss=new Employee("John", 200000)
var boss2 =new Employee("Joan", 200000) ;
var boss3=new Employee("Kim", 200000);
이 개체(boss2 및 boss3)의 인스턴스를 더 생성하면 각 인스턴스에는 getSalary 코드가 있습니다. 반면에 addSalary는 동일한 위치(예: addSalaryFunction)를 가리킵니다.
위에서 설명한 내용을 이해하려면 아래 코드를 살펴보세요.
예제 DT8
[클립보드에 복사]CODE:
함수 직원(이름, 급여)
{
this.name=name; =salary;
this.addSalary=addSalaryFunction;
this.getSalary=function()
}; .salary=this.salary 추가;
}
var boss1=new Employee("John", 200000)
var boss2=new Employee("Joan", 200000);
// getSalary 함수 개체에 속성 추가
boss1.getSalary.owner="boss1";
boss2.getSalary.owner ="boss2"
alert(boss1.getSalary. owner); // "boss1" 출력
alert(boss2.getSalary.owner); // "boss2" 출력
// 두 개체가 동일한 함수 개체를 가리키는 경우
// 위의 출력은 "boss2"여야 합니다.
// addSalary 함수 개체에 속성 추가
boss1.addSalary.owner="boss1";
boss1.addSalary.owner="boss2"
alert(boss1.addSalary. owner ); // "boss2" 출력
alert(boss2.addSalary.owner); // "boss2" 출력
// 두 개체 모두 동일한 함수를 가리키기 때문에 (Ziwu의 참고 사항: 원본 텍스트는 그렇지 않습니다. 동일한 기능을 가리키는데 오타가 의심됨)
// 둘 중 하나가 수정되면 모든 인스턴스에 영향을 미칩니다(따라서 둘 다 "boss2" 출력).
아마도 중요하지 않을 수 있습니다. 그러나 위의 getSalary와 같은 내장 함수를 실행하는 것에 대한 몇 가지 결론은 다음과 같습니다. 1) 객체를 저장하려면 더 많은 저장 공간이 필요합니다(각 객체 인스턴스에는 자체 getSalary 코드 복사본이 있기 때문입니다). 2) javascript 더 많은 시간 이 객체를 구성하려면 필요합니다.
이 예제를 더 효율적으로 다시 작성해 보겠습니다.
예제 DT9
[클립보드에 복사]CODE:
함수 직원(이름, 급여)
{
this.name=name; =salary;
this.addSalary=addSalaryFunction;
this.getSalary=getSalaryFunction;
}
function getSalaryFunction()
{
return this.salary; }
function addSalaryFunction(addition)
{
this.salary=this.salary 추가;
}
여기를 보세요. 두 함수 모두 동일한 위치를 가리킵니다. 이렇게 하면 공간이 절약되고 생성 시간이 단축됩니다(특히 생성자에 중첩된 함수가 많은 경우). 이 디자인을 개선할 수 있는 또 다른 기능이 있는데, 이를 프로토타입이라고 하며 다음 섹션에서 이에 대해 논의하겠습니다.
함수: 프로토타입
각 생성자에는 프로토타입이라는 속성이 있습니다(프로토타입은 아래에 번역되지 않으므로 원본 텍스트 사용). 이 속성은 특정 클래스에 대한 공통 변수나 함수를 선언하는 데 매우 유용합니다.
프로토타입 속성은 모든 생성자에 존재하므로 명시적으로 선언할 필요가 없습니다. 다음 예를 살펴볼 수 있습니다.
예제 PT1
[클립보드에 복사]CODE:
function Test()
{
}
Alert(Test.prototype); // "Object" 출력
위에서 볼 수 있듯이 프로토타입은 객체이므로 속성을 추가할 수 있습니다. 프로토타입에 추가하는 속성은 이 생성자를 사용하여 생성된 객체에 공통적으로 적용됩니다.
예를 들어, 아래에 Fish라는 데이터 유형이 있고 모든 물고기가 다음 속성을 갖기를 원합니다. 이를 달성하기 위해 해당 속성을 프로토타입에 추가할 수 있습니다. 생성자 물고기.
예제 PT2
[클립보드에 복사]CODE:
함수 물고기(이름, 색상)
{
this.name=name; this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20
다음으로 물고기를 만들어 보겠습니다.
[클립보드에 복사]CODE:
var fish1=new Fish("mackarel", "gray")
var fish2=new Fish("goldfish", "orange")
var fish3=new Fish("salmon", "white");
물고기의 속성을 살펴보겠습니다:
[클립보드에 복사]CODE:
for (var i=1; i{
var fish=eval("fish" i); // 물고기에 대한 포인터를 가져옵니다.
Alert (fish. name "," fish.color "," fish.livesIn "," fish.price) }
출력은 다음과 같습니다:
[클립보드에 복사] 코드:
"마카렐, 회색, 물, 20"
"금붕어, 오렌지, 물, 20"
"연어, 흰 물, 20"
모든 물고기에는 속성이 있습니다. livesIn 및 가격이 있으며, 각 물고기에 대해 이러한 속성을 구체적으로 선언하지도 않습니다. 이는 객체가 생성될 때 이 생성자가 해당 속성 프로토타입을 새 객체의 내부 속성 __proto__에 할당하기 때문입니다. 이 __proto__는 이 개체에서 해당 속성을 찾는 데 사용됩니다.
프로토타입을 통해 모든 객체에 공통 기능을 추가할 수도 있습니다. 이는 객체를 생성할 때마다 이 함수를 생성하고 초기화할 필요가 없다는 장점이 있습니다.이를 설명하기 위해 예제 DT9를 다시 방문하여 프로토타입을 사용하여 다시 작성해 보겠습니다.
예제 PT3
[클립보드에 복사]CODE:
function Employee( 이름, 급여)
{
this.name=name; return this.salary;
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this. 급여 추가
}
평소와 같이 객체를 생성할 수 있습니다:
[클립보드에 복사]CODE:
var boss1=new Employee("Joan", 200000 );
var boss2=new Employee ("Kim", 100000);
var boss3=new Employee("Sam", 150000)
그리고 확인하세요:
[클립보드에 복사]CODE:
alert(boss1.getSalary()); // 출력 200000
alert(boss2.getSalary()) // 출력 100000
alert(boss3.getSalary ()); // 출력 150000
다음은 프로토타입의 작동 방식을 보여주는 다이어그램입니다. 이 객체의 각 인스턴스(boss1, boss2, boss3)에는 생성자(Employee)의 속성 프로토타입을 가리키는 __proto__라는 내부 속성이 있습니다. getSalary 또는 addSalary를 실행하면 이 객체는 __proto__에서 이 코드를 찾아 실행합니다. 참고하세요: 여기에는 중복된 코드가 없습니다(예제 DT8의 다이어그램과 비교).
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
