이게 뭔가요? JavaScript에서 이에 대한 심층 분석

이게 뭐죠? 다음 기사에서는 JavaScript에서 이에 대해 소개하고 다양한 함수 호출 방법의 차이점에 대해 설명하겠습니다. 도움이 되기를 바랍니다.

JavaScript中的this格外的不一样，比如Java语言中的this是在代码的执行阶段是不可更改，而JavaScript的this是在调用阶段进行绑定。因为这一性质所以给了this놀이할 공간이 많아요. 하지만 엄격 모드와 비엄격 모드에서는 다소 차이가 있으며, 함수의 호출 방법이 다르기 때문에 이에도 약간의 차이가 발생합니다.

이게 뭐죠?

우선 이렇게 정의해보자. 실행 컨텍스트 생성 시 결정되는 변수로, 실행 중에는 변경할 수 없다.

소위 실행 컨텍스트는 JavaScript 엔진이 코드 조각을 실행하기 전에 코드에서 내부적으로 사용될 일부 변수, 함수, this를 선언하고 저장하는 프로세스입니다. 변수 개체에서. 이 '코드 조각'에는 전역 코드(스크립트 태그 내부 코드), 함수 내부 코드, 평가 내부 코드가 포함됩니다. 우리에게 익숙한 범위 체인도 여기에 저장되며 해당 함수의 [[Scopes]] 속성에 배열과 같은 형식으로 저장됩니다.

이는 함수 호출 단계에서만 결정됩니다. 즉, 실행 컨텍스트 생성 단계가 할당되어 변수 개체에 저장됩니다. 이 기능은 또한 this의 가변성을 초래합니다. 즉, 함수가 다른 방식으로 호출되면 this의 값이 다를 수 있습니다.

이것은 엄격 모드와 비엄격 모드에서 다르게 동작한다고 위에서 말했습니다.

var a = 1;
function fun() {
   'use strict';
    var a = 2;
      return this.a;
}
fun();//报错 Cannot read property 'a' of undefined

• 엄격 모드에서 이것은 정의되지 않음을 가리킵니다.

var a = 1;
function fun() {
    var a = 2;
      return this.a;
}
fun();//1

• 비엄격 모드에서 이것은 창을 가리킵니다.

위의 동일한 코드 조각은 엄격 모드와 비엄격 모드에서 다르기 때문에 모드에 따라 다르게 동작합니다.

결론: 함수를 독립적으로 호출하면 엄격 모드에서 this는 정의되지 않음을 가리키고, 엄격하지 않은 모드에서는 this가 정의되지 않으면 자동으로 전역 객체(브라우저의 창)를 가리킵니다.

더 보기 글로벌 환경에서 이는 자신을 가리킨다는 점을 언급하겠습니다.

this.a = 1;
var b = 1;
c = 1;
console.log(this === window)//true
//这三种都能得到想要的结果，全局上下文的变量对象中存在这三个变量

한 가지 더, 이것이 함수에 사용되지 않으면 어떻게 될까요? 예를 보세요:

var a = 1000;
var obj = {
    a: 1,
      b: this.a + 1
}
function fun() {
    var obj = {
          a: 1,
        c: this.a + 2 //严格模式下这块报错 Cannot read property 'a' of undefined
    }
    return obj.c;
}
console.log(fun());//1002
console.log(obj.b);//1001

이 경우에도 이것은 여전히 ​​창을 가리킵니다. 그런 다음 별도의 결론을 내릴 수 있습니다.

obj가 전역적으로 선언되면 obj의 내부 속성에 있는 this가 전역 개체를 가리킵니다. -엄격 모드. 전역 객체를 가리키도록 자동으로 변환됩니다.

괜찮아요. 직접 시도해 보니 엄격 모드와 비엄격 모드의 차이점을 알고 있습니다. 하지만 일상 생활에서 가장 일반적으로 사용되는 방법은 앞서 언급한 바와 같습니다. 함수에서 이것의 다른 호출 방법 위에는 여전히 차이점이 있습니다. 그렇다면 함수를 호출하는 방법은 무엇입니까? 네 가지 유형:

• 전역 환경이나 일반 함수에서 객체 메서드로
• 을 직접 호출합니다.
• 적용을 사용하고
• 을 생성자로 호출합니다.

다음은 네 가지 상황입니다.

직접 호출

위 예제는 실제로는 직접 호출이지만 다른 예제를 작성하기로 결정했습니다.

var a = 1;
var obj  =  {
    a: 2,
      b: function () {
        function fun() {
          return this.a
        }
       console.log(fun());
    }
} 
obj.b();//1

fun 함수는 obj.b 메서드에 정의되어 있지만 여전히 직접 호출은 non-strict에서 undefine을 가리키는 일반 함수입니다. mode 를 사용하고 자동으로 전역 개체를 가리킵니다. 예상대로 엄격 모드에서는 undefound.a가 설정되지 않았으며 a가 정의되지 않았다는 오류를 보고합니다.

중요한 점은 다음과 같습니다. 함수가 독립적으로 호출되면 this는 엄격 모드에서 undefine을 가리킵니다. 비엄격 모드에서는 this가 undefined를 가리키면 자동으로 전역 개체(브라우저의 창)를 가리킵니다. ) .

객체의 메소드로

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
console.log(obj.b())//2

b가 참조하는 익명 함수는 obj의 메소드로 호출됩니다. 이때 this는 이를 호출하는 객체를 가리킵니다. 이것은 obj입니다. 그렇다면 b 메소드가 객체 메소드로 호출되지 않으면 어떻게 될까요? 무슨 뜻인가요?

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
var t = obj.b;
console.log(t());//1

위와 같이 t 함수의 실행 결과가 전역 변수 1로 나옵니다. 왜일까요? 이는 Javascript의 메모리 공간과 관련됩니다. 즉, obj 객체의 b 속성은 포인터로 이해될 수 있는 익명 함수에 대한 참조를 저장합니다. t에 값을 할당할 때 새 함수를 저장하기 위해 별도의 메모리 공간을 열지 않고 대신 t는 이 함수를 가리키는 포인터를 저장합니다. 이는 다음 의사 코드를 실행하는 것과 같습니다.

var a = 1;
function fun() {//此函数存储在堆中
    return this.a;
}
var obj = {
  a: 2,
  b: fun //b指向fun函数
}
var t = fun;//变量t指向fun函数
console.log(t());//1

이때 t는 fun 함수에 대한 포인터입니다. t를 호출하는 것은 fun을 직접 호출하는 것과 같습니다. 위의 규칙을 적용하면 자연스럽게 1을 출력하는 것이 이해하기 쉽습니다.

使用apply，call

关于apply和call是干什么的怎么用本文不涉及，请移驾：apply，call

这是个万能公式，实际上上面直接调用的代码，我们可以看成这样的：

function fun() {
      return this.a;
}
fun();//1
//严格模式
fun.call(undefined)
//非严格模式
fun.call(window)

这时候我们就可以解释下，为啥说在非严格模式下，当函数this指向undefined的时候，会自动指向全局对象，如上，在非严格模式下，当调用fun.call(undefined)的时候打印出来的依旧是1，就是最好的证据。

为啥说是万能公式呢？再看函数作为对象的方法调用:

var a = 1;
var obj = {
  a: 2,
  b: function() {
    return this.a;
  }
}
obj.b()
obj.b.call(obj)

如上，是不是很强大，可以理解为其它两种都是这个方法的语法糖罢了，那么apply和call是不是真的万能的呢？并不是，ES6的箭头函数就是特例，因为箭头函数的this不是在调用时候确定的，这也就是为啥说箭头函数好用的原因之一，因为它的this固定不会变来变去的了。关于箭头函数的this我们稍后再说。

作为构造函数

何为构造函数？所谓构造函数就是用来new对象的函数，像Function、Object、Array、Date等都是全局定义的构造函数。其实每一个函数都可以new对象，那些批量生产我们需要的对象的函数就叫它构造函数罢了。注意，构造函数首字母记得大写。

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun.prototype = {
  contructor: Fun,
  say: function () {
    return this.name + '正在说话';
  }
}
var f = new Fun();
f.run();//Damonare正在跑步
f.say();//Damonare正在说话

如上，如果函数作为构造函数用，那么其中的this就代表它即将new出来的对象。为啥呢？new做了啥呢？

伪代码如下：

function Fun() {
  //new做的事情
  var obj = {};
  obj.__proto__ = Fun.prototype;//Base为构造函数
  obj.name = 'Damonare';
  ...//一系列赋值以及更多的事
  return obj
}

也就是说new做了下面这些事:

• 创建一个临时对象
• 给临时对象绑定原型
• 给临时对象对应属性赋值
• 将临时对象return

也就是说new其实就是个语法糖，this之所以指向临时对象还是没逃脱上面说的几种情况。

当然如果直接调用Fun(),如下：

function Fun() {
  this.name = 'Damonre';
  this.age = 21;
  this.sex = 'man';
  this.run = function () {
    return this.name + '正在跑步';
  }
}
Fun();
console.log(window)

其实就是直接调用一个函数，this在非严格模式下指向window，你可以在window对象找到所有的变量。

另外还有一点，prototype对象的方法的this指向实例对象，因为实例对象的__proto__已经指向了原型函数的prototype。这就涉及原型链的知识了，即方法会沿着对象的原型链进行查找。

箭头函数

刚刚提到了箭头函数是一个不可以用call和apply改变this的典型。

我们看下面这个例子：

var a = 1;
var obj = {
  a: 2
};
var fun = () => console.log(this.a);
fun();//1
fun.call(obj)//1

以上，两次调用都是1。

那么箭头函数的this是怎么确定的呢？箭头函数会捕获其所在上下文的  this 值，作为自己的 this 值，也就是说箭头函数的this在词法层面就完成了绑定。apply，call方法只是传入参数，却改不了this。

var a = 1;
var obj = {
  a: 2
};
function fun() {
    var a = 3;
    let f = () => console.log(this.a);
      f();
};
fun();//1
fun.call(obj);//2

如上，fun直接调用，fun的上下文中的this值为window，注意，这个地方有点绕。fun的上下文就是此箭头函数所在的上下文，因此此时f的this为fun的this也就是window。当fun.call(obj)再次调用的时候，新的上下文创建，fun此时的this为obj，也就是箭头函数的this值。

再来一个例子：

function Fun() {
    this.name = 'Damonare';
}
Fun.prototype.say = () => {
    console.log(this);
}
var f = new Fun();
f.say();//window

有的同学看到这个例子会很懵逼，感觉上this应该指向f这个实例对象啊。不是的，此时的箭头函数所在的上下文是__proto__所在的上下文也就是Object函数的上下文，而Object的this值就是全局对象。

那么再来一个例子:

function Fun() {
    this.name = 'Damonare';
      this.say = () => {
        console.log(this);
    }
}
var f = new Fun();
f.say();//Fun的实例对象

如上，this.say所在的上下文，此时箭头函数所在的上下文就变成了Fun的上下文环境，而因为上面说过当函数作为构造函数调用的时候(也就是new的作用)上下文环境的this指向实例对象。

【相关推荐：javascript学习教程】

위 내용은 이게 뭔가요? JavaScript에서 이에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!