函数调用的四种方式与this的关系

笔记思想来自javascript语言精粹一书

函数调用有4种方式,且不同方式对this的处理有差异。

  • 方法调用模式
  • 函数调用模式
  • 构造器调用模式
  • apply调用模式

方法调用模式

把函数保存为对象的一个属性,且被调用时,称为方法调用,此时的this指向自己所属的对象。

var obj = {
    name: "dada",
    getName: function () {
        return this.name;
    }
}
obj.getName()//dada

函数调用模式

这种模式即为最普遍的函数调用,但此时的this有混淆的地方。
以此模式调用函数的时候,this指向全局对象,并不会指向外层函数的this

window.name = "nanyang";
var obj = {
    name: "dada",
    getName: function () {
    //that = this; 解决办法
        var helper = function () {
            this.name = 'xx!';
        }
        helper();
    }
}
obj.name()//dada
window.name//xx!

构造器调用模式

这个模式跟方法调用类似,this指向所属的新对象。

var Abc = function () {
    this.name = 'xxx';
}
var a = new Abc();
a.name//xxx

apply调用模式

apply允许我们自己选择this,感觉精粹里的说法很直白apply接受两个参数,第一个是要绑定给this的值,第二个是参数的数组
我的解释是,我们可以调用任意的方法,然后将方法中的this指向的对象换成我们在apply中加进去的第一个参数。

var some_obj = {
    name: ‘ldd’;
    say: function (who) {
        return ‘hi’ + who + ‘I am’ + this.name;
    }
}
Some_obj.say("xyn") //hi xyn, I am ldd;
Var my_obj = { name: "xxx"};
Some_obj.say.apply(my_obj, ['xyn'])
//hi xyn, I am xxx
原本say方法中的`this`指向`some_obj`对象,利用apply就可以将this指向my_obj

当然call跟apply的用法几乎一样,就是在第二个参数上的形式有一些变化

原创文章!转载请注明出处

标签: none

添加新评论