javascript 浅谈this关键字案例

不了解Js 内存管理机制的web开发，不是一个好android.........

如果真的想学会  this 关键字，一定要看内存分配机制！！！

1.this对象方法调用：对于对象的方法调用，this指向的是调用对象
1.1 var obj = {
        name: 'aaa',
        foo: function() {
           console.log(this);
        }
        }
        obj.foo();             = aaa
        var a=obj.foo;
        a()                        = window

解析：obj.foo()是obj对象调用的foo()；
a()函数在执行前赋值给a变量，会以变量形式出现在内存里面
而内存里面的一切全部归属于windows对象；


1.2  var bar = 2;
     var obj = {
          foo: function () { console.log(this.bar) },
          bar: 1
        };
     var fooo = obj.foo();    =1
     obj.foo()                =1
     var foo = obj.foo;
     foo()                    =2

解析：obj.foo()是obj对象调用的foo()函数，bar是1，所以cinsole是1；
var fooo = obj.foo()，这里面改变是将 obj.foo()运算结果赋值给fooo变量
在内存里面变量是单独存放，存的是多少，就是多少，
所以console是1；
在执行 foo() 之前 ，有一个转化
即var foo = obj.foo;这里面存储的是一个函数！
函数也是在内存里面单独存放的，自己独占一块内存！
在调用时候属于windows属性或者方法，所以调用全局变量bar，即2；

1.3 
var obj = {
        name: 'aaa',
        foo: function() {
            console.log(this);           =window
        },
        foo2: function() {
            console.log(this);            =obj
            setTimeout(this.foo, 1000);      =window
        }
        }

        obj.foo2(); 
解析：注意这里面出现了settimeout；foo2里面出现函数嵌套，导致settimeout时候this.foo指向window，
定时器是一个异类，这里可以利用闭包或者箭头函数或者绑定对象来解决this指向问题。
下面1.4和1.5会给出正确的写法。

1.4 
var obj = {
        name: 'aaa',
        foo: function() {
            console.log(this);             = obj
        },
        foo2: function() {
            console.log(this);             = obj
            setTimeout(()=>{console.log(this)}, 1000);     =obj
        }
        }

        obj.foo2();
1.5
var obj = {
  name: 'qiutc',
  foo: function() {
    console.log(this);
  },
  foo2: function() {
    console.log(this);
    var _this = this;
    setTimeout(function() {
      console.log(this);  // Window

      console.log(_this);  // Object {name: "qiutc"}
    }, 1000);
  }
}

obj.foo2();

2   this全局函数使用：对于全局的方法调用，this指向的是全局对象window
2.1    function Person(name) {
            this.name = name;
            console.log(this);           =window

            console.log(this.name);  =aaa
         }

        var p = Person('aaa');
解：参数是什么？参数就是变量！变量即是储存在内存的！

2.2   var name='123';
        function globalTest() {
        var name = "globalTest this";

        console.log(this);                 =  window
        console.log(this.name);       =123
        }
        globalTest(); 
 解：仔细比对2.1和2.2，在name时候改变了一点，var name和this.name；

3.  this  构造函数使用，构造函数就是一个空白对象，this指向构造函数！
3.1
function showName() {
        this.name = "showName ";
    }
    var obj = new showName();
    console.log(obj.name);        =showName

3.2
 var name = "globalName";
    function showName() {
        this.name = "showName ";
    }
    var obj = new showName();
    console.log(obj.name);       =showName
    console.log(name);             =globalName

3.3
 function Obj(){
              this.x=1;
              this.y=2;
              this.func=function(){
                  return 'this is a test function';
             };
         }
          var o1=new Obj();
          var o2=new Obj();
          alert(o2.func===o1.func);    =false

          alert(o2.func()===o1.func()); =true
解析：o2.func===o1.func结果返回false；这里要正确理解函数和函数的区别
A里面的函数和B里面的函数，即使代码一样，也是不同的，你可以概括为引用不同。地址指针不同！

o2.func()===o1.func()结果返回true，这里是函数运行后的结果，已经是结果了
所以相同都是this is a test function！

3.4
function test() {
        　this.x = 1;
        }
        var obj = new test();
        var objj = new test();
        alert(obj.x===objj.x);    =true
解释：属性和方法在保存在对象里面是不同的，这点可以映射到内存上，属性更多是值，方法是函数！
二者不能混为一谈！

3.5下面来一段终极必杀技可以猜猜效果，代码如下：

var a=11
function test1(){
this.a=22;
let b=function(){
    console.log(this.a);
};
b();
}
var x=new test1();

这里面的b（） 会执行，对象this会是window；
通常说指向了这个新的构造函数，但是，里面的b函数，执行了。。。

过几天我会在写es6的箭头函数，那个时候更恶心，千万分开来理解。