JScall () 및 apply () 방법에 대한 인스턴스 요약 사용
모든 함수는 두 가지 비계승적인 방법을 포함한다:call () 방법과apply () 방법이다.
공통점: 이 두 방법의 작용은 같다.
모두 특정한 작용역에서 함수를 호출하는 것은 함수체내this대상의 값을 설정하여 함수를 확충하여 운행하는 작용역에 의존하는 것과 같다.
일반적으로,this는 항상 어떤 방법을 호출하는 대상을 가리키지만,call () 과apply () 방법을 사용할 때,this의 방향을 바꿉니다.
call() 메서드 사용 예:
// 1
<script>
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call(); //red ( )
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red
changeColor.call(s1); //blue
</script>
// 2
var Pet = {
words : '...',
speak : function (say) {
console.log(say + ''+ this.words)
}
}
Pet.speak('Speak'); // :Speak...
var Dog = {
words:'Wang'
}
// this Dog
Pet.speak.call(Dog, 'Speak'); // : SpeakWang
apply() 메서드 사용 예:
// 1
<script>
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three' };
function changeColor(){
console.log(this.number);
}
changeColor.apply(); //one ( )
changeColor.apply(window); //one
changeColor.apply(document); //two
changeColor.apply(this); //one
changeColor.apply(s1); //three
</script>
// 2
function Pet(words){
this.words = words;
this.speak = function () {
console.log( this.words)
}
}
function Dog(words){
//Pet.call(this, words); // : Wang
Pet.apply(this, arguments); // : Wang
}
var dog = new Dog('Wang');
dog.speak();
차이점: 매개 변수를 수신하는 방식이 다르다.apply () 방법은 두 개의 매개 변수를 수신합니다. 하나는 함수 운행의 작용역 (this) 이고, 다른 하나는 매개 변수 그룹입니다.
문법: apply([thisObj[,argArray]]);,하나의 대상을 호출하는 방법, 다른 두 개의 대상이 현재 대상을 대체합니다.
설명:argArray가 유효한 그룹이 아니거나arguments 대상이 아니라면
TypeError,argArray와thisObj의 매개 변수를 제공하지 않으면 Global 대상은thisObj로 사용됩니다.
call () 방법의 첫 번째 매개 변수는 apply () 방법과 같지만, 함수에 전달된 매개 변수는 반드시 열거해야 합니다.
문법:call([thisObject[,arg1[,arg2[,...,argn]]]]);,객체의 한 방법을 적용하여 현재 객체를 다른 객체로 대체합니다.
설명:call 방법은 다른 대상을 대체하여 하나의 방법을 호출할 수 있습니다.call 방법은 함수의 대상 상하문을 초기 상하문에서thisObj가 지정한 새로운 대상으로 변경할 수 있습니다.thisObj 파라미터를 제공하지 않으면 Global 대상은thisObj에 사용됩니다.
사용 예 1:
function add(c,d){
return this.a + this.b + c + d;
}
var s = {a:1, b:2};
console.log(add.call(s,3,4)); // 1+2+3+4 = 10
console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14
예 2 사용:
<script>
window.firstName = "Cynthia";
window.lastName = "_xie";
var myObject = {firstName:'my', lastName:'Object'};
function getName(){
console.log(this.firstName + this.lastName);
}
function getMessage(sex,age){
console.log(this.firstName + this.lastName + " : " + sex + " age: " + age );
}
getName.call(window); // Cynthia_xie
getName.call(myObject); // myObject
getName.apply(window); // Cynthia_xie
getName.apply(myObject);// myObject
getMessage.call(window," ",21); //Cynthia_xie : age: 21
getMessage.apply(window,[" ",21]); // Cynthia_xie : age: 21
getMessage.call(myObject," ",22); //myObject : age: 22
getMessage.apply(myObject,[" ",22]); // myObject : age: 22
</script>
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.