これは何ですか？ JavaScript でのこれの詳細な分析

＃＃＃これは何ですか？次の記事では、JavaScript でのこれについて説明し、関数の呼び出し方法の違いによる違いについて説明します。 JavaScript

の

this は、Java 言語の this# など、特に異なります。 ## はコードの実行フェーズでは変更できませんが、JavaScript の this は 呼び出しフェーズ でバインドされます。この性質により、this には多くの開発の余地が与えられます。ただし、厳密モードと非厳密モードでは多少異なります。また、関数の呼び出し方法の違いにより、これにもいくつかの違いが生じます。 ＃＃＃＃＃＃＃＃＃これは何ですか？

最初にこれを定義します。

これは、実行コンテキストの作成時に決定される変数で、実行中に変更することはできません。

いわゆる

実行コンテキストは、コードを実行する前にいくつかの 変数

と

関数を使用する JavaScript エンジンです。 , this事前に宣言して変数オブジェクトに格納する処理。この「コード スニペット」には、グローバル コード (スクリプト タグ内のコード)、関数内部コード、eval 内部コードが含まれます。私たちがよく知っているスコープ チェーンもここに保存され、対応する関数の [[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

非厳密モードでは、これは window を指します;

• 上記の同じコード部分は、モードが異なると動作が異なります。厳密モードと非厳密モードでは異なります。
  結論:
関数が独立して呼び出された場合、厳密モードでは this は undefined を指しますが、非厳密モードでは、this が unknown を指すと、自動的にグローバル オブジェクトを指します (つまり、ブラウザ ウィンドウ)

もう 1 つ、グローバル環境では、これはそれ自体を指します。別の例を見てください:

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

もう 1 つ、これが使用されていない場合関数 何が起こるでしょうか？例を見てください:

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 はグローバル オブジェクトを指します。obj が関数で宣言されている場合、厳密モードでは、これはポイントします未定義の非厳密モードに変更すると、グローバル オブジェクトを指すように自動的に変更されます。

わかりました。実際に試してみました。厳密モードと非厳密モードの違いはわかりました。ただし、日常生活で最も一般的な使用法は、これを次のように使用することです。上でも触れましたが、関数の呼び出し方法には違いがあります。 4 種類:

グローバル環境内のオブジェクトのメソッドまたは通常の関数

を直接呼び出す

apply と call
• をそのまま使用するコンストラクター関数
• は、次の 4 つの状況で展開されます。
• 直接呼び出し

上記の例は、実際には直接呼び出しですが、別の例を書くことにしました:

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

fun 関数は obj.b メソッドで定義されていますが、これはまだ通常の関数です。直接呼び出すと、非厳密モードで未定義を指し、自動的に期待どおり、グローバル オブジェクトを指します。厳密モードでは、エラー「unknown.a が確立されていません、a が定義されていません」が報告されます。

もう一度言っておきたい重要なこと:

関数が独立して呼び出されるとき、厳密モードでは this は未定義を指します。非厳密モードでは、this が undefend を指すと、自動的にグローバル オブジェクトを指します。 (ブラウザではウィンドウです)。

オブジェクトのメソッドとして

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

bが参照する無名関数を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 中国語 Web サイトの他の関連記事を参照してください。