이에 대한 관련 소개, JS에서 적용, 호출 및 바인딩

JS에서 이, Apply, Call, Bind는 전형적인 면접 질문입니다. 이 질문과 Call, Apply, Bind의 방향의 차이를 이해하는 것이 가장 좋습니다. Script House의 편집자를 따라가서 이것에 대한 지식을 배우고, 적용하고, 호출하고, 바인딩합시다

이것은 또 다른 고전적인 면접 질문입니다~/(ㄒoㄒ)/~~ ES5의 많은 함정 중 하나이기도 합니다. ES6 이로 인해 발생하는 오류를 크게 방지할 수 있지만 일부 오래된 코드의 유지 관리를 위해서는 이 포인팅과 호출, 적용, 바인딩 간의 차이점을 이해하는 것이 가장 좋습니다.

this

사실 ES5에서 this의 요점은 항상 한 가지 원칙을 따릅니다: 이것은 항상 마지막으로 호출한 객체를 가리킵니다. 자, 저 뒤에 세 번 읽으세요. 항상 자신을 호출한 마지막 개체를 가리키며, this는 항상 자신을 호출한 마지막 개체를 가리키고, this는 항상 자신을 호출한 마지막 개체를 가리킵니다. 이 문장을 기억하세요. 당신은 이미 이것의 절반을 알고 있습니다.

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

예 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인 이유는 모두가 알고 있을 것입니다. 왜냐하면 지금 문장에 따르면 "이것은 항상 호출된 마지막 항목을 가리키기 때문입니다. it Object", a가 a();라고 불리는 마지막 위치를 살펴보겠습니다. 이전에 호출되지 않은 객체는 window.a()와 동일한 전역 객체 창입니다. 우리는 엄격 모드를 사용하지 않는다는 점에 유의하세요. 여기에서 엄격 모드를 사용하면 전역 객체가 정의되지 않고 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가 인쇄된 이유도 바로 지금 "이것은 항상 마지막으로 호출한 객체를 가리킵니다"라는 문장 때문이기도 합니다. it””, 최종적으로 it을 호출한 개체는 여전히 개체 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을 호출한 마지막 객체가 윈도우이기 때문입니다. 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는 변경되지 않습니다.

예 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;，这里的 this 是调用 func2 的对象 a，为了防止在 func2 中的 setTimeout 被 window 调用而导致的在 setTimeout 中的 this 为 window。我们将 this(指向变量 a) 赋值给一个变量 _this，这样，在 func2 中我们使用 _this 就是指向对象 a 了。

使用 apply、call、bind

使用 apply、call、bind 函数也是可以改变 this 的指向的，原理稍后再讲，我们先来看一下是怎么实现的：

使用 apply

例 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

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