적용과 호출의 차이점
ECMAScript 사양은 모든 함수에 대해 호출과 적용이라는 두 가지 메서드를 정의하며, 두 메서드는 널리 사용되며 해당 함수는 매개 변수를 전달하는 형식만 다릅니다.
apply 메소드는 두 개의 매개변수를 전달합니다. 하나는 함수 컨텍스트로서의 객체이고 다른 하나는 함수 매개변수로 구성된 배열입니다.
var obj = {
name : 'linxin'}function func(firstName, lastName){
console.log(firstName + ' ' + this.name + ' ' + lastName);}func.apply(obj, ['A', 'B']); // A linxin Bobj가 함수 컨텍스트로 사용되는 객체이고 함수 func의 this가 객체 obj를 가리키는 것을 볼 수 있습니다. 매개변수 A와 B는 배열에 배치되고 각각 func 매개변수의 목록 요소에 해당하는 func 함수로 전달됩니다.
call 메서드의 첫 번째 매개변수도 함수 컨텍스트의 개체이지만 나중에 전달되는 것은 단일 배열이 아닌 매개변수 목록입니다.
var obj = {
name: 'linxin'}function func(firstName, lastName) {
console.log(firstName + ' ' + this.name + ' ' + lastName);}func.call(obj, 'C', 'D'); // C linxin D적용을 비교해보면 C와 D가 배열에 배치되지 않고 별도의 매개변수로 func 함수에 전달된다는 점을 알 수 있습니다.
사실 언제 어떤 방법을 사용할지 고민할 필요가 없습니다. 매개변수가 이미 배열에 존재하는 경우 자연스럽게 적용을 사용합니다. 매개변수가 흩어져 있고 서로 상관관계가 없으면 호출을 사용합니다.
적용 및 호출 사용
var obj = {
name: 'linxin'}function func() {
console.log(this.name);}func.call(obj); // linxin를 가리키도록 변경합니다. 여기서 Obj는 함수 컨텍스트로 전달되므로 호출 메서드의 첫 번째 매개 변수가 객체라는 것을 알 수 있습니다. time, 함수에서 this는 obj 객체를 가리킵니다. 여기서 func 함수는 실제로
function func() {
console.log(obj.name);}먼저 예제를 보세요
var Person1 = function () {
this.name = 'linxin';}var Person2 = function () {
this.getname = function () {
console.log(this.name);
}
Person1.call(this);}var person = new Person2();person.getname(); // linxin위에서 Person2에 의해 인스턴스화된 객체 person이 getname 메소드를 통해 Person1에서 이름을 얻는 것을 볼 수 있습니다. . Person2에서 Person1.call(this)의 함수는 this 객체 대신 Person1 객체를 사용하는 것이므로 Person2는 Person1의 모든 속성과 메서드를 가지며 이는 Person1의 속성과 메서드를 상속하는 Person2와 동일합니다.
Apply 및 call 메서드는 함수를 즉시 실행하므로 함수를 호출하는 데에도 사용할 수 있습니다.
function func() {
console.log('linxin');}func.call(); // linxincall과 바인딩의 차이점
EcmaScript5에서는 바인딩이라는 메서드가 확장되어 IE 하위 버전과 호환되지 않습니다. 이는 호출과 매우 유사합니다. 첫 번째 매개변수는 함수 컨텍스트인 객체이고, 매개변수의 두 번째 부분은 여러 매개변수를 받을 수 있는 목록입니다.
두 가지 차이점은 다음과 같습니다.
var obj = {
name: 'linxin'}function func() {
console.log(this.name);}var func1 = func.bind(obj);func1(); // linxinbind 메서드는 즉시 실행되지 않지만 컨텍스트를 변경하는 함수를 반환합니다. 그러나 원래 함수 func에서는 이 값이 변경되지 않았으며 여전히 전역 개체 창을 가리킵니다.
function func(a, b, c) {
console.log(a, b, c);}var func1 = func.bind(null,'linxin');func('A', 'B', 'C'); // A B Cfunc1('A', 'B', 'C'); // linxin A Bfunc1('B', 'C'); // linxin B Cfunc.call(null, 'linxin'); // linxin undefined undefinedcall은 두 번째 이후의 매개변수를 func 메소드의 실제 매개변수로 전달하는 반면, func1 메소드의 실제 매개변수는 바인드의 매개변수를 기준으로 정렬됩니다.
在低版本浏览器没有 bind 方法，我们也可以自己实现一个。
if (!Function.prototype.bind) {
Function.prototype.bind = function () {
var self = this, // 保存原函数
context = [].shift.call(arguments), // 保存需要绑定的this上下文
args = [].slice.call(arguments); // 剩余的参数转为数组
return function () { // 返回一个新函数
self.apply(context,[].concat.call(args, [].slice.call(arguments)));
}
}}위 내용은 JS에서 함수 적용 및 호출에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
