javascriptのthis使用シーンと矢印関数のthis

jsに接触したばかりの頃は、thisに対していつもこの上なく困惑していました.以下はjsデザインモードと実践からの総括です.
thisは常に一つのオブジェクトを指し、グローバルオブジェクトを指す場合もあり、構造オブジェクトを指す場合もあり、DOMオブジェクトを指す場合もあります.
1.オブジェクトとしてのメソッド呼び出し
オブジェクトとしてのメソッド呼び出し時thisは、オブジェクトの本生を指します.

var Person = {
    name: 'bingxl',
    getName: function () {
        console.log(this.name);  //bingxl
    }
};
Person.getName();

2.一般関数として呼び出される
一般関数のthisは常にグローバル変数を指します.

var name = 'window';
function getName() {
    var name = 'function';
    return this.name;
}

console.log( getName()); //window        undefined

オブジェクトのメソッドを変数にコピーし、変数によって呼び出した後のオブジェクトのメソッドは、通常の関数になります.

var name = 'window';
var Person = {
    name: 'bingxl',
    getName: function () {
        return this.name;
    }
};
var getName1 = Person.getName;
console.log(getName1());  // window
var getName2 = Person.getName();
console.log(getName2);    // bingxl

この例を見ると、get Name 1=Person.getNameは、getName 1をPerson.getName方法のメモリアドレスに向けるものであり、その本質は関数であるため、get Name 1()を使用する場合は、一般関数getName 2=Person.getName()を呼び出し、Person.getName()の値を返します.BingxlはgetName 2に値を割り当て、2つの変数は行typeofで操作されます.

console.log(typeof getName1);  //function
console.log(typeof getName2);// string

3.DOMイベントトリガ関数のthis
DOMイベントトリガー関数の中のthisはDOMノード自身を指します.

    


   
click this
    
        window.id = 'window';
        var div = document.getElementById('person');
        div.addEventListener('click', function () {
            console.log(this.id); //person
            var test = function () {
                console.log(this.id); // window
            };
            test();
        });
    

test()は普通の関数ですので、testのthisは全体のオブジェクトwindowを指します.
4.コンストラクタの呼び出し
new演算子を使ってコンストラクタを呼び出すと、オブジェクトが返されます.コンストラクタのthisは、一般的に返したオブジェクトを指します.コンストラクタがreturn明示式を使ってオブジェクトを返すと、newオペレータが返したのは、明示的に返されたオブジェクトです.

var Person = function () {
    this.name = 'bingxl';
};
var student = new Person();
console.log(student.name); // bingxl
var Person = function () {
    this.name = 'bingxl';
    return {
        name: 'test'
    };
};
var student = new Person();
console.log(student.name); // test

5.call、appyとbind
callまたはappy呼び出しにより、thisの着信先が変更されます.

var Doctor = {
    name: 'bingxl',
    profession: 'doctor',
    getProfession: function () {
        console.log(this.profession);
    }
};

var Student = {
    name: 'zhangsan',
    profession: 'student'
};
Doctor.getProfession(); // doctor
Doctor.getProfession.call(Student); //student

6.矢印関数のthis
矢印関数のthisは、定義時にあるthisで、矢印関数自体にthisがないということです.矢印関数は、bind、call、applayを使って、thisの指向を変えることもできます.

var env = 'window'
function Test() {
    this.env = 'test function';
    console.log('in Test Object', this.env); // test function
    let arrow = () => {
          console.log('in arrow function',  this.env); // test function
    };
   arrow();
    sub();
    function sub( ) {
        console.log('in sub ', this.env); // window,       this      
    }
}

const test = new Test();

アロwとsub関数を比較するとわかる.
end