javascript_javascript 기술의 call(), apply() 및 바인딩() 사용법에 대한 간략한 설명

JavaScript의 함수는 Java의 메소드와 유사한 언어 기능일 뿐만 아니라 객체로도 존재할 수 있습니다. 이 기사에서는 호출, 적용 및 바인드의 세 가지 프로토타입 메소드를 포함하여 JavaScript 함수의 몇 가지 특별한 용도를 살펴보겠습니다.
1. 기능 기본
JavaScript의 함수는 Java의 메소드와 유사한 언어 기능이지만 클래스와 독립적으로 정의할 수 있습니다.

함수형 프로그래밍: JavaScript는 익명 함수를 지원하므로 함수를 객체로 사용할 수 있습니다. 따라서 JavaScript는 절차적 프로그래밍(객체 지향도 절차적 프로그래밍의 한 유형임)을 지원할 뿐만 아니라 함수형 프로그래밍도 지원합니다.
컨텍스트

각 함수 호출에는 특별한 값(이 호출의 컨텍스트)이 있습니다. 이것이 바로 this 키워드의 값입니다. 함수가 객체의 속성으로 객체에 탑재된 경우 이를 객체의 메서드라고 합니다. 이 객체를 통해 함수가 호출되면 객체는 호출의 컨텍스트, 즉 함수의 this 값입니다.

이것은 변수나 속성 이름이 아닌 키워드라는 점에 유의해야 합니다. JavaScript 구문에서는 이에 대한 값 할당을 허용하지 않습니다.

함수도 일종의 객체이다

JavaScript의 함수와 Java의 메소드, C 언어의 함수 사이의 가장 큰 차이점은 JavaScript의 함수도 객체라는 것입니다. 하지만 이것이 모든 객체가 함수라는 의미는 아닙니다. 함수는 실행 가능한 코드를 포함하고 다른 코드에서 호출할 수 있는 특수 개체입니다.

변수와 달리 키워드 this에는 범위 제한이 없으며 중첩 함수는 이를 호출하는 함수에서 this를 상속하지 않습니다. - 중첩된 함수가 메서드로 호출되는 경우 해당 함수의 this 값은 해당 함수를 호출한 개체를 가리킵니다. - 중첩된 함수가 함수로 호출되는 경우 이 값은 전역 객체(비엄격 모드)이거나 정의되지 않음(엄격 모드)입니다.

많은 사람들은 중첩된 함수를 호출할 때 외부 함수의 컨텍스트를 가리킬 것이라고 잘못 생각합니다. 이 외부 함수의 this 값에 액세스하려면 이 값을 변수에 저장해야 합니다. 이 변수와 내부 함수는 모두 동일한 범위에 있습니다. 예:

var o = {
 m: function() {
  var self = this;
  console.log(this==o); // true
  f();
  
  function f() {
   console.log(this === o); // false，this的值是全局对象或undefined
   console.log(self === o); // true
  }
 }
}

폐업

자바스크립트 함수는 정의된 범위 내의 모든 변수에 액세스할 수 있도록 다른 함수 내에 중첩하여 정의할 수 있습니다. 이는 JavaScript 함수가 클로저를 형성하여 JavaScript에 매우 강력한 프로그래밍 기능을 제공한다는 것을 의미합니다.

가치의 함수로서
JavaScript에서 함수는 구문일 뿐만 아니라 값이기도 합니다. 즉, 함수는 객체의 속성이나 배열 요소에 저장된 변수에 할당될 수 있으며 다음과 같이 다른 함수에 전달될 수 있습니다. 매개변수 등

바인딩, 호출, 적용
각 함수에는 객체에 대한 참조인 프로토타입 속성이 포함되어 있습니다. 이 객체를 "프로토타입 객체"라고 합니다. 각 함수에는 서로 다른 프로토타입 개체가 포함되어 있습니다. 함수를 생성자로 사용하면 새로 생성된 객체는 프로토타입 객체의 속성을 상속받습니다.

Function.prototype.call() 및 Function.prototype.apply()

call()과 apply()는 객체의 메소드로 간주할 수 있으며, 메소드를 호출함으로써 함수가 간접적으로 호출됩니다. 첫 번째 매개변수는 호출할 함수의 상위 객체, 즉 호출 컨텍스트이며, 이에 대한 참조는 함수 본문에서 이를 통해 획득됩니다. apply() 메소드는 함수 전송 방법이 다르다는 점을 제외하면 call() 메소드와 동일한 효과를 갖습니다.

예를 들어 f() 함수를 객체 o의 메서드로 호출하고 두 개의 매개변수를 전달하려면 다음과 같은 코드를 사용할 수 있습니다.

var o = {};

function f(a, b) {
 return a + b;
}

f.call(o, 1, 2);    // 将函数f作为o的方法，实际上就是重新设置函数f的上下文
f.apply(o, [1, 2]);

또 다른 예를 들어보겠습니다. call 메소드를 사용하여 익명 함수를 호출합니다.

다음 예의 for 루프 본문에서는 익명 함수를 생성한 다음 각 배열 요소를 지정된 this 값으로 사용하여 함수의 호출 메서드를 호출하여 익명 함수를 실행합니다. 이 익명 함수의 주요 목적은 각 배열 요소 개체에 인쇄 메서드를 추가하는 것입니다. 이 인쇄 메서드는 배열에 있는 각 요소의 올바른 인덱스 번호를 인쇄할 수 있습니다. 물론 배열 요소를 이 값으로 익명 함수에 전달할 필요는 없습니다(일반 매개변수이면 충분합니다). 호출 사용법을 보여주기 위한 것입니다.

var animals = [
 {species: 'Lion', name: 'King'},
 {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
 (function (i) { 
  this.print = function () { 
   console.log('#' + i + ' ' + this.species + ': ' + this.name); 
  } 
  this.print();
 }).call(animals[i], i);
}

Function.prototype.bind()

bind()는 ES5의 새로운 메소드입니다. 이름에서 알 수 있듯이 이 메소드의 주요 기능은 함수를 객체에 바인딩하는 것입니다. 함수 f()에서 바인딩() 메서드를 호출한 다음 개체 o를 매개 변수로 전달하면 이 메서드는 새 함수를 반환합니다. (함수 호출 형식으로) 새 함수를 호출하면 원래 함수 f가 대체됩니다. () o의 메소드로 호출됩니다. 예:

function f(y) {
 return this.x + y;
}

var o = {
 x: 1
};

var g = f.bind(o); // 通过调用 g(x) 来调用 o.f(x)
g(2); // 3

사실, 다음과 같이 바인딩() 메소드를 쉽게 구현할 수 있습니다.

// 返回一个函数，通过调用它来调用o中的方法f()，传递它所有的实参
function bind(f, o) {
 if (f.bind) return f.bind(o); // 如果bind()方法存在，使用bind()方法
 else return function () {
  return f.apply(o, arguments);
 }
}

二、函数式编程
JavaScript并非函数式编程语言，但在JavaScript中可以像操控对象一样操控函数，也就是说可以在JavaScript中应用函数式编程技术。

使用函数处理数组

假设有一个数组，数组元素都是数字，我们想要计算这些元素的平均值和标准差。

var data = [1, 1, 3, 5, 5];
var sum = function(x, y) {
 return x + y;
};
var square = function(x) {
 return x * x;
};

var mean = data.reduce(sum)/data.length;
var deviations = data.map(x => x - mean);

var stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length - 1));
高阶函数

高阶函数就是操作函数的函数，它接收一个或多个函数作为参数，并返回一个新函数。举个例子：

function not(f) {
 return function () {
  var result = f.apply(this, arguments);
  return !result;
 };
}

// 判断x是否为偶数的函数
var even = function(x) {
 return x % 2 === 0;
};

var odd = not(even);      // 一个新函数，所做的事情和even()相反
[1, 1, 3, 5, 5].every(odd);   // true，每个函数都是奇数

函数not()是个高阶函数，因为它返回一个新的函数，这个新函数将它的实参传入f()，并返回f的返回值的逻辑非。

以上就是关于javascript的call()、apply()、bind()的用法，希望对大家的学习有所帮助。