一、this

• this的定义：随着函数使用场合的不同，this的值也会发生变化。但是有一个总的原则，那就是this指的是——调用函数的那个对象（执行它的那个对象）。
• 作为函数调用时：
  在函数被直接调用时，this绑定到全局对象。在浏览器中，window就是该全局对象

        console.log(this);
        function fn() {
            console.log(this);
        }
        fn();

全局下的this 和 函数内部的this 是同一个this

相关概念——默认函数在调用时都是全局对象在调用，使用node时全局对象是globle对象；在浏览器环境上时是window对象

• 内部函数——闭包：
  函数嵌套产生的内部函数的this，不是其父函数在调用它，仍是全局变量在调用

        function fn() {
            function fnfn(){
                console.log(this);
            }
            fnfn();
        }
        fn();

闭包内的this指向

        function fn() {
            var a = 123;
            function fnfn(){
                console.log(this);
            }
            fnfn();
        }
        fn();

image.png

相关概念——始终是一个环境window在执行所有的函数，并不是父函数在调用子函数。子函数可以访问父函数的环境（局部变量），但是他们的执行都是统一由全局对象在执行

        function fn() {
            var a = 123;
            function fnfn(){
                console.log(a);
            }
            fnfn();
        }
        fn();

image.png

相关概念——函数的堆栈：函数执行外部函数先进后出(函数进出内存顺序)
入栈顺序：从下到上。最外层执行先进入内存，最内层执行后进入内存
出栈顺序：从上到下。最内层执行先退出内存，最外层执行后退出内存

        function fn() {
            var a = 123;
            function fnInner(){
                console.trace(this);  //18
            }
            fnInner();  //20
        }
        fn();  //22

入栈顺序：从下到上。出栈顺序：从上到下

• Dom对象绑定事件
  在事件处理程序中this代表事件源的Dom对象

        document.addEventListener('click', function(){
            console.log(this);  //16 事件绑定的this指向触发它的Dom对象
            setTimeout(function(){
                console.log(this);  //18 计时器的队列由全局在维护
            }, 200);
        }, false);

相关概念：保存事件绑定的this的方法

        document.addEventListener('click', function(){
            console.log(this);  //16 事件绑定的this指向触发它的Dom对象
            var _document = $(this);
            setTimeout(function(){
                console.log(_document);  //此时打印出的是时间绑定的this
            }, 200);
        }, false);

• setTimeout、setInterval
  这两个方法执行的函数this也是全局对象

        document.addEventListener('click', function(){
            console.log(this);  //16 事件绑定的this指向触发它的Dom对象
            setTimeout(function(){
                console.log(this);  //18 计时器的队列由全局在维护
            }, 200);
        }, false);

image.png

• 注意：作为对象方法调用
  在JavaScript中，函数也是对象，因此函数可以作为一个对象的属性，此时函数被称为该对象的方法。在使用这种调用方式时，this被自然绑定到该对象（this指向调用它的对象）
  是哪个对象在调用它，this就代表谁

        var obj1 = {
            name: 'Byron',
            fn: function(){
                console.log(this);  //obj1
            }
        };
        obj1.fn();

image.png

obj1.fn = obj1[fn] = function(){} = console.log(this)

当把obj1.fn赋值给变量fn2时，调用fn2。此时fn2是在全局环境window下执行的fn2，所以this指向了window

        var obj1 = {
            name: 'Byron',
            fn: function(){
                this.age = 123;
                console.log(this);
            }
        };
        obj1.fn();  //obj1 this指向调用它的对象obj1
        console.log(obj1.age);  //123  this指向ojb1，所以this.age=obj1.age=123

        var fn2 = obj1.fn;        
        fn2();  //Window 

image.png

可以理解为

        var obj1 = {
            name: 'Byron',
            fn: function(){
                this.age = 123;
                console.log(this);
            }
        };
        obj1.fn();  //obj1 this指向调用它的对象obj1
        console.log(obj1.age);  //123  this指向ojb1，所以this.age=obj1.age=123

        var fn2 = obj1.fn;
        //等价于
        var fn2 = function(){
                this.age = 123;
                console.log(this);
            }
        fn2();

• 作为构造函数调用
  所谓构造函数，就是通过这个函数生成一个新对象（object）。
  这时this就指向这个新对象
  this就是新创建的那个实例
  image.png

new运算符接受一个函数F及其参数：new F(arguments...)。这一过程分为三步：
1.创建类的实例。这步是把一个空的对象的 _proto_ 原型属性设置为F.prototype
（创建一个空对象此处将空对象命名为p1对象，把p1对象的_proto_设置为Person函数的prototype属性）
2.初始化实例。函数F被传入参数并调用，关键字this设定为该实例
3.返回实例。
示例：
        function Person(name){
            this.name = name;
        }
        Person.prototype.printName = function(){
            console.log(this.name);
        }

        //此处为步骤2
        var p1 = new Person('Byron');
        var p2 = new Person('Casper');
        var p3 = new Person('Vincent');

        //步骤3
        p1.printName();
        p2.printName();
        p3.printName();

image.png

注：当在var p1 = new Person('Byron');构造函数里找不到调用的方法时，此时会去父元素找原型属性中定义的方法，this就是新创建的那个实例

        function Person(name){
            this.name = name;
        }
        Person.prototype.printName = function(){
            console.log(this);
        }

        var p1 = new Person('Byron');  //this指向此处对象p1

        p1.printName();

image.png

• Function.propotype.bind
  bind，返回一个新函数，并且使函数内部的this为传入的第一个参数
  控制this变为指定值

        var obj1 = {
            name: 'Byron',
            fn: function(){
                this.age = 123;
                console.log(this);
            }
        };
        obj1.fn();  //obj1

        var fn2 = obj1.fn;
        fn2();  //window

        var fn3 = obj1.fn.bind(obj1);  //创建了fn3函数
        fn3();  //obj1
        var fn3 =obj1.fn.bind({name:Seaser'});
        fn3();  //name:'Seaser'

image.png

• 使用call和apply设置this
  call apply，调用一个函数，传入函数执行上下文及参数
  直接调用指定执行环境，与bind区别在于不需创建新函数

        fn.call(context, param1, param2...)
        fn.apply(context, param1, param2...)

语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接受参数列表，而apply接受参数数组

        var obj1 = {
            name: 'Byron',
            fn: function(){
                this.age = 123;
                console.log(this);
            }
        };
        obj1.fn();  //obj1

        var fn2 = obj1.fn;
        fn2();
        fn2.call(obj1);

image.png

        var obj1 = {
            name: 'Byron',
            fn: function(name, age){
                this.name = name;
                this.age = 123;
                console.log(this);                
            }
        };
        
        var fn3 = obj1.fn.bind(obj1);
        fn3('Casper', 21);

        var fn2 = obj1.fn;
        fn2.call(obj1, 'Casper', 21);  //指定fn2的执行环境是obj1
        fn2.apply(obj1, ['Casper', 21]);

image.png

二、arguments

• arguments
  代表实参的列表，只有在执行过程中arguments才有值，执行完成后变为null
  1.在调用函数时，会自动在该函数内部生成一个名为arguments的隐藏对象
  2.该对象类似于数组，可以使用[]运算符获取函数调用时传递的实参
  3.只有函数调用时，arguments对象才会被创建，未调用时值为null

        function fn(name, age){
            console.log(arguments);
            name = 'XXX';
            console.log(arguments);
            arguments[1] = 30;
            console.log(arguments);
        }
        fn('Byron', 20);

image.png

不知道一个方法有几个参数时使用return arguments

        function join(){
            var s = '';
            for(var i=0; i<arguments.length; i++){
                s += ',' + arguments[i];
            }
            return s.substr(1);
        }
        console.log(join(1,2,3,4));

image.png

在arguments环境应用数组的join方法（用apply把执行环境变为arguments）

        function join(){
            return Array.prototype.join.apply(arguments);
        }
        console.log(join(1,2,3));

image.png

三、caller

• caller
  在函数A调用函数B时，被调用函数B会自动生成一个caller对象，指向调用它的函数对象。如果函数当前未被调用，或并非被其他函数调用，则caller为null

        function fn(){
            console.log(fn.caller);  //null 没有函数在调用它，在执行本函数
            function fc(){
                console.log(fc.caller);  
                /*function fn(){} 返回外层函数，外层函数在调用它
               （外层函数将它推入堆栈），在全局环境下执行*/
            }
            fc();
        }
        fn();

image.png

四、callee

当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用
由于arguments在函数被调用时才会生效，因此arguments.callee在函数未调用时是不存在的（即null.callee），且引用它会产生异常

        function fn(){
            console.log(fn.callee);  
        }
        fn();

image.png

匿名函数时特别好用

        var i = 0;
        window.onclick = function(){
            console.log(i);
            if(i < 5){
                i++;
                //利用arguments.callee找到匿名函数function(){}
                setTimeout(arguments.callee, 200);
            }
        }

image.png

五、三种变量

• 实例变量：（this）类的实例才能访问到的变量
• 静态变量：（属性）直接类型对象能访问到的变量
• 私有变量：（局部变量）当前作用域内有效的变量

        function ClassA() {
            var a = 1; //私有变量，只有函数内部可以访问
            this.b = 2; //实例变量，只有实例可以访问
        }

        ClassA.c = 3; // 静态变量，也就是属性，类型访问

        console.log(a); // error
        console.log(ClassA.b) // undefined
        console.log(ClassA.c) //3

        var classa = new ClassA();  //只有创建实例才能 访问ClassA内的变量b
        console.log(classa.a);//undefined
        console.log(classa.b);// 2
        console.log(classa.c);//undefined

六、函数的执行环境

JavaScript中的函数既可以被当作普通函数执行，也可以作为对象的方法执行，这是导致 this 含义如此丰富的主要原因
一个函数被执行时，会创建一个执行环境（ExecutionContext），函数的所有的行为均发生在此执行环境中，构建该执行环境时，JavaScript 首先会创建 arguments变量，其中包含调用函数时传入的参数
接下来创建作用域链，然后初始化变量。首先初始化函数的形参表，值为 arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。
如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解JavaScript中的变量作用域非常重要，最后为this变量赋值，会根据函数调用方式的不同，赋给this全局对象，当前对象等
至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取