이에 대한 예제 공유, JS에서 적용, 호출 및 바인딩

this

의 요점은 사실 ES5에서 항상 같은 원칙을 따릅니다. 즉, 이것은 항상 마지막으로 호출한 개체를 가리킵니다. 자, 나를 따라와서 세 번 읽으세요. 마지막으로 호출한 객체입니다. 이것은 항상 그것을 마지막으로 호출한 객체를 가리킵니다. 이 문장을 기억하세요. 당신은 이미 이것의 절반을 알고 있습니다.

이것은 또 다른 고전적인 면접 질문입니다. JS에서 이 질문은 고전적인 인터뷰 질문입니다. 이 질문과 전화, 지원, 바인딩의 차이점을 이해하는 것이 가장 좋습니다. 이에 대한 지식을 익히고, 적용하고, 호출하고, 바인딩하는 스크립트하우스의 편집자를 따라가보자.

가장 간단한 예를 살펴보겠습니다.

예 1:

 var name = "windowsName";
 function a() {
  var name = "Cherry";
  console.log(this.name);   // windowsName
  console.log("inner:" + this); // inner: Window
 }
 a();
 console.log("outer:" + this)   // outer: Window

로그가 windowsName인 이유는 모두가 알고 있을 것입니다. 왜냐하면 지금 문장에 따르면 "이것은 항상 마지막으로 호출한 개체를 가리킵니다"이기 때문입니다. a가 a();라고 불리는 마지막 위치를 살펴보겠습니다. 이전에 호출되지 않은 개체는 window.a()와 동일한 전역 개체 창입니다. 여기서는 strict 모드를 사용하지 않습니다. 모드가 사용되면 전역 개체가 정의되지 않은 경우 Uncaught TypeError: Cannot read property 'name' of undefound 오류가 보고됩니다.

이 예를 다시 살펴보세요.

예 2:

var name = "windowsName";
 var a = {
  name: "Cherry",
  fn : function () {
   console.log(this.name);  // Cherry
  }
 }
 a.fn();

이 예에서 함수 fn은 객체 a에 의해 호출되므로 인쇄된 값은 a의 이름 값입니다. 좀 더 명확해졌나요~

조금 바꿔보겠습니다:

예제 3:

var name = "windowsName";
 var a = {
  name: "Cherry",
  fn : function () {
   console.log(this.name);  // Cherry
  }
 }
 window.a.fn();

Cherry가 여기에 인쇄된 이유도 바로 지금 "이것은 항상 마지막으로 호출한 개체를 가리킵니다"라는 문장 때문입니다. 마지막으로 이를 호출하는 객체는 여전히 객체 a입니다.

이 예를 다시 살펴보겠습니다.

예 4:

 var name = "windowsName";
 var a = {
  // name: "Cherry",
  fn : function () {
   console.log(this.name);  // undefined
  }
 }
 window.a.fn();

여기에 정의되지 않은 내용이 인쇄되는 이유는 무엇입니까? 이는 방금 설명한 대로 fn이 객체 a에 의해 호출되기 때문입니다. 이는 fn의 내부 this가 객체 a이고 name이 객체 a에 정의되어 있지 않으므로 로그의 this.name 값이 정의되지 않음을 의미합니다.

이 예는 여전히 설명되어 있습니다. fn을 마지막으로 호출한 객체는 a이기 때문에 항상 마지막으로 호출한 객체를 가리킵니다. 따라서 a에 name 속성이 없더라도 에서 this.name을 계속 검색하지 않습니다. 이전 객체이지만 정의되지 않은 상태로 직접 출력됩니다.

좀 더 혼란스러운 예를 살펴보겠습니다.

예 5:

 var name = "windowsName";
 var a = {
  name : null,
  // name: "Cherry",
  fn : function () {
   console.log(this.name);  // windowsName
  }
 }
 var f = a.fn;
 f();

여기서 질문이 있을 수 있습니다. 왜 Cherry가 아닌가요? 이는 a 개체의 fn 메서드가 변수 f에 할당되어 있기 때문입니다. 호출되지 않았습니다. 그런 다음 다음 문장을 읽어 보세요: "이것은 항상 마지막으로 호출한 개체를 가리킵니다." f가 지금 호출되지 않았기 때문에 결국에는 fn()이 여전히 호출되었습니다. 그래서 이것은 창을 가리킨다.

위의 다섯 가지 예를 보면 this가 생성될 때 this의 요점을 확인할 수 없습니다. es5에서는 this가 항상 마지막으로 호출한 개체를 가리킵니다.

또 다른 예를 살펴보겠습니다.

예 6:

 var name = "windowsName";
 function fn() {
  var name = 'Cherry';
  innerFunction();
  function innerFunction() {
   console.log(this.name);  // windowsName
  }
 }
 fn()

지금 읽으면 왜 이런 일이 발생하는지 이해할 수 있을 것입니다(oﾟ▽ﾟ)o.

이 포인트를 변경하는 방법

이 포인트를 변경하는 방법을 다음과 같이 정리했습니다.

ES6의 화살표 기능을 사용하세요

함수 내부에서 _this = this를 사용하세요

적용, 호출, 바인드 사용

new 인스턴스 객체 변환

예 7:

var name = "windowsName";
 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)  
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   },100);
  }
 };
 a.func2()  // this.func1 is not a function

화살표 함수를 사용하지 않으면 오류가 보고됩니다. 왜냐하면 setTimeout을 호출하는 마지막 객체는 window이지만 window에는 func1 함수가 없기 때문입니다.

this 포인터를 변경하는 이 섹션에서는 이 예제를 데모로 변환하겠습니다.

화살표 기능

우리 모두 알고 있듯이 ES6의 화살표 기능은 ES5에서 이를 사용할 때의 함정을 피할 수 있습니다. 화살표 함수의 this는 함수가 실행될 때가 아니라 함수가 정의될 ​​때 항상 this를 가리킵니다. , 화살표 함수는 다음 문장을 기억해야 합니다. "화살표 함수에는 이 바인딩이 없으며 해당 값은 범위 체인을 찾아 결정해야 합니다. 화살표 함수가 화살표가 아닌 함수에 포함된 경우 이 바인딩은 가장 가까운 비화살표 함수는 this이고, 그렇지 않으면 정의되지 않습니다."

예제 8:

 var name = "windowsName";
 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)  
  },
  func2: function () {
   setTimeout( () => {
    this.func1()
   },100);
  }
 };
 a.func2()  // Cherry

함수 내에서 _this = this를 사용하세요

ES6를 사용하지 않는다면 이 방법이 가장 간단하고 오류가 없는 방법이어야 합니다. 먼저 이 함수를 호출하는 개체를 _this 변수에 저장합니다. , 그런 다음 함수에서 this _this를 사용하면 _this가 변경되지 않습니다.

예제 9:

 var name = "windowsName";
 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)  
  },
  func2: function () {
   var _this = this;
   setTimeout( function() {
    _this.func1()
   },100);
  }
 };
 a.func2()  // Cherry

이 예에서는 func2에서 먼저 var _this = this;를 설정합니다. 여기서 이것은 func2의 setTimeout이 창에서 호출되는 것을 방지하기 위해 func2를 호출하는 객체입니다. 창문. this(변수 a를 가리키는)를 변수 _this에 할당하여 func2에서 _this를 사용할 때 객체 a를 가리킵니다.

적용, 호출, 바인드 사용

적용, 호출, 바인드 기능을 사용하면 이 방향이 바뀔 수도 있습니다. 원리는 나중에 어떻게 구현되는지 살펴보겠습니다.

적용 사용

예제. 10:

 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.apply(a),100);
  }
 };
 a.func2()   // Cherry

call 사용

예 11:

 var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.call(a),100);
  }
 };
 a.func2()   // Cherry

bind 사용

예 12:

var a = {
  name : "Cherry",
  func1: function () {
   console.log(this.name)
  },
  func2: function () {
   setTimeout( function () {
    this.func1()
   }.bind(a)(),100);
  }
 };
 a.func2()   // Cherry

apply, call,bind 차이점

刚刚我们已经介绍了 apply、call、bind 都是可以改变 this 的指向的，但是这三个函数稍有不同。

在 MDN 中定义 apply 如下；

apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数

语法：

fun.apply(thisArg, [argsArray])

thisArg：在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。

argsArray：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

apply 和 call 的区别

其实 apply 和 call 基本类似，他们的区别只是传入的参数不同。

call 的语法为：

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

所以 apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。

例 13：

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.apply(a,[1,2])  // 3

例 14：

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.call(a,1,2)  // 3

bind 和 apply、call 区别

我们先来将刚刚的例子使用 bind 试一下

 var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.bind(a,1,2)

我们会发现并没有输出，这是为什么呢，我们来看一下 MDN 上的文档说明：

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

所以我们可以看出，bind 是创建一个新的函数，我们必须要手动去调用：

var a ={
  name : "Cherry",
  fn : function (a,b) {
   console.log( a + b)
  }
 }
 var b = a.fn;
 b.bind(a,1,2)()   // 3

相关推荐：

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

js中this对象用法实例详解

js中this的理解

위 내용은 이에 대한 예제 공유, JS에서 적용, 호출 및 바인딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!