JavaScript 함수에서 this 지향 문제 상세 정보

this 키워드

어떤 대상이 함수를 호출하고, 함수 안에 있는this는 어떤 대상을 가리킨다.
** 엄격한 모드에서: ** 글로벌 환경에서this는 undefined를 가리킨다
** 비엄격한 모드에서: ** 글로벌 환경에서this는 윈도우를 가리킨다
전역적으로 정의된 함수 직접 호출,this=> 윈도우

function fn(){
	console.log(this);
	//   this   window
}
fn();
//   window.fn()

대상 내부의 함수 호출,this=> 호출자

var obj = {
	fn:function(){
		console.log(this);
	}
}
obj.fn();
//   this   obj

타이머의 처리 함수,this=> 윈도우

setTimeout(function(){
	console.log(this);	
},0)
//  this   window

이벤트 처리 함수,this=> 이벤트 원본

div.onclick = function(){
	console.log(this);
}
//  div  ，this  div

자동 호출 함수,this=> 윈도우

(function () {
  console.log(this)
})()
//   this   window

this 방향 변경

방금 우리가 말한 것은 모두 함수의 기본 호출 방식 중의this지향이다. 우리는 함수 자체의this지향을 무시하고 다른 곳을 가리키는 세 가지 방법이 있다.이 세 가지 방법은call/apply/bind입니다.this의 지향을 강제로 바꾸는 방법입니다.

call/apply/bind는 함수 호출 뒤에 추가되어 사용되며 함수 자체의this지향을 무시할 수 있습니다

콜과 apply 사용 시 함수가 자동으로 호출되고bind 사용 시 함수가 생성되지만 수동으로 호출해야 합니다

call
문법: fn.call(fn 함수 체내this의 지향 어디,arg1,arg2,...);
역할: 연결된 함수 fn을 호출하여this가 가리키고 참고하도록 지정합니다
매개변수:

첫 번째 매개 변수:this 지향입니다

나머지 매개 변수: 입력해야 하는 값은 여러 개일 수 있으며 쉼표로 구분합니다

콜 방법을 사용하여 참고하지 않음

var num = 666;

function fn() {
  console.log('num = ', this.num);
}

fn.call();  // num = 666

콜 방법으로this 지정하기

var name = 'Rose';
var obj = {name:'Jack'};
function fn(){
	console.log(this.name);
}
fn();	// Rose
fn.call();	// Rose
fn.call(obj);  // jack

콜 방법으로this를 지정하고 참고하십시오.

var name = 'Rack';
var obj = {name:'Jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.call(obj,1,2);	// obj 1 2
fn(1,3);	// window 1 3

apply
apply 방법은 여러 개의 매개 변수를 포함하는 그룹을 받아들인다
문법: fn.apply(fn 함수 체내this의 지향점이 어디인지, [arg1,arg2,...]
역할: 연결된 함수 fn을 호출하여this가 가리키고 참고하도록 지정합니다
매개변수:

첫 번째 매개 변수:this가 가리키는 대상

두 번째 매개 변수: 여러 개의 매개 변수를 포함하는 수조

var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.apply(obj,[1,2]);	// obj 1 2

apply 병합 그룹 사용하기
push를 사용하여 요소를 그룹에 추가합니다. 매개 변수가 그룹이라면 이 그룹을 하나의 요소로 추가하는 것이지, 이 그룹 내의 모든 요소를 추가하는 것이 아닙니다. 따라서 우리는 최종적으로 그룹 내의 그룹을 얻을 수 있습니다.

var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1);	//	[1,2,[3,4]]	

concat은 그룹을 합칠 수 있지만, 기존 그룹에 요소를 추가하는 것이 아니라, 새 그룹을 만들고 되돌려줍니다.

var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = arr1.concat(arr2);
console.log(arr1);	// [1,2]
console.log(arr3);	// [1,2,3,4]

만약 우리가 원소를 기존 그룹에 추가하려면 어떻게 해야 합니까?순환No!이게 앱이니까 쓸모가 있겠네요.

var arr1 = [1,2];
var arr2 = [3,4];

arr1.push.apply(arr1,arr2);
console.log(arr1);	// [1,2,3,4]

apply를 사용하여 내장 함수와 연결

/*  /  */
var numbers = [5, 6, 2, 3, 7];

var max = Math.max(numbers)
var min = Math.min(numbers)
console.log(min,max);	// NaN NaN

var max = Math.max.apply(null, numbers); 
/*   Math.max(numbers[0], ...)   Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);
console.log(min,max);	// 2 7

bind
문법: fn.bind(fn 함수 체내this의 지향,arg1,arg2,...);
역할: 새 귀속 함수를 만듭니다.this가 가리키고 참고하도록 지정합니다. 호출해야 실행됩니다.
매개변수:

첫 번째 매개 변수:this가 가리키는 대상

나머지 매개 변수: 입력해야 하는 값은 여러 개일 수 있으며 쉼표로 구분합니다

var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.bind(obj,1,2);	//  
fn.bind(obj,1,3)()	// obj 1 3
var newFn = fn.bind(obj,3,4);
newFn();	// obj 1 4
newFn(5,6);	// obj 3 4

총결산

자바스크립트 함수 중this 지향 문제에 관한 이 글은 여기까지 소개합니다. 자바스크립트 함수this 지향 내용에 대한 자세한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!