자바스크립트에서 이 키워드에 대한 자세한 설명

어떤 지식을 배우든, 배운 지식의 목록을 만드는 데 익숙해지면 생각을 명확하게 하는 데 도움이 되며 좋은 학습 방법입니다. 적극 권장합니다.

다음 내용은 조금 길므로 인내심을 갖고 읽어주시길 바랍니다.

다음 내용은 다음과 같은 부분으로 나누어집니다.

1. 의미

　1.1: 이것의 의미

　1.2: 이것의 가변성 point

2. 사용 상황

2.1: 전역 환경

2.2: 생성자

2.3: 객체 메서드

3. 참고 사항

　3.1: this의 다중 레벨 중첩을 피하세요

　3.2: 배열 처리 방법에서 this

를 피하세요 3.3: 콜백 함수에서 this

를 피하세요 1 . 의미

1.1: 이

의 의미 생성자와 new 키워드의 관계에 대해 쓴 블로그 게시물에서 언급했듯이 new 키워드는 항상 객체를 반환합니다. 이 객체는 new가 생성자를 호출할 때 반환되는 빈 객체이거나 생성자의 return 문을 사용하여 반환되는 복잡한 데이터 유형(객체, 배열 등 포함)일 수 있습니다.

마찬가지로 new 키워드와 마찬가지로 this 키워드도 항상 객체를 반환합니다. 보다 구체적으로 말하면 "현재" 속성이나 메서드가 있는 개체입니다.

var Keith = {
  firstName: 'Chou',
  describe: function() {
   return this.firstName;
  }
 };
console.log(Keith.describe()); //'Chou'

위 코드에서 this.firstName은 현재 explain 메소드가 위치한 객체의 firstName 속성을 나타냅니다. 즉, 전역 범위에서 explain 메소드를 호출하면 현재 explain 메소드가 위치한 객체가 Keith이므로 Keith.firstName이 호출됩니다.

1.2: 이것이 가리키는 가변성

객체의 속성은 다른 객체에 할당될 수 있으므로, 속성이 위치한 현재 객체는 가변적이다. 즉, this의 포인터는 가변적입니다.

var Keith = {
  firstName: 'Chou',
  describe: function() {
   return this.firstName;
  }
 };
 var Rascal={
  firstName: 'King'
 }
 Rascal.describe=Keith.describe;
 console.log(Rascal.describe()); //'King'

위 코드에서 Keith 객체의 explain 속성은 Rascal에 할당되어 있으므로 현재 explain 메소드의 객체는 Rascal이므로 this.firstName은 Rascal을 가리킵니다. . 주소로 전달되기 때문에 firstName을 수정하면 원본 개체에 영향을 미칩니다. 이 예는 이해하기 쉽지 않을 수 있으므로 다음 예를 살펴보십시오.

function f(){
  return this.firstName;
 }
 var Keith = {
  firstName: 'Chou',
  describe:f
 };
 var Rascal={
  firstName: 'King',
  describe:f
 }
 console.log(Keith.describe()); //'Chou'
 console.log(Rascal.describe()); //'King'

위 코드에서는 메소드를 전역 범위로 이동하고 함수 f 내부에서 this 키워드를 사용합니다. f가 위치한 객체가 다르기 때문에 이는 다른 객체를 가리킵니다.

전역 범위에서 this 키워드는 최상위 개체(즉, 창 개체)를 가리킵니다.

var name='keith';
 function person(){
  var name='rascal';
  return this.name;
 }
console.log(person()); //'keith'

위 코드에서는 rascal 대신 keith가 반환됩니다. 그 이유는 이것이 전역 범위를 가리키기 때문입니다. 전역 범위에서 함수를 정의하면 기본적으로 함수 자체가 아니라 창 개체를 가리킵니다. 그러나 함수 내에서 지역 변수를 선언하기 위해 var를 사용하지 않으면 결과가 달라집니다.

var name='keith';
 function person(){
  name='rascal';
  return this.name;
 }
console.log(person()); //'rascal'

위 코드에서 함수 내부에 지역변수를 선언하기 위해 var를 사용하지 않았기 때문에 이때 함수 ​​내부의 name 속성은 지역변수가 아니지만, 전역 변수. 따라서 이전 이름 ​​속성을 덮어쓰게 됩니다. 지역 변수와 전역 변수에 대해 모르신다면 이 글을 참고하세요.

함수가 다른 변수에 할당되는 한 이 변수의 포인터는 변경됩니다.

var Keith={
  name:'keith',
  describe:function(){
   return this.name;
  }
 }
var name='rascal';
var f=Keith.describe;
console.log(f()) //'rascal'

위 코드에서는 keith가 아닌 rascal이 반환됩니다. Keith.describe가 f 변수에 할당되고 전역 범위에 name 변수가 있으므로 Keith 내부 함수의 this 포인터는 f가 실행 중인 개체(최상위 개체, 즉 window 객체)

요약하자면:

1. JavaScript 언어에서는 모든 것이 객체이고(정의되지 않음 및 null 제외) 실행 환경도 객체이므로 함수는 특정 개체, 이것이 바로 이 개체(환경)입니다.

2.이것의 포인팅은 역동적입니다. 함수가 전역 범위에 있으면 전역 환경을 가리키고, 함수가 개체에 있으면 개체를 가리킵니다.

2. 사용 경우

이것의 사용 경우는 다음과 같이 나눌 수 있습니다.

2.1: 전역 환경(전역 범위)

창 개체인 최상위 개체를 가리키는 전역 범위에서 이 개체를 사용합니다.

function keith() {
  return (this === window)
  }
console.log(keith()) //true

위 코드에서 함수 내부에 있든 없든 전역 범위에서 실행되는 한 최상위 개체 창을 가리킵니다.

2.2: 생성자

생성자에서 이는 생성할 객체 인스턴스를 가리킵니다.

function Keith() {
  this.sex = 'boy';
 }
 var person = new Keith();
 console.log(person.sex); //'boy'

위 코드에서는 Keith 생성자를 전역 범위에 정의한 후 생성자를 호출하여 person 개체 인스턴스에 할당합니다.

생성자 생성에는 세 가지 기본 요구 사항이 있습니다. 함수 이름의 첫 글자는 대문자로 표시되며, 생성할 개체 인스턴스를 가리키는 생성자 내부에서는 new 키워드를 사용하여 호출합니다. 생성자를 반환하고 객체 인스턴스를 반환합니다.

생성자와 new 키워드의 관계에 대해 더 자세히 알고 싶으시면 이 글을 참고해주세요.

2.3: 객체 메소드

객체 A의 메소드가 객체 B에 할당되면 메소드의 이 메소드는 객체 A를 가리키는 방식에서 객체 B를 가리키는 방식으로 변경됩니다. 따라서 객체의 메소드를 다른 객체에 할당하면 해당 포인터가 변경되므로 특히 주의하세요.

var keith = {
  sex: 'boy',
  foo: function() {
   return this.sex;
  }
 };
 var rascal = {
  sex: 'girl'
 };
 rascal.foo = keith.foo;
 console.log(keith.foo()); //'boy'
 console.log(rascal.foo()); //'girl'

위 코드에서 keith의 foo 함수가 rascal에 할당된 후 이 함수의 지점이 keith에서 rascal로 변경됩니다.

如果某个方法位于多层对象的内部，这时为了简化书写，把该方法赋值给一个变量，往往会得到不一样的结果。

var a = {
  b: {
   p: 'keith',
   c: function() {
    return this.p;
   }
  }
 };
 var person = a.b.c;
 console.log(person()); //undefined

上面代码中，c是两层对象里面的一个方法。为求简便，将其赋值给全局变量person，结果调用时，this指向了顶层对象window。而在window中变量p默认值为undefined。

要解决这个问题，可以只将c所在的对象赋值给person变量，或者是直接调用。

var person = a.b;
console.log(person.c()); //'keith'
console.log(a.b.c()); //'keith'

3.使用注意点

3.1：避免多层嵌套this

当在闭包中使用多层this，则this都会指向window。

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

上面代码中，在一个函数中返回另外一个匿名函数是闭包的特点之一，可以看出，当在闭包中使用this对象都会指向全局作用域中的window对象。

如果在函数外包含一个对象，则内部this指向全局作用域，而外部this对象指向当前作用域。

var o = {
  f1: function() {
   console.log(this);
   (function() {
    console.log(this)
   })();
  }
 };
 o.f1(); //Object , Window

   

上面代码包含两层this，结果运行后，第一层指向当前对象，第二层指向全局对象。

实际执行的是如下代码。

function keith() {
  console.log(this);
 }
 var o = {
  f1: function() {
   console.log(this);
   var f2 = keith();
  }
 };
 o.f1(); //Object , Window

要实现多层this嵌套，有两种解决方法：

一是在第二层中改用一个指向外层this的变量。

var o = {
  f1: function() {
   console.log(this);
   var that = this;
   (function() {
    console.log(that);
   })();
  }
 };
 o.f1(); //Object , Object

上面代码中，定义了局部变量that，固定指向了外层的this，然后在内层中使用that，就不会发生this指向的改变。但是如果函数外部内有嵌套一个对象，this还是会指向全局。

二是Javascript中的严格模式。在严格模式下，如果内部函数的this指向了window对象，就会报错。

var a = {
  count: 0,
  fun: function() {
   'use strict';
   return this.count++;
  }
 }
 var f = a.fun;
 console.log(f()) //'TypeError: this is undefined'

上面代码中，fun方法使用严格模式声明。把a对象中的fun方法赋值给全局变量f，那么this此时指向window对象，在严格模式下，就会报错。如果函数外部没有嵌套一个对象，那么不会报错，而是会返回undefined。

3.2：避免数组处理方法中的this

  数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。

var keith = {
  a: 'Hello',
  b: ['b1', 'b2'],
  c: function() {
   this.b.forEach(function(item) {
    console.log(this.a + ' ' + item);
   })
  }
 };
 keith.c();
 //undefined b1
 //undefined b2

上面代码中，forEach方法的回调函数中的this，其实指向的是window对象，因此取不到keith.a的值，同上也属于避免多层嵌套this。也就是说，内层的this不指向外部函数，而是指向顶层对象。

要解决这个方法，可以使用that变量来代替回调函数中的this。

var keith = {
  a: 'Hello',
  b: ['b1', 'b2'],
  c: function() {
   var that = this;
   this.b.forEach(function(item) {
    console.log(that.a + ' ' + item);
   })
  }
 };
 keith.c();
 //Hello b1
 //Hello b2

另外一种方法，就是让this做为forEach方法的第二个参数，来固定它的运行环境。

var keith = {
  a: 'Hello',
  b: ['b1', 'b2'],
  c: function() {
   this.b.forEach(function(item) {
    console.log(this.a + ' ' + item);
   }, this)
  }
 };
 keith.c();
 //Hello b1
 //Hello b2

3.3：避免回调函数中的this

回调函数中的this往往会改变指向。

var o = {
  f: function() {
   console.log(this === o);
  }
 };
 o.f(); // true;

上面代码中，调用o对象的f方法，返回true。

但是，如果将f方法指定给某个按钮的click事件，this的指向就变了。

$('button').on('click',o.f);

上面代码中，使用了jquery方法来获取button元素，并绑定click事件。点击按钮后控制台会显示false。原因是此时this不再指向o对象了，而是指向按钮的DOM对象，因为f方法是在按钮对象的环境中被调用的。

总结一下：

a：如果想要多层嵌套this关键字，最常用的解决方法就是使用that变量，固定指向外层的this，然后在内层中使用that变量。就不会发生内层this指向全局的问题。

b：如果在回调函数中使用this关键字，注意this的指向问题。