02.this词法

说在前面的话:
在JavaScript 编程中, this 关键字总是让我们感到一些疑惑.
个人理解this跟别的语言大相径庭,JavaScript的this总是指向一个对象,
具体指向哪个对象是在运行时基于函数的执行环境动态绑定的,而非函数被声明时的环境

1.作为对象的方法调用

当函数作为对象的方法调用是,this指向该对象

var obj = {
    name:"胖先森",
    getName:function(){
      alert(this === obj);  //弹出的是 true
      alert(this.a); //输出 : 1
    }
  }

2.作为普通函数调用

当函数不作为对象的属性被调用的时候,也就是我们常说的普通函数调用方式,此时的重点是:this总是指向全局对象(window),在浏览器的JavaScript中,全局对象就是我们说的window对象

        window.name="全局胖先森";
        //name = "全局胖先森"; //省略了window的写法
        var getName = function () {
            return this.name;
        }

        console.log(getName());

或者:

        window.name="全局胖先森";

        var myObject = {
            name : "局部的憨胖",
            getName:function () {
                return this.name;
            }
        };

        //作为对象的方法调用
        console.log(myObject.getName());
        //作为普通函数调用
        //1.赋值给一个新的变量
        var newGetName = myObject.getName;
        console.log(newGetName());

开发中我们经常使用动态元素的绑定方式,例如给某个div节点的事件函数内部,有一个局部的callback方法,callback方法又作为普通函数调用时,callback内部的this就变成了window,但是我们就是想让this指向当前节点.示例如下:

        //为了测试,我们给window定义一个属性id
        window.id="全局的window变量";

        //节点的时间绑定
        document.getElementById("div1").onclick=function () {
            alert(this.id);//输出了div1
            //定义一个内部函数
            var callback = function () {
                alert(this.id);
            }
            //作为普通函数进行调用
            callback();
        }

一个简单的解决方案: 也是应该最容易掌握的方案
可以通过一个变量保存div节点的引用

        //为了测试,我们给window定义一个属性id
        window.id="全局的window变量";

        //节点的时间绑定
        document.getElementById("div1").onclick=function () {

            alert(this.id);//输出了div1

            var _self = this;//保存引用
            //定义一个内部函数
            var callback = function () {
                alert(_self.id);
            }
            //作为普通函数进行调用
            callback();
        }

3.构造器函数调用

JavaScript中没有类,没有类,没有类, 但是可以从构造器中创建对象, 同时提供了new运算符,使得我们看到的构造器更加像一个类而已!
除了一些内置函数,大部分的JavaScript函数都可以当做构造器使用
重点,重点,重点! 当使用new运算符调用函数时,该函数总是会返回一个对象,通常情况下,构造器里面的this就是指向返回的这个对象.

        var Person  = function () {
            this.name="胖先森";
        }

        var p1 = new Person();//new只是一个运算符而已,隐式返回一个对象
        alert(p1.name);//输出:胖先森

但是new调用构造器时,还要注意一个问题,如果构造器显示返回一个object对象,那么运行结果就不会返回之前的this(当前对象),而是返回这个object对象,那么运行结果也会随之变化

      var Person  = function () {
            this.name="胖先森";

            return {//显示返回一个对象
                name:"刘文铭"
            }
        }

        var p1 = new Person();//new只是一个运算符而已
        alert(p1.name); //输出:刘文铭

情况说明:如果构造器不显示的返回任何数据或者返回一个非对象类型的数据，就不会造成上述的情况

        var Person  = function () {
            this.name="胖先森";

           return "悟空";//返回string类型
        }

        var p1 = new Person();//new只是一个运算符而已
        alert(p1.name); //输出:胖先森

4.Function.prototype.call或者Function.prototype.apply调用

跟普通函数调用比较,使用Function.prototype.call或者Function.prototype.apply 可以 动态的传入this

       var obj1 = {
           name:"胖先森",
           getName:function () {
               return this.name;
           }
       }

       var obj2 = {
           name:"刘文铭"
       }

       console.log(obj1.getName());//作为对象的方法进行调用 结果为 胖先森
       console.log(obj1.getName.apply(obj2));//this变成了obj2这个对象 结果 刘文铭