>  기사  >  웹 프론트엔드  >  자기 자신과 javascript_javascript 기술의 사용법 요약

자기 자신과 javascript_javascript 기술의 사용법 요약

WBOY
WBOY원래의
2016-05-16 17:01:151150검색

1. 원인
그날 프로토타입.js를 사용해서 열어봤는데, 몇 줄만 읽어도 헷갈렸거든요. js의 객체지향적 특성을 잘 알고 있어서 바이두와 구글에서 검색을 하다가 조금 지나서 드디어 조금 얻었으니 기념으로 글을 남깁니다^_^.
prototype.js 코드 조각

코드는 다음과 같습니다.
var Class = {
create: function() {
return function() {
this.initialize.apply(this, 인수)
}
}
}
// 클래스는 다음과 같이 사용됩니다.
var A = Class.create()
A.prototype={
초기화:function(v){
this .value=v;
}
showValue:function(){
Alert(this.value)
}
}
var a = new A('helloWord !');
a.showValue();//helloWord 대화 상자를 팝업하세요!

l 초기화란 무엇인가요?
l Apply 메소드의 기능은 무엇인가요?
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 함수에서 이는 new 이후에 생성된 객체를 참조하므로 objectName1은 하나의 속성과 두 개의 메소드를 갖게 됩니다. 다음과 같이 호출할 수 있습니다.

코드는 다음과 같습니다.
objectName1.setValue(''hello'');
alert(objectName1.getValue());//Dialog hello
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 클래스 = {
생성: function() {
                                                                                                                                    ();


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

코드는 다음과 같습니다.

코드 복사

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

코드는 다음과 같습니다.

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

A.prototype={
초기화:function(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(){
경고(인수 유형);
for(var i=0; i 경고(인수[i])
}
}
test ("1","2","3");
test("a","b");

실행 후 경고(인수 유형) ; 개체를 표시하고 설명 인수는 개체입니다. 그러면 1, 2, 3이 순서대로 재생됩니다. 설명 인수는 호출 함수의 실제 매개변수 그룹입니다.
코드는 다음과 같습니다.


코드 복사 코드는 다음과 같습니다.
var 클래스 = {
생성: function() {
                                                                                                                            arguments는 create에 의해 반환된 생성자의 실제 매개변수 그룹입니다.
var a = new A('helloWord!')
' helloWord!'는 실제 매개변수 그룹입니다(단 하나의 문자열만 있음). Apply 메소드에 전달된 다음 초기화 호출 시 초기화 함수에 매개변수로 전달됩니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.