jsのthis面接試験問題をまとめます.

一、thisの概念
  thisとは、関数を呼び出すオブジェクトを指します.  thisはJavaScriptのキーワードで、関数が動作する時、関数の体内で自動的に生成されるオブジェクトで、関数の内部でしか使用できません.
 
1.   グローバル環境の中でthisはグローバル変数(window)を指します.
2.   関数のthisは、関数を呼び出して決定されます.
   (1)関数が独立して呼び出された場合、厳格なモードでundefinedを指し、非厳格モードではwindowを指す.
   (2)この関数があるオブジェクトによって呼び出された場合、呼び出されたオブジェクトにthisが向けられます.
3.   構造関数とプロトタイプの中のthis
     コンストラクタの中のthisと原型の中のthisのオブジェクトはすべて発生の実例です.(newで決めた)
newオペレータによってconstructorの指向を初期化することができます.newの役割はオブジェクトを作成する例です.constructorは新しい実行環境を指します.
4.  矢印関数は語法のスコープによってコンテキストを結合しますので、thisは実際に元のコンテキストに引用されます.
(矢印関数は現在のコンテキストの動作範囲をそのまま維持しますが、普通の関数ではなく、矢印関数はその動作領域からthisの値を継承します.)
 
二、例題

/*-----------   -------------------*/
           var obj = {   
                 a: 10,
                 b: this.a + 10, //   this  window(  )，a undefined  ==>  undefined + 20 = NaN
                 fn: function () {
                     return this.a;
                   }
             }
            console.log(obj.b);        //NaN
            console.log(
                obj.fn(),         //20
                obj.fn            //fn
            );     

/**-------------    ----------------*/
            var a = 20; 
            var obj = {
                a: 10,
                getA: function () {
                    return this.a;
                  }
            }
            console.log(obj.getA());    //10
            var test = obj.getA;
            console.log(test());        //20       test
 

/*-----------   -------------------*/ 
             var a = 5;
             function fn1(){
                 var a = 6;
                 console.log(a);        //6
                 console.log(this.a);   //5
             }  
             function fn2(fn) {
                 var a = 7;
                 fn();
            } 
             var obj = {
                 a: 8,
                 getA: fn1
             }  
            fn2(obj.getA); 

/*-----------   -------------------*/ 
               function fn( ) {
               'use strict';
                var a = 1;
                var obj = {
                    a: 10,
                    c: this.a + 20        //     ，a  undefined ，undefined.a  
                }
                return obj.c;
              }
             console.log(fn());       //    ==》 a undefined

 

/*-----------   -------------------*/ 
 
            //          
             function Person(name, age) {
                this.name = name;
                this.age = age;
                console.log(this);      //    this    ，  Person
            }   
            // Person();           //this   window
            Person.prototype.getName = function () {
                console.log(this);      //    this   ，  Person
            }; 
            var p1 = new Person("test", 18);
            p1.getName();

/*---------     -----*/ 
             var obj = {
               foo: "test",
               fn: function(){
                   var mine = this;
                   console.log(this.foo);       //test
                   console.log(mine.foo);       //test
                   
                   (function(){
                      console.log(this.foo);    //undefined
                      console.log(mine.foo);    //test
                   })();  
               } 
            };
            obj.fn();

              /**
                (1)       ， this   mine      obj，              foo；
               （2）       ，  this    obj， this.foo            ，
                          mine      ，      （ ES5  ，     this      
                 window  ；    ES5，      this     。）
            
            */

/*  ---------     -----------  */ 
           function foo(){
                console.log(this.a);
            }
            var a = 2;
            var o = {
                a:3, 
                foo: foo
            };
            var p = { a:4 };
            o.foo();  //3
            (p.foo = o.foo)();      //2
            /**
                   ： 
                function w(){
                    p.foo = o.foo;
                }
                w();
                   constructor  window,    w，  w  window    ，   
                  window.w()，  constructor  window。
            */

            p.foo = o.foo;
            p.foo();    //4        p  ，  constructor       p，       0.0
            //this    p，   this.a === p.a

 /*  ---------     -----------  */ 
 //                
            function foo() {
                console.log(this.a);
            }
            var obj1 = {
                a: 3,
                foo: foo
            };    
            var obj2 = {
                a: 5,
                foo: foo
            };
            obj1.foo();     //3
            obj2.foo();     //5
            
            obj1.foo.call(obj2);    //5
            obj2.foo.call(obj1);    //3

            // new             ，  new  call/ apply      ，  
            // new foo.call(obj1)     ，            new         

/*  ---------           -----------  */ 

          function test(arg) {
                this.x = arg;
                return this;
            } 
            /**
               var x = test(5);  -->  window.x = window.test(5);
            
            */
            var x = test(5);     //   x = window, y = undefined
            var y = test(6);     //   x = 6,  y = window ,      x        this.x    window.x
            console.log(x.x);     //undefined,       6.x   undefined
            console.log(y.x);     //6         window.x    6

/*  ---------     -----------  */ 
              var obj = {
                data: [1,2,3,4,5],
                data2: [1,2,3,4,5],
                fn: function () {
                   console.log("--test--");
                   console.log(this);   //{data: Array(5), data2: Array(5), fn: ƒ, fn2: ƒ}
                   return this.data.map(function (item) {
                         console.log(this);     //  -->  window
                         return item * 2;
                    }); 
                },
                fn2: function () {
                   console.log("---test2---");
                   console.log(this);   //{data: Array(5), data2: Array(5), fn: ƒ, fn2: ƒ}
                   return this.data2.map(item=>{
                       console.log(this);   //  --> obj {data: Array(5), data2: Array(5), fn: ƒ, fn2: ƒ}
                       return item * 2; 
                   });
                }
             };  
             obj.fn();
             obj.fn2();