JS 객체지향, 프로토타입, call(), apply()_javascript 스킬

1. 원인
그날 프로토타입.js를 사용해서 열어서 살펴보았는데, 그 이유는 제가 js의 객체지향적 성격에 별로 익숙하지 않았기 때문이었습니다. , 그래서 바이두에서 구글링하다가 드디어 알아냈습니다. 수확, 기념으로 이렇게 적어봅니다^_^.
prototype.js 코드 조각

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

var 클래스 = {
create: function() {
return function() {
this.initialize.apply(this , 인수)
}
}
}
/ / 클래스 사용법은 다음과 같습니다
var A = Class.create()
A.prototype={
initialize:function(v){
this .value=v; }
showValue: function(){
alert(this.value);
}
}
var a = new A('helloWord!')
a. );//팝업 대화 상자 helloWord!

초기화란 무엇인가요?
적용 메소드는 무엇을 하나요?
arguments 변수는 어떻습니까?
l 왜 새로운 A 이후에 초기화 메소드가 실행되나요?
답 찾기:

2. 객체지향 Js 초기화란 무엇인가요?
클래스의 생성자로 사용되는 메소드를 나타내는 변수입니다.
JS의 객체지향 특성은 특정 기능을 지원합니다. 그렇다면 JS의 객체지향 특성은 어떤 모습일까요? Java와의 유사점과 차이점은 무엇입니까?
코드 보기:

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

var ClassName = function(v ){
this.value=v;
this.getValue=function(){
return this.value;
}
this.setValue=function(v ){
this .value=v;
}
}

그렇다면 JS에서 함수와 클래스의 차이점은 무엇일까요? 실제로는 동일합니다. ClassName은 new 뒤에 나타날 때 객체를 구성하는 생성자로 사용됩니다.

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

var objectName1 = new ClassName("a ");//객체 가져오기

여기서 objectName1은 ClassName 생성자를 실행한 후 얻은 객체이고 ClassName 함수의 this는 new 다음에 생성된 객체를 참조하므로 objectName1은 하나의 속성과 두 개의 메서드가 되어야 합니다. 다음과 같이 호출할 수 있습니다.

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

objectName1. setValue(' 'hello'');
alert(objectName1.getValue());//안녕하세요 대화상자
alert(objectName1.value);//안녕하세요 대화상자

그런 다음

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

var objectName2 = ClassName("b"); //객체 가져오기

objectName2는 무엇을 얻나요? 분명히 이는 메소드의 반환 값입니다. 여기서 ClassName은 일반 함수로 사용됩니다(첫 글자는 대문자로 표시됨). 하지만 이전에 작성한 ClassName에는 반환 값이 없으므로 objectName2는 확인되지 않습니다. 그렇다면 "b"는 누구에게 할당됩니까? 여기서는 객체가 생성되지 않지만 이 메소드는 단순히 실행되므로 이 메소드를 호출하는 객체 창에 이 "b"가 할당됩니다.
var objectName2 = ClassName("b");/ /get An object
alert(window.value); //Dialog b
따라서 JS의 모든 함수는 동일하지만 용도가 다를 수 있습니다(객체를 구성하거나 프로세스를 실행하는 데 사용).
초기화의 역할로 돌아갈 시간입니다.

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

var Class = {
create: function() {
return function() {
this.initialize.apply(this , 인수)
}
}
}
var A = Class.create();

이 코드는 함수를 구성하여 A에 복사합니다. 이 함수는

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

function() {
this.initialize.apply(this, 인수)


그리고 이 후자의 방법이 생성자로 사용됩니다. 이 생성자를 사용하여 객체를 생성할 때 생성된 객체의 초기화 변수는 apply() 메서드를 실행합니다. apply()의 목적은 나중에 설명하고 초기화에 대해서는 계속 설명하겠습니다. 이런 식으로 객체를 초기화할 때 초기화가 접촉됩니다(접속 방법은 적용에 따라 다름).
그럼

코드를 복사하세요 코드는 다음과 같습니다.

A.prototype= {
초기화:함수(v){
this .value=v;
}
showValue:function(){
alert(this.value)
}
}

은 무슨 뜻인가요?
프로토타입은 '프로토타입'을 의미합니다. A는 함수()이고, A. 프로토타입은 실제로 객체인 함수의 변수입니다. 이 개체의 메서드가 무엇이든 함수에 의해 생성된 개체에는 해당 메서드가 있으므로
var a = new A('helloWord!')
a.showValue();//대화 상자 팝업 안녕하세요워드!
따라서 객체 a에도 초기화 메서드가 있습니다. 뿐만 아니라 A가 생성한 모든 객체에는 초기화 메서드가 있습니다. 앞서 언급한 것처럼 생성자는 생성 중에 호출되며 생성자 호출에서 초기화가 호출됩니다. 그래서 초기화는 new A('helloWord!')일 때 적용 메소드를 호출하기 위해 다시 돌아갑니다. 초기화 메소드를 호출하는 것입니다.
3. call()과 Apply()
인터넷에서 몇 가지 정보를 찾아 내 연구와 결합하여 call()을 이해하고 적용해 보겠습니다. ( ) 기능. function().call(object,{},{}...) 또는 function().apply (object,[...])의 기능은 기본적으로 동일합니다. () 여기서 차이점은 호출 매개변수가 두 번째 매개변수부터 funciton으로 전달되며 ","로 구분하여 순서대로 나열할 수 있다는 것입니다. Apply에는 두 개의 매개변수만 있고, 두 번째 매개변수는 함수에 전달된 모든 매개변수를 저장하는 배열입니다.
this.initialize.apply(this, 인수);
은(는) 무슨 뜻인가요?
여기서 첫 번째 this는 new로 생성자를 호출한 후 생성된 객체를 의미하며, 이는 이전 a이므로 당연히 두 번째 this도 동일한 객체를 참조해야 합니다. 그러면 이 문장은 this(즉, a)가 초기화 메소드를 호출하고 매개변수가 인수 객체(매개변수의 배열 객체)이므로 생성자가 실행되면 객체 a는 초기화 메소드를 실행하여 초기화한다는 것입니다. "초기화"라는 단어와 일치한다는 것은 옳은 것을 의미합니다.
그렇다면 초기화 메소드를 실행하기 위한 매개변수는 어떻게 전달되나요?
4. 인수 객체
이 코드는 모든 것을 설명할 수 있습니다:

코드 복사 코드

function test(){
alert(typeof 인수)
for(var i=0; ialert ( 인수[i]);
}
}
test("1","2","3")
test("a","b");

실행 후, 경보(인수 유형);는 인수가 객체임을 나타내는 객체를 표시합니다. 그러면 1, 2, 3이 순서대로 재생됩니다. 설명 인수는 호출 함수의 실제 매개변수 그룹입니다.

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

var Class = {
create: function() {
return function() {
this.initialize.apply(this , 인수)
}
}
}

인수는 create에 의해 반환된 구조 함수의 실제 매개변수 그룹,
var a = new A('helloWord!')
'helloWord!'가 실제 매개변수 그룹인 경우(단 하나의 문자열만 있음) 이는 Apply 메소드에 전달된 다음 초기화를 호출할 때 초기화 함수 초기화에 매개변수로 전달됩니다.