JS中函数的调用和this的值

谁说胖子不能爱 提交于 2019-12-17 19:10:51

调用每一个函数会暂停当前函数的执行,传递控制权和参数给新函数。除了声明时定义的形式参数,每个函数还接收两个附加的参数:this arguments

参数this在面向对象编程中非常重要,他的值取决于调用的模式。

在JS中一共有4中调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异。

  • 方法调用模式

  当一个函数被保存为对象的一个属性时,我们称为一个方法。当一个方法被调用时,this被绑定到该对象。

    var myObject = {
        value: 0,
        increment: function(inc){
           this.value += typeof inc === "number" ? inc : 1;
        }
    };

    myObject.increment();
    console.log(myObject.value);    // 1
    myObject.increment(3);
    console.log(myObject.value);    // 4
  • 函数调用模式

  当一个函数并非一个对象的属性时,那么它就是被当做一个函数来调用。以此模式调用函数时,this被绑定到全局对象。有一个很容易的解决方案:如果该方法定义一个变量并给它赋值      为this,那么内部函数就可以通过那个变量访问到this。

    var value = 122;
    var myObject = {
        value: 0,
        increment: function(inc){
           this.value += typeof inc === "number" ? inc : 1;
        },
        double: function () {
            var that = this;
            return function () {
                return that.value = add(that.value, that.value);
            }();
        }

    };

    myObject.increment();    // 1
    myObject.increment(3);   // 4
//    console.log(myObject.value);
    myObject.double();
    console.log(myObject.value);  // 8
    function add(a, b) {
        return a + b;
    }
  • 构造器调用模式

  创建构造器函数。如果在一个函数前面带上 new 来调用,那么背地里将会创建一个连接到该函数的 prototype 成员的新对象,同时this被绑定到那个新的对象上。

     也就是说this代表的是那个新实例。

  • Apply调用模式

  该调用模式详见:如何理解和熟练运用js中的call和apply

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!