これをjsで使うと何の役に立つのでしょうか？ js でのこのキーワードの使用法 (コード付き)

この記事の内容は、これをjsで使うと何になるの？ js でのこのキーワードの使用法 (コード付き) を紹介します。必要な方は参考にしてください。

まず、JS で関数を呼び出すいくつかの方法を理解する必要があります:
1. 通常の関数呼び出し
3. コンストラクターとして呼び出し
4. 呼び出しには apply/call メソッドを使用します。 5. Function.prototype.bind メソッド
6.es6 アロー関数
重要なポイント: 関数がどのように呼び出されても、誰がこの関数やメソッドを呼び出しても、this キーワードは誰を指すことになるので、これに留意してください。 !重要

以下でそれぞれの方法を例を挙げて説明します!

1.このキーワードの使用法: 通常の関数呼び出し

(function fun(){
        this.name="segmentfault";
        console.log(this);  //window
        console.log(this.name);  //segmentfault        
})()
console.log(window.name);  //segmentfault  由此可见name属性属于window的属性。

このコードでは、fun 関数は通常の関数として呼び出されます (実際には、fun はグローバル オブジェクト ウィンドウのメソッドとして呼び出されます)。知っています)、つまり window.fun(); なので、ここで window オブジェクトが fun メソッドを呼び出し、fun 関数内の this が wi​​ndow を参照し、window には別の属性名もあり、値はsegmentfault.

2です。 .this キーワードは

var name="segmentfault";

var fun={

name:"segmentfault-A",
showName:function(){
    console.log(this.name);  //输出  segmentfault-A
}

}fun.showName(); を呼び出すメソッドとして使用されます

//これは showName メソッドを呼び出す fun オブジェクトです。明らかに this キーワードは fun オブジェクトを指しているので、 name

var funA = fun.showName;

funA(); //出力セグメントフォールト

//ここでは fun.showName メソッドが funA 変数と funA 変数に割り当てられていますこれは window オブジェクトの属性であるため、showNameA() が実行されると、window.funA() と同等になります。つまり、window オブジェクトが funA メソッドを呼び出すため、this キーワードはウィンドウを指します。別の方法で見てみましょう:

var funA={
    name:"segmentfault",
    showName:function(){
        console.log(this.name);
    }
}
var funB={
    name:"segmentfault-A",
    sayName:funA.showName
}

funB.sayName();  //输出 segmentfault-A
//虽然showName方法是在funA这个对象中定义，但是调用的时候却是在funB这个对象中调用，因此this对象指向funB

3.this このキーワードの使用法は、コンストラクターとして呼び出すことです

function fun(name){
    this.name=name;
}
var funA = fun("segmentfault");   
console.log(funA.name); // 输出  undefined
console.log(window.name);//输出  segmentfault
//上面代码没有进行new操作，相当于window对象调用fun("segmentfault")方法，那么this指向window对象，并进行赋值操作window.name="segmentfault".

var funB=new fun("segmentfault");
console.log(funB.name);// 输出 segmentfault

4. このキーワードの使用法は、JS では call/apply メソッドを呼び出すことです

関数もオブジェクトなので、関数にもメソッドがあります。 Function.prototype から Function.prototype.call/Function.prototype.apply メソッドに継承されます call/apply メソッドの最大の機能は、このキーワードのポインティングを変更することです

Obj.method.apply(AnotherObj,arguments) ;

var name="segmentfault-A";
var fun={
    name:"segmentfault",
    showName:function(){
        console.log(this.name);
    }
}
fun.showName.call(); //输出 "segmentfault-A"
//这里call方法里面的第一个参数为空，默认指向window。
//虽然showName方法定义在fun对象里面，但是使用call方法后，将showName方法里面的this指向了window。因此最后会输出"segmentfault-A";
function FruitA(n1,n2){
    this.n1=n1;
    this.n2=n2;
    this.change=function(x,y){
        this.n1=x;
        this.n2=y;
    }
}

var fruitA = new FruitA("cheery","banana");
var FruitB={
    n1:"apple",
    n2:"orange"
};
fruitA.change.call(FruitB,"pear","peach");

console.log(FruitB.n1); //输出 pear
console.log(FruitB.n2);// 输出 peach

FruitB は、fruitA の変更メソッドを呼び出し、fruitA 内のこれをオブジェクト FruitB にバインドします。

5. このキーワードの使用のための Function.prototype.bind() メソッド

 var name="segmentfault-A";
function fun(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name);
        },50)
    }
}
var funA = new fun("segmentfault");
funA.sayName()  //输出  “my name is segmentfault-A”;
//这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为segmentfault-A

segmentfault を出力するには、以下の binding() メソッドを使用します

var name="segmentfault";
function fun(name){
    this.name=name;
    this.sayName=function(){
        setTimeout(function(){
            console.log("my name is "+this.name);
        }.bind(this),50)  //注意这个地方使用的bind()方法，绑定setTimeout里面的匿名函数的this一直指向fun对象
    }
}
var funA = new fun("segmentfault");
funA.sayName()  //输出  “my name is segmentfault”;
//这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为segmentfault

ここで setTimeout(function(){console.log(this.name )} .bind(this),50);、匿名関数は、bind(this) メソッドを使用して新しい関数を作成します。この新しい関数がどこで実行されるかに関係なく、this は window ではなく fun を指すため、最終的な出力は " 「私の名前はsegmentfault-A」ではなく「私の名前はsegmentfault」です

他にも注意すべき点がいくつかあります:

setTimeout/setInterval/anonymous関数が実行されると、手動で方向を変更しない限り、これはデフォルトでウィンドウオブジェクトを指します。 。 「JavaScript 高度なプログラミング」では、「タイムアウト呼び出しコード (setTimeout) はグローバル スコープで実行されるため、関数内の this の値は、非厳密モードではウィンドウ オブジェクトを指し、厳密モードではウィンドウ オブジェクトを指します」と書かれています。モードでは、未定義を指します。」この記事はすべて非厳密モードです。

6. このキーワードの使用のための評価関数

この関数が実行されると、これは現在のスコープ内のオブジェクトにバインドされます

var name="segmentfault-A";
var fun = {
    name:"segmentfault",
    showName:function(){
        eval("console.log(this.name)");
    }
}

fun.showName();  //输出  "segmentfault"

var a = fun.showName;
a();  //输出  "segmentfault-A"

7. このキーワードの使用のためのアロー関数

es6内部のポイントは固定されており、常に外部オブジェクトを指します。アロー関数にはこれがありません。同時に、call、apply、bind などのメソッドを使用して this のポイントを変更することはできません。 。

 function Timer() {
    this.seconds = 0;
    setInterval( () => this.seconds ++, 1000);
} 

var timer = new Timer();

setTimeout( () => console.log(timer.seconds), 3000);

// 3
   // 在构造函数内部的setInterval()内的回调函数，this始终指向实例化的对象，并获取实例化对象的seconds的属性,每1s这个属性的值都会增加1。否则最后在3s后执行setTimeOut()函数执行后输出的是0

関連する推奨事項:

js のこのキーワードについての理解

js_javascript スキルでのこのキーワードの理解について

js に関するこのキーワード_javascript スキルについての質問

以上がこれをjsで使うと何の役に立つのでしょうか？ js でのこのキーワードの使用法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。