JS에서 함수 적용 및 호출에 대한 자세한 설명

적용과 호출의 차이점

ECMAScript 사양은 모든 함수에 대해 호출과 적용이라는 두 가지 메서드를 정의하며, 두 메서드는 널리 사용되며 해당 함수는 매개 변수를 전달하는 형식만 다릅니다.

apply( )

apply 메소드는 두 개의 매개변수를 전달합니다. 하나는 함수 컨텍스트로서의 객체이고 다른 하나는 함수 매개변수로 구성된 배열입니다.

var obj = {
    name : 'linxin'}function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);}func.apply(obj, ['A', 'B']);    // A linxin B

obj가 함수 컨텍스트로 사용되는 객체이고 함수 func의 this가 객체 obj를 가리키는 것을 볼 수 있습니다. 매개변수 A와 B는 배열에 배치되고 각각 func 매개변수의 목록 요소에 해당하는 func 함수로 전달됩니다.

call( )

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 함수에 전달된다는 점을 알 수 있습니다.

사실 언제 어떤 방법을 사용할지 고민할 필요가 없습니다. 매개변수가 이미 배열에 존재하는 경우 자연스럽게 적용을 사용합니다. 매개변수가 흩어져 있고 서로 상관관계가 없으면 호출을 사용합니다.

적용 및 호출 사용

1. 이것을

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);}

2와 동일합니다. 다른 객체에서 메소드를 빌리는 것

먼저 예제를 보세요

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와 동일합니다.

3. 함수 호출

Apply 및 call 메서드는 함수를 즉시 실행하므로 함수를 호출하는 데에도 사용할 수 있습니다.

function func() {
    console.log('linxin');}func.call();            // linxin

call과 바인딩의 차이점

EcmaScript5에서는 바인딩이라는 메서드가 확장되어 IE 하위 버전과 호환되지 않습니다. 이는 호출과 매우 유사합니다. 첫 번째 매개변수는 함수 컨텍스트인 객체이고, 매개변수의 두 번째 부분은 여러 매개변수를 받을 수 있는 목록입니다.
두 가지 차이점은 다음과 같습니다.

1.bind는 함수를 반환합니다.

var obj = {
    name: 'linxin'}function func() {
    console.log(this.name);}var func1 = func.bind(obj);func1();                        // linxin

bind 메서드는 즉시 실행되지 않지만 컨텍스트를 변경하는 함수를 반환합니다. 그러나 원래 함수 func에서는 이 값이 변경되지 않았으며 여전히 전역 개체 창을 가리킵니다.

2. 매개변수 사용

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 undefined

call은 두 번째 이후의 매개변수를 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!