이것은 자바스크립트로 무엇인가요? 이것의 4가지 결속 방법(소개)

이 장에서는 Javascript에서 이것이 무엇인지 설명합니다. 이것의 4가지 바인딩 방법(소개). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이게 뭐죠?

함수가 호출되면 활동 레코드(실행 컨텍스트라고도 함)가 생성됩니다. 이 레코드에는 함수가 호출된 위치(호출 스택), 함수 호출 방법, 전달된 매개변수 등의 정보가 포함됩니다. 이는 함수 실행 중에 사용되는 기록된 속성 중 하나입니다.

바인딩하는 4가지 방법

기본 바인딩

function foo() { 
    console.log( this.a );
}
var a = 2;
foo(); // 2

이 코드는 2를 출력하여 기본적으로 전역 개체에 바인딩되었음을 나타냅니다.

암시적 바인딩

function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};
obj.foo(); // 2

이 코드는 다음과 같습니다. 함수 참조에 컨텍스트 객체(컨텍스트)가 있으면 암시적 바인딩 규칙이 이를 컨텍스트 객체에 바인딩합니다.

암묵적 손실 문제

// 例子1111
function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};
var bar = obj.foo; // 函数别名！

var a = "oops, global"; // a是全局对象的属性”

bar();  // "oops, global"
／／2222
function foo() { 
    console.log( this.a );
}
var obj = { 
    a: 2,
    foo: foo 
};

var a = "oops, global"; // a是全局对象的属性

setTimeout( obj.foo, 100 ); // "oops, global

예제 1111 bar는 obj.foo에 대한 참조이지만 실제로는 foo 함수 자체를 참조하므로 현재 bar()는 실제로 수정되지 않은 함수 호출이므로 기본 바인딩은 다음과 같습니다. 적용된. 예제 222에서는 setTimeout 함수에서 이 바인딩을 잃습니다. 원칙은 매개변수 전달을 암시적 할당으로 간주할 수 있습니다.

명시적 바인딩

암시적 바인딩을 분석할 때는 객체 내부에 함수를 가리키는 속성을 포함하고, 이 속성을 통해 함수를 간접적으로 참조하여 이 객체에 고정된 간접적(암시적)으로 바인딩해야 합니다.

그렇다면 객체 내부에 함수 참조를 포함하고 싶지 않지만 객체에 대해 강제로 함수 호출을 하고 싶다면 어떻게 해야 할까요?

JS를 공부한 사람들은 아마도 호출, 적용 및 바인딩에 익숙할 것입니다. js에서 제공하는 이러한 기본 메서드는 이를 명시적으로 바인딩하는 방법을 제공합니다.

function foo() { 
    console.log( this.a );
}var obj = { 
    a:2};

foo.call( obj ); // 2

foo.call(..)을 통해 foo가 호출할 때 this를 obj에 바인딩하도록 강제할 수 있습니다.

이 바인딩 개체로 기본 값(문자열 유형, 부울 유형 또는 숫자 유형)을 전달하면 기본 값이 개체 형식(즉, new String(..) , new Boolean( ..) 또는 새 번호(..)). 이것은 종종 "복싱"이라고 불립니다.

"이 바인딩의 관점에서 보면 call(..)과 apply(..)는 동일합니다. 차이점은 다른 매개변수에 반영되지만 지금은 이러한 사항을 고려할 필요가 없습니다."

하드 바인딩 고정 바인딩 구현

우리는 이미 이 바인딩의 4가지 방법을 알고 있지만 여전히 호출 및 적용을 사용하여 암시적 손실 문제를 해결할 수 없습니다. 다음 예를 고려하세요.

function foo() { 
    console.log( this.a );
}

var obj = { 
    a:2
};

var bar = function() {
    foo.call( obj );
};

bar(); // 2
setTimeout( bar, 100 ); // 2

bar.call(windows) //无法再修改this

호출을 통해 우리는 function bar foo에 대해 이것을 지정한 후에는 bar가 나중에 어떻게 호출되든 항상 obj에 대해 수동으로 foo를 호출합니다. 이 바인딩은 명시적 강제 바인딩이므로 하드 바인딩이라고 합니다. 이것이 바인드의 유래입니다(하드 바인딩이 일반적으로 사용되며 바인드 방법은 es5에서 새로운 것이기 때문입니다). 실행 중인 함수의 바인딩을 결정하려면 함수의 직접 호출 위치를 찾아야 합니다. 일단 발견되면, 이것의 바인딩 대상을 결정하기 위해 다음 네 가지 규칙을 순차적으로 적용할 수 있습니다.

을 new라고 부르나요? 새로 생성된 개체에 바인딩합니다.

1. 전화로 부르셨나요, 아니면 신청(또는 바인딩)하셨나요? 지정된 개체에 바인딩합니다.

2. 컨텍스트 객체에 의해 호출되나요? 해당 컨텍스트 개체에 바인딩합니다.

3. 기본값: 엄격 모드에서는 정의되지 않은 상태로 바인딩하고, 그렇지 않으면 전역 개체에 바인딩합니다.

이것을 이해하기 위한 몇 가지 작은 예

...略var bar = foo.bind(obj)
bar(); // 2setTimeout( bar, 100 ); // 2

우선순위가 가장 낮은 이 객체는 기본적으로 바인딩됩니다. 다음 예를 생각해 보세요:

unction showThis () {  console.log(this)
}function showStrictThis () {  'use strict'
  console.log(this)
}
showThis() // windowshowStrictThis() // undefined

먼저 호출 위치를 찾아야 합니다. 2에서는 person.showThis()라는 문장을 반환합니다. 이는 암시적으로 person 개체에 바인딩되어 있으므로 person이 출력됩니다. 3, return retrunThis() 입니다. 이는 기본적으로 전역에 바인딩되어 window를 반환합니다.

var person = {  name: '11',
  showThis () {    return this
  }
}

person.showThis() === person  //truevar person2 = { name: '22',
  showThis () {    return person.showThis()
  }
}var person3 = { name: '33',
  showThis () {    var retrunThis = person.showThis    return retrunThis()
  }
}

person.showThis()  //personperson2.showThis()  //?person3.showThis()  //?

컨텍스트 개체는 명시적 바인딩을 통해 지정됩니다.

function showThis () {  
return this
}
var person = { name: 'person' }
showThis() // window
showThis.call(p1) // person
showThis.apply(p1) // person

바인드 메소드는 이를 강력하게 바인딩하며 더 이상 명시적 바인딩을 통해 전환할 수 없습니다.

function showThis () {
  return this
}
var person = { name: 'person' }

var personBind = showThis.bind(person)

personBind()   //person

var person2 = { name: 'person2' }

personBind.call(person2) //person

new는 바인딩보다 우선순위가 높으므로 재정의될 수 있습니다.

function showThis () {
  return this
}
var person = { name: 'person' }
var person2 = { name: 'person2' }

var personBind = showThis.bind(person)

personBind()    //person
new personBind()  //showThis

화살표 함수는 function 키워드를 사용하여 정의되지 않지만 "뚱뚱한 화살표"로 알려진 => 연산자를 사용하여 정의됩니다. 화살표 함수는 이에 대한 네 가지 표준 규칙을 사용하지 않고 외부(함수 또는 전역) 범위를 기준으로 이를 결정합니다. 새 기능을 포함하여 화살표 기능 바인딩을 수정할 수 없습니다. 인터넷에는 화살표 기능에 대한 자세하고 포괄적인 설명이 많이 있습니다. 여기에는 더 이상 자세한 내용이 없습니다.

위 내용은 이것은 자바스크립트로 무엇인가요? 이것의 4가지 결속 방법(소개)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!