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);