JavaScript의 이 규칙 및 이 객체 사용 예

여기서 규칙이 무엇인지 확인하려면 함수에서 이것이 무엇인지 확인하는 몇 가지 규칙이 있습니다. 이것이 무엇인지 결정하는 것은 실제로 매우 간단합니다. 일반적인 규칙은 함수가 호출된 위치를 확인하여 함수가 호출될 때 이를 결정하는 것입니다. 이는 우선순위에 따라 다음에 설명된 규칙을 따릅니다.

Rules

1. 함수를 호출할 때 new 키워드를 사용하면 함수의 this는 완전히 새로운 객체가 됩니다.

function ConstructorExample() {
  console.log(this);
  this.value = 10;
  console.log(this);
}
new ConstructorExample();
// -> {}
// -> { value: 10 }

2. Apply, Call 또는 Bind를 사용하여 함수를 호출하는 경우 함수의 this는 매개변수로 전달된 개체입니다.

function fn() {
  console.log(this);
}
var obj = {
  value: 5
};
var boundFn = fn.bind(obj);
boundFn();   // -> { value: 5 }
fn.call(obj); // -> { value: 5 }
fn.apply(obj); // -> { value: 5 }

3. 함수를 메소드로 호출하면, 즉 점 표기법을 사용하여 함수를 호출하면 이 함수를 속성으로 갖는 객체입니다. 즉, 점이 함수 호출의 왼쪽에 있는 경우 이는 점의 왼쪽에 있는 개체입니다.

var obj = {
  value: 5,
  printThis: function() {
    console.log(this);
  }
};
obj.printThis(); // -> { value: 5, printThis: ƒ }

4. 함수가 순수 함수로 호출되면, 즉 위의 조건 중 어느 것도 없이 호출되면 이것이 전역 객체입니다. 브라우저에서는 이것이 window 객체입니다.

function fn() {
  console.log(this);
}
// 如果在浏览器里调用：
fn(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

이 규칙은 실제로 세 번째 규칙과 동일합니다. 차이점은 메서드로 선언되지 않은 함수는 자동으로 전역 개체 창의 속성이 된다는 것입니다. 따라서 이는 실제로 암시적 메서드 호출입니다. fn()을 호출하면 실제로 브라우저는 window.fn()으로 인식하므로 이것이 window입니다.

console.log(fn === window.fn); // -> true

5. 위 규칙 중 둘 이상이 적용되는 경우 우선순위가 더 높은 규칙이 이 값을 설정합니다.

6. ES2015의 화살표 함수라면 위의 모든 규칙을 무시하고 생성 시 이를 포함하는 범위를 this의 값으로 받습니다. 이것이 무엇인지 확인하려면 화살표 함수를 만든 위치에서 한 줄 위로 올라가서 이것이 무엇인지 확인하세요. 화살표 함수의 this 값은 동일합니다.

const obj = {
  value: 'abc',
  createArrowFn: function() {
    return () => console.log(this);
  }
};
const arrowFn = obj.createArrowFn();
arrowFn(); // -> { value: 'abc', createArrowFn: ƒ }

세 번째 규칙을 다시 살펴보면, obj.createArrowFn()을 호출할 때 createArrowFn의 이는 메서드 호출이기 때문에 obj입니다. 따라서 obj는 arrowFn에서 여기에 바인딩됩니다. 전역 범위에서 화살표 함수를 생성하면 이 값은 window가 됩니다.

규칙 적용

코드 예제를 보고 이러한 규칙을 적용해 보겠습니다. 시도해 보고 이것이 다른 함수 호출에서 무엇인지 알아낼 수 있는지 확인하십시오.

어떤 규칙이 적용되는지 확인

var obj = {
  value: 'hi',
  printThis: function() {
    console.log(this);
  }
};
var print = obj.printThis;
obj.printThis(); // -> {value: "hi", printThis: ƒ}
print(); // -> Window {stop: ƒ, open: ƒ, alert: ƒ, ...}

obj.printThis()는 세 번째 규칙인 메서드 호출에 속합니다. 반면에 print()는 네 번째 규칙인 순수 함수 호출에 속합니다. print()의 경우 호출 시 new, 바인딩/호출/적용 또는 점 표기법을 사용하지 않았으므로 규칙 4에 해당합니다. 이것이 전역 개체 창입니다.

여러 규칙이 적용된 경우

여러 규칙이 적용된 경우 목록에서 우선 순위가 더 높은 규칙을 사용하세요.

var obj1 = {
  value: 'hi',
  print: function() {
    console.log(this);
  },
};
var obj2 = { value: 17 };

규칙 2와 규칙 3이 동시에 적용되는 경우 규칙 2가 우선 적용됩니다.

obj1.print.call(obj2); // -> { value: 17 }

규칙 1과 규칙 3이 동시에 적용되는 경우 규칙 1이 우선 적용됩니다.

new obj1.print(); // -> {}

Library

일부 라이브러리에서는 때때로 이 값을 의도적으로 특정 함수에 바인딩합니다. 일반적으로 가장 유용한 값은 함수에서 여기에 바인딩됩니다. 예를 들어 jQuery는 이를 DOM 요소에 바인딩하고 콜백에서 이벤트를 트리거합니다. 라이브러리에 위 규칙을 따르지 않는 this 값이 있는 경우 해당 라이브러리의 설명서를 주의 깊게 읽어 보십시오. 바인드를 사용하여 바인딩될 가능성이 높습니다.

이 개체는 함수 실행 시 함수의 실행 환경에 따라 바인딩됩니다. js에서 이 객체의 사용법에 대한 자세한 분석을 소개하겠습니다. 실제로 이 문장의 핵심은 누가 함수를 호출하든 누구를 가리킨다는 것입니다.

특히 일반적으로 다음과 같은 상황이 있습니다.

전역 함수

글로벌 환경에서는 Window

   
//例子1
 function A() {
 console.log(this)
 }
 A();//Window

를 가리킵니다. 위의 예는 매우 간단합니다. 함수 A는 전역 환경에서 실행됩니다. 즉, 전역 객체인 Window가 함수를 호출합니다. 이때 This는 Window

Object 메소드

를 가리킨다. 객체 메소드로 호출할 때는

//例子2
var b = {
 getThis:function(){
  console.log(this)
 }
}
b.getThis()//b

메소드를 호출하는 객체를 가리킨다. 지금까지 제시한 예제는 비교적 간단하고 이해하기 쉽다. 다음은 흥미로운 것입니다.

//例子3
 var c = {
 getFunc:function(){
  return function(){
  console.log(this)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//Window

이 예제는 이전 예제와 다릅니다. c.getFunc()를 실행할 때 가장 먼저 반환되는 것은 이 함수를 cFun에 할당한 다음 cFun()을 호출합니다. 글로벌 환경이므로 이때는 Or Window를 가리킵니다.

여기서 c 객체를 반환해야 한다면 어떻게 될까요? 처음에 this 개체는 함수가 실행될 때 결정된다고 말했습니다. 예제 3에서 c.getFunc()가 실행될 때 this 개체는 여전히 c를 가리키므로 위의 경우 this만 유지하면 됩니다. 코드가 약간 수정되었습니다.

   
//例子4
 var c = {
 getFunc:function(){
  var that = this //在这里保留住this
  return function(){
  console.log(that)
  }
 }
 }
 var cFun = c.getFunc()
 cFun()//c

이것이 일부 코드에서 var self = this 또는 var that = this를 자주 볼 수 있는 이유입니다.

call and apply

이때 this 객체는 대개 함수에 지정된 this 값을 가리킵니다. (보통 2단어로 시험에서 테스트하게 됩니다.)

call과 Apply는 진부하지만 신입생들이 두려워서 간략하게 소개하겠습니다. 어쩌면 아직 접하지 못했을 수도 있습니다(실제로는 단어를 만들어 내기 위해). 전화를 예로 들어 보겠습니다. 구문은 다음과 같습니다

fun.call(thisArg, arg1, arg2, ...)

이 방법을 사용하는 방법 , 아래 예를 살펴보세요.

//例子5
var d = {
 getThis:function(){
  console.log(this)
 }
}
var e = {
 name:'e'//(给e写个`name`属性只是因为觉得孤零零的太难看了~~)
}
d.getThis.call(e)//e

在这里我们就可以看出call函数的意思了:指定一个对象o1去调用其他对象o2的方法，此时this对象指向o1

好了，那为什么前面我们说通常呢？因为，这里的thisArg是可以指定为null和undefined的。请看：

   
//例子6
var d = {
 getThis:function(){
  console.log(this)
 }
}
 d.getThis.call(null)//Window
 d.getThis.call(undefined)//Window

此时的this指向全局对象Window

箭头函数

es6中的箭头函数现在也用的比较频繁，但是有个需要注意的点是：

函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

其实出现这种情况的根本原因是:箭头函数没有this对象，所以箭头函数的this就是外层代码的this

//例子7
 var f = {
  getThis:()=>{
   console.log(this)
  }
 }
 f.getThis()//Window

这个例子和前面例子2是基本一样的，只是把普通函数改写成箭头函数，但是此时的this对象已经指向了外层的Window。

考虑到这一点可能不好理解，我们再看几个例子:

   
//例子8
 var g = {
 getThis:function(){
  return function(){console.log(this)}
 }
 }
 var h = {
 getThis:function(){
  return ()=> console.log(this)
 }
 }
 g.getThis()()//Window
 h.getThis()()//h

这个例子里，g的getThis写法就和之前的例子3一样，由于函数在全局环境中运行，所以此时this指向Window；h的getThis使用了箭头函数，所以this指向了外层代码块的this所以，此时this指向的是h。

总结

一般情况下this对象指向调用函数的对象，全局环境中执行函数this对象指向Window

在call和apply函数中this指向指定的对象，如果指定的对为undefined或者null，那么this对象指向Window

在箭头函数中，this对象等同于外层代码块的this。

相关推荐：

JS中的this、apply、call、bind实例分享

函数调用的不同方式及this的指向详解

html的标签中的this应该如何使用

위 내용은 JavaScript의 이 규칙 및 이 객체 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!