JavaScript我学之八善变的this---函数执行上下文

本文是金旭亮老师网易云课堂的课程笔记，记录下来，以供备忘。

函数执行上下文

当函数运行时，通过this，函数可以获取它运行所需的外界环境的相关信息（比如某变量的值，另一个对象的引用等）。

this引用的对象会”变的”！

每次对函数的调用都有一个上下文对象，this关键字引用它。如果函数归属于某个对象，则this关键字将引用此对象，它就是本次函数调用的上下文。

         var obj = {
             func: function () {
                 console.info("func():this=" + this);
             }
         };
         obj.func();//func():this=[object Object]
         var ref = obj.func;
         ref();//func():this=[object Window]

函数对象的call方法

• 所有函数都有一个call方法，此方法可以动态地指定函数调用的上下文对象（this引用它）
• call方法的第一个参数代表本函数运行时的上下文对象，后面跟的参数函数调用的实参（如果有的话）。

         window.color = "red";
         var o = { color: "blue" };
         function sayColor() {
             console.info(this,this.color);
         }
         sayColor(); //window "red"
         sayColor.call(this); //window "red"
         sayColor.call(window); //window "red"
         sayColor.call(o); //Object "blue"

函数对象的apply方法

• call可以接收可变数目的参数，而apply仅能接收两个参数，第一个是context对象，另一个是参数数组，数组中可以包容多个参数。
• apply方法 参数为context对象与数组

       function Person(name) {
             this.name = name;   //this.name 属性Person对象，而name 是实参，两个虽同名但是不同个体。
         }
         var say = function (message) {
             console.info((this.name || '无名氏') +
                                 "说：“" + (message || '我什么也不想说了') + "”。");
         }
         say();  //无名氏 说：“ 我什么也不想说了“
         var p1 = new Person("qiu");
         say.apply(p1, ["这是qiu说滴"]);  //qiu说：“这是qiu说滴”。
         window.name = "唐僧";
         say.apply(null, ["你想说你就说嘛，你不说我就说了"]);   //唐僧说：“你想说你就说嘛，你不说我就说了”。

回调函数中的this

被回调函数showTime的执行上下文，与回调函数setInterval的一致，都是window.示例

         <h4 id="output"></h4>
         <script type="text/javascript">
             ////什么是回调？
             var output = document.getElementById('output');
             //被回调的函数
             function showTime() {
                 console.info(this);
                 if (!!output) {  //转换成boolean值
                     output.innerHTML = new Date().toLocaleString();
                 }
             }
             //负责回调的函数
             setInterval(showTime, 1000);
         </script>

回调函数的执行上下文对象

那么问题来了，当回调一个对象的方法时，如果此方法需要访问对象中的属性会怎么样？

         var obj = {
             outputElem: document.getElementById('output'),
             showTime: function () {
                 this.outputElem.innerHTML = new Date().toLocaleString();
             }
         };
         //当回调一个对象的方法时，如果此方法需要访问对象中的属性
         //则会报告出错
         setInterval(obj.showTime, 1000);

window对象中没有outputElem属性，因此，showTime()方法执行出错！

必须使用bind()方法，指定回调 函数在特定的上下文对象上执行。

       //设定被回调的函数，绑定到obj上
         var callbackFunc = obj.showTime.bind(obj);
         ////现在工作正常了！
         setInterval(callbackFunc, 1000);