JavaScript调用函数的4种方式详解

JavaScript调用函数的4种模式概述

第一种方式是方法调用模式。当函数被赋值给对象的属性时，通过对象访问该函数即为方法调用。在此模式下，关键字 this 指向调用该方法的对象。例如，定义一个包含参数和求和函数的对象 myObj，调用 myObj.sum() 时，this 指向 myObj，返回两参数之和。

var myObj = {//对象字面量
  param1: 1,
  param2: 2,
  sum: function (){
//this关键字只带当前的对象
return this.result = this.param1 + this.param2;
  }
}
myObj.sum(); //=>3

第二种方式是函数调用模式。当函数独立存在，不依附于任何对象时，直接调用该函数即为函数调用模式。此时，this 通常指向全局对象（在严格模式下为 undefined）。例如，定义一个加法函数 add 并直接调用 add(1, 2)，函数执行并返回结果。

var add = function(a, b){
  return a + b;
}
//函数调用模式
add(1,2); //=>3

此外，函数声明方式定义的函数同样可以通过函数调用模式执行。例如，使用 function 关键字声明 add 函数后，直接调用 add(1, 2)，其行为与函数表达式定义的函数在调用时一致，均属于函数调用模式。

function add(a, b){
  return a + b;
}
add(1,2);//=>3

第三种方式是构造器调用模式。当使用 new 关键字调用函数时，JavaScript 会创建一个新对象，并将该函数作为构造器执行。此时，this 指向新创建的对象。例如，定义一个包含属性 name 和方法 sum 的构造函数 add，通过 var obj = new add() 创建实例 obj，随后调用 obj.sum(1, 2)，this 指向 obj，返回计算结果。

var add = function() {
  this.name = "汇智网";
  this.sum = function (a, b){
    return a + b;
  }
}
// 构造器调用模式
var obj = new add(); //obj是一个对象
obj.sum(1,2); //=>3

第四种方式是 apply 调用模式。apply 是函数对象的一个方法，允许指定函数执行时的 this 上下文，并以数组形式传递参数。例如，定义函数 add 后，通过 add.apply(null, [1, 2]) 调用，其中 null 表示不指定特定的 this 对象（在非严格模式下指向全局对象），[1, 2] 为参数数组，函数返回两数之和。

var add = function (a, b) {
  return a + b;
}
 
add.apply(null,[1,2]); //=>3

与 apply 类似，call 方法也用于指定函数执行时的 this 上下文，但参数以列表形式逐个传递，而非数组。例如，定义函数 add 后，通过 add.call(null, 1, 2) 调用，其中 null 为 this 指向，1 和 2 为独立参数，函数同样返回两数之和。

var add = function (a, b) {
  return a + b;
}
add.call(null,1,2); //=>3