JavaScript函数调用的四种模式详解

作者:异步漫步

时间:2026-10-30

浏览:271

本文详细介绍JavaScript中函数调用的四种主要模式:方法调用、函数调用、构造器调用以及apply和call调用。文章通过具体代码示例,解析每种模式下this关键字的指向规则,帮助开发者深入理解JS函数执行上下文,提升代码编写能力。

文章目录

JavaScript函数调用四种模式概述

在JavaScript中,函数调用主要有四种模式:方法调用模式、函数调用模式、构造器调用模式,以及通过apply和call进行的调用模式。

方法调用模式与this指向

第一种是方法调用模式。

这种模式下,首先定义一个对象,然后在对象的属性中定义方法。执行时通过对象.属性的方式调用,此时this关键字指向当前调用该方法的对象实例。


var blogInfo={
  blogId:123,
  blogName:"werwr",
  showBlog:function(){alert(this.blogId);}
};

blogInfo.showBlog();

函数调用模式与全局this

第二种是函数调用模式。

在此模式中,定义一个函数并将函数引用赋值给一个变量。当直接调用该函数时,this关键字指向全局对象(在浏览器环境中通常为window对象)。


var myfunc = function(a,b){
  return a+b;
}

alert(myfunc(3,4));

构造器调用模式与原型方法

第三种是构造器调用模式。

该模式涉及定义一个构造函数,并在其原型对象上定义方法。要使用这些原型方法,必须先通过new关键字实例化该构造函数,创建对象实例后,才能调用其方法。


var myfunc = function(a){
  this.a = a;
};
myfunc.prototype = {
  show:function(){alert(this.a);}
}

var newfunc = new myfunc("123123123");
newfunc.show();

apply与call调用模式

第四种是apply和call调用模式。


var myobject={};
var sum = function(a,b){
  return a+b;
};
var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]); 
alert(sum2);

以上内容即为关于JavaScript函数定义与调用方法的完整介绍,旨在提供参考并感谢支持。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章