JavaScript中函数的四种调用模式

JS中函数的四种调用模式

在函数的调用模式中感觉最大的区别就是：
this指向

函数调用模式

即通过函数名直接调用的一种方式

this 指向 window

demo

function fn( ){
    console.log(this);  // -> Window ...
}
fn( );

方法调用模式

即通过一个对象调用函数的一种方式

this 指向调用者

demo

var o = { 
    name: paddy,
    fn: function(){
        console.log(this);  // -> Object {name: h1#paddy}
    }
};
o.fn( );

构造器调用模式

即通过 new 关键字进行调用的一种方式

this 指向 new 出来的那个对象

demo

function F( ){
    console.log(this);  // -> F {}
}
new F( );

构造函数的两个重点：

一个是 this ，一个是 return

return

在构造函数中如果没有 return 就返回当前对象，即 this

如果有 return ：

当 return 后面跟的是一个基本类型时，忽略仍然返回当前对象 this

当 return 后面跟的是一个引用类型，
无论构造函数中有什么内容，最终都会返回 return 后面的对象

function F1( ){
    var str = 'haha';
}
console.log(new F1( )); // -> F1 {}

function F2( ){
    var str = 'haha';
    return str;
}
console.log(new F2( )); // -> F2 {}

function F3( ){
    var str = 'haha';
    var o = {
        str: str
    };
    return o;
}
console.log(new F3( )); //-> Object {str: "haha"}

上下文调用模式

通过 apply 和 call 进行调用的一种方式

this 指向通过 apply 或 call 指定的那个对象

apply 和 call 功能一样，就是传入的值不一样

apply 参数为调用者和一个数组对象

call 参数为调用者和单个的值

demo

function fn( ){
    console.log(this);
}
var o1 = { 
    name: 'haha'
};
var o2 = {
    name: '哈哈'
};
fn.apply(o1);  // -> Object {name: "haha"}
fn.call(o2);  // -> Object {name: "哈哈"}

// apply >
function fn(){
 console.log(this);
}
fn();    // -> Window...
var o = {fn:fn,name:'haha'};
o.fn();  // -> Object {name: "haha"}
new fn();  // -> fn {}
fn.apply();  // -> Window...
fn.apply({});  // -> Object{}
var obj = {name:'哈哈'};
fn.apply(obj);  // -> Object {name: "哈哈"}

var arr1 = [];
var arr2 = [];
[].push.apply(arr1,[1, 2, 3]);
arr2.push([1, 2, 3]);
console.log(arr1);  // -> [1, 2, 3]
console.log(arr2);  // -> [Array[3]]

https://github.com/PaddyWang/summarize