> 웹 프론트엔드 > JS 튜토리얼 > Patterns_js 객체 지향을 호출하는 js 함수 요약

Patterns_js 객체 지향을 호출하는 js 함수 요약

WBOY
풀어 주다: 2016-05-16 17:57:58
원래의
1359명이 탐색했습니다.
메소드 호출 모드
함수가 객체의 속성으로 저장되면 이를 객체의 메소드라고 부르고 이것이 객체에 바인딩됩니다.
코드 복사 코드는 다음과 같습니다.

var myObject={
name : "myObject" ,
값 : 0 ,
증분: 함수(num){
this.value = typeof(num) === 'number' ? num : 0; >toString : function(){
return '[Object:' this.name ' {value:' this.value '}]'
}
}
alert(myObject);// [객체: myObject {값:0}]


함수 호출 모드
함수가 객체의 함수가 아닌 경우 함수로 호출하며, 이것이 전역 개체에 대한 바인딩입니다. 이것은 언어 설계의 실수입니다. 언어 설계가 올바른 경우 내부 함수가 호출될 때 이 함수는 여전히 외부 함수의 this 변수에 바인딩되어야 합니다. 예:

var myObject={
name : " myObject" ,
value : 0 ,
increment : function(num){
this.value = typeof(num) === 'number' ? num : 0; ,
toString : function(){
return '[Object:' this.name ' {value:' this.value '}]'
},
getInfo:function(){
return ( function(){
return this.toString();//내부 익명 함수의 this는 전역 객체 창을 가리킵니다.
})()
}
}
alert(myObject.getInfo ());//[object Window]


다행히도 쉬운 해결책이 있습니다. 변수를 정의하고 값을 할당하면 내부 함수가 이에 액세스할 수 있습니다. 이 변수를 통해 다음과 같은 객체를 가리킵니다.


코드 복사 코드는 다음과 같습니다. var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value = typeof(num) === 'number' ? num : 0;
} ,
toString : function(){
return '[Object:' this.name ' {value:' this.value '}]'; 🎜>getInfo:function() {
var self=this;
return (function(){
return self.toString(); // 변수 self를 통해 myObject 객체를 가리킵니다
} )();
}
}
alert(myObject.getInfo());//[Object:myObject {value:0}]



생성자 호출 mode

JavaScript는 프로토타입 상속을 기반으로 하는 언어입니다. 이는 객체가 다른 객체로부터 직접 속성을 상속받을 수 있음을 의미합니다. 언어에는 계급이 없습니다.
앞에 new를 두고 함수를 호출하면 함수에 연결된 프로토타입 멤버를 숨기는 새 객체가 생성되며, 이는 생성자의 인스턴스에 바인딩됩니다.


코드 복사
코드는 다음과 같습니다. function MyObject(이름){ this.name =name || 'MyObject'; this.value=0;
this.increment=function(num){
this.value = typeof(num) === '숫자' ? num : 0 ;
};
this.toString=function(){
return '[Object:' this.name ' {value:' this.value '}]'; 🎜>this .target=this;
}
MyObject.prototype.getInfo=function(){
return this.toString();
}
/*
MyObject 만들기 .prototype 동시에 Object, myObject는 MyObject.prototype의 모든 속성을 상속합니다.
이것은 MyObject의 인스턴스에 바인딩됩니다.
*/
var myObject=new MyObject()
var otherObject= new MyObject()
//alert(myObject.target===myObject);//ture
//alert(myObject.target.getInfo());//[Object:MyObject {value:0 }]
myObject.increment(10);
otherObject.increment(20)
alert(myObject.value);//10
alert(otherObject.value);//20



호출 모드 적용

JavaScript는 함수형 객체지향 프로그래밍 언어이므로 함수에 메서드가 있을 수 있습니다.
함수의 적용 메소드는 마치 객체가 이 메소드를 갖고 있는 것처럼 객체가 이 메소드를 갖게 만듭니다. 이때 this는 객체를 가리킵니다.
apply는 두 개의 매개변수를 받습니다. 첫 번째는 바인딩할 개체(이 항목이 가리키는 개체)이고 두 번째는 매개변수 배열입니다.


코드 복사.


코드는 다음과 같습니다.

function MyObject(이름){
this.name=name || '내 개체';
this.value=0;
this.increment=function(num){
this.value = typeof(num) === 'number' ? 번호 : 0;
};
this.toString=function(){
return '[Object:' this.name ' {value:' this.value '}]';
}
this.target=this;
}
function getInfo(){
return this.toString();
}
var myObj=new MyObject();
alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj
alert(getInfo.apply(window));//[객체 창],this指向창
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿