javaScript_Basic 지식을 통해 이 예제에 대한 자세한 설명과 작동 원리를 알아보세요.

작동 방식

객체의 메서드로 함수가 호출되면 이것이 객체에 할당됩니다.

코드 복사 코드는 다음과 같습니다.

var parent = {
메소드: function () {
console.log(this);
}
};

parent.method();
// <- parent

이 동작은 매우 "취약"합니다. 메서드에 대한 참조를 가져와 호출하면 이 값은 부모가 아니라 창 전역 개체가 됩니다. 이는 대부분의 개발자를 혼란스럽게 합니다.

코드 복사 코드는 다음과 같습니다.

ThisClownCar();
// <- 창

변경

.call, .apply 및 .bind 메소드는 함수 호출 메소드를 작동하는 데 사용되며 this의 값과 함수에 전달되는 매개변수 값을 정의하는 데 도움이 됩니다.

Function.prototype.call은 여러 개의 매개변수를 가질 수 있으며, 첫 번째 매개변수가 여기에 할당되고 나머지는 호출 함수에 전달됩니다.

코드 복사 코드는 다음과 같습니다.

Array.prototype.slice.call([ 1, 2 , 3], 1, 2)
// <- [2]

Function.prototype.apply는 .call과 유사하게 동작하지만 함수에 전달하는 매개 변수는 배열입니다. 모든 매개변수 대신.

String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']

Function.prototype.bind는 항상 .bind에 전달된 매개변수를 이 값으로 사용하는 특수 함수를 생성하고 일부 매개변수를 할당하여 원래 함수의 카레 버전을 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);

// 사실상 arr.push(3)와 동일
add();

// 사실상 arr.push(3, 4)와 동일
add(4);

console.log(arr);
// <- [1, 2 , 3, 3, 4]

이 스코프 체인에 있음

다음 예에서는 범위 체인에서 변경되지 않은 상태로 유지됩니다. 이는 규칙의 결함이며 종종 아마추어 개발자에게 혼란을 야기합니다.

코드 복사 코드는 다음과 같습니다.

function scoping () {
console .log( this);

반환 함수() {
console.log(this);
};
}

scoping()();
// <- 창
// <- 창

일반적인 방법은 이에 대한 참조를 보유하는 지역 변수를 생성하는 것이며, 하위 범위에는 동일한 이름을 가진 변수가 있을 수 없습니다. 하위 범위에서 동일한 이름을 가진 변수는 상위 범위에서 이에 대한 참조를 덮어씁니다. http://www.cnblogs.com/sosoft/

코드 복사 코드는 다음과 같습니다.

함수 보유 () {
var self = this;

return function () {
console.log(self);
};
}

유지 ()();
// <- 창

부모 범위의 이 값과 현재 this 값을 모두 사용하려는 경우가 아니면 설명할 수 없는 이유로 .bind 함수를 사용하는 것을 선호합니다. 이를 상위 범위에서 하위 범위로 할당하는 데 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 바운드() {
반환 함수 () {
console.log(this);
}.bind(this);
}

bound()();
// < - 창문