js에서 적용 및 호출 사용법

이 글은 js에서 적용과 호출의 사용법을 주로 소개합니다. 이제는 여러분과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

ECAMScript3에는 두 가지 메소드가 정의되어 있습니다. Function.prototype.call 및 Function.prototype.apply입니다. 이 글에서는 Apply와 Call의 사용법을 자세하게 소개하고 있으니 필요하시면 참고하시면 됩니다.

Preface

call 및 Apply 모두 컨텍스트, 즉 함수가 실행될 때 컨텍스트를 변경하기 위해 존재합니다. 즉, 함수 본문 내에서 this의 포인터를 변경하는 것입니다.
call과 apply ​​​​는 기능은 완전히 동일하지만 매개변수를 받아들이는 방식이 다릅니다.

메서드 정의
apply
Function.apply(obj,args) 메서드는 두 개의 매개변수를 받을 수 있습니다. Function.apply(obj,args)方法能接收两个参数：

obj：这个对象将代替Function类里this对象

args：这个是数组或类数组，apply方法把这个集合中的元素作为参数传递给被调用的函数。

call

call方法与apply方法的第一个参数是一样的，只不过第二个参数是一个参数列表

在非严格模式下当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window

var test = function(){
  console.log(this===window);
}
test.apply(null);//true
test.call(undefined);//true

用法

"劫持"别人的方法

此时foo中的logName方法将被bar引用 ，this指向了bar

var foo = {
  name:"mingming",
  logName:function(){
    console.log(this.name);
  }
}
var bar={
  name:"xiaowang"
};
foo.logName.call(bar);//xiaowang

实现继承

function Animal(name){   
  this.name = name;   
  this.showName = function(){   
    console.log(this.name);   
  }   
}   

function Cat(name){  
  Animal.call(this, name);  
}   

var cat = new Cat("Black Cat");   
cat.showName(); //Black Cat

在实际开发中，经常会遇到this指向被不经意改变的场景。
有一个局部的fun方法，fun被作为普通函数调用时，fun内部的this指向了window，但我们往往是想让它指向该#test节点，见如下代码：

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun();//window
}

使用call,apply我们就可以轻松的解决这种问题了

window.id="window";
document.querySelector('#test').onclick = function(){
  console.log(this.id);//test
  var fun = function(){
    console.log(this.id);
  }
  fun.call(this);//test
}

当然你也可以这样做，不过在ECMAScript 5的strict模式下，这种情况下的this已经被规定为不会指向全局对象，而是undefined：

window.id="window";
document.querySelector('#test').onclick = function(){
  var that = this;
  console.log(this.id);//test
  var fun = function(){
    console.log(that.id);
  }
  fun();//test
}

function func(){
  "use strict"
  alert ( this );  // 输出：undefined
}
func();

其他用法

类数组

这里把符合以下条件的对象称为类数组

1.具有length属性

2.按索引方式存储数据

3.不具有数组的push,pop等方法

常见类数组有 arguments,NodeList!

(function(){
  Array.prototype.push.call(arguments,4);
  console.log(arguments);//[1, 2, 3, 4]
})(1,2,3)

这样就往arguments中push一个4进去了

Array.prototype.push

obj: 이 개체는 Function 클래스의 이 개체를 대체합니다

args:

이것은 배열 또는 유사 배열입니다. Apply 메소드는 이 컬렉션의 요소를 호출된 함수에 매개변수로 전달합니다.

call

call 메소드

의 첫 번째 매개변수는 apply 메소드와 동일합니다. 단, 두 번째 매개변수는 매개변수 목록

비엄격 모드에서 첫 번째 매개변수가 null 또는 정의되지 않은 값으로 전달되면 함수 본문의 this는 브라우저에서 window

var arr1=new Array("1","2","3"); 
var arr2=new Array("4","5","6"); 
Array.prototype.push.apply(arr1,arr2); 
console.log(arr1);//["1", "2", "3", "4", "5", "6"]

Usage

"hijack" 다른 사람의 메서드

this인 기본 호스트 개체를 가리킵니다. foo

의

logName 메소드가 bar에 의해 참조될 때 this

는 상속

(function(){
  var maxNum = Math.max.apply(null,arguments);
  console.log(maxNum);//56
})(34,2,56);

🎜을 구현하기 위해 🎜bar🎜🎜🎜🎜

console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]

🎜🎜🎜🎜을 가리킵니다. 🎜 실제 개발에서 자주 접하는 이는 의도치 않게 변경된 장면을 가리킨다. 🎜로컬 🎜fun🎜 메서드가 있습니다. 🎜fun🎜이 일반 함수로 호출되면 🎜fun🎜 내부의 🎜this🎜가 🎜window🎜를 가리키지만 우리는 종종 🎜#test🎜 노드를 가리키기를 원합니다. 다음 코드는 🎜🎜🎜rrreee🎜🎜🎜🎜call,apply🎜 ​​​​를 사용하면 이 문제를 쉽게 해결할 수 있습니다🎜🎜🎜rrreee🎜🎜🎜물론 이렇게 할 수도 있지만 🎜ECMAScript 5🎜의 🎜strict에서는 🎜 모드, 이 경우 전역 개체를 가리키지 않도록 규정되어 있지만 🎜정의되지 않음: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜rrreee🎜🎜🎜🎜다른 사용법🎜🎜🎜🎜🎜Array-like🎜 🎜🎜 여기 , 다음 조건을 충족하는 객체를 배열형 🎜🎜🎜1. 길이 속성을 갖습니다 🎜🎜🎜2. 인덱스로 데이터를 저장합니다 🎜🎜🎜3. 배열의 푸시, 팝 및 기타 방법이 없습니다. 공통 클래스 배열은 🎜arguments,NodeList!🎜🎜🎜🎜rrreee🎜🎜🎜이런 식으로 4를 🎜arguments🎜🎜🎜Array.prototype.push 페이지에 푸시하면 두 배열의 병합을 실현할 수 있습니다. 🎜🎜동일한 푸시 이 메서드는 배열에 대한 푸시를 제공하지 않지만 🎜push(param1, param,...paramN)🎜을 제공합니다. 따라서 Apply를 사용하여 이 배열을 대체할 수도 있습니다. 즉: 🎜🎜🎜rrreee🎜🎜 🎜 역시 이런 식으로 이해될 수 있습니다. 🎜 arr1🎜은 🎜push🎜 메소드를 호출했으며, 매개변수는 🎜apply🎜를 통해 배열을 매개변수 목록 모음으로 변환하는 것입니다. 또 다른 예는 제가 최대값을 찾고자 한다는 것입니다. 클래스 배열의 값🎜🎜🎜🎜rrreee🎜🎜🎜🎜유형을 판단하세요 🎜🎜🎜🎜rrreee🎜🎜🎜🎜🎜관련 권장 사항: 🎜🎜🎜JS에서 url, href, src 사용🎜 🎜🎜🎜이것에 대한 예시 분석 Js🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 js에서 적용 및 호출 사용법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!