JavaScript函数的四种存在形态详解

作者:小括号时间:2026-10-30 08:31:10浏览:265

本文详细解析JavaScript中函数的四种存在形态:函数形态、方法形态、构造器形态以及上下文调用模式。通过具体代码示例,阐述了this关键字在不同场景下的指向变化,以及new运算符和apply/call方法对函数行为的影响,帮助开发者准确掌握函数在不同语境下的使用规则。

JavaScript函数四种形态概述

在JavaScript中,函数具有多种存在形态,理解这些形态对于掌握语言特性至关重要。

第一种形态为函数形态,即函数作为独立实体存在。

第二种形态为方法形态,当函数被赋值给对象的某个属性时,该函数即成为该方法。

第三种形态为构造器形态,用于创建对象实例。

第四种形态为上下文形态,涉及通过特定方式改变函数执行时的上下文环境。

函数形态与方法形态解析

下面将逐一详细解析这四种形态的具体表现与机制。


var foo = function() {
  alert(this);       //this是window
};

方法形态的核心在于函数与对象的绑定关系。

 


o = {};
o.foo = foo;  //将函数foo赋值给对象o的foo属性
o.foo();    //弹出的是object,此时的this表示object

 


var lib = {
  test:function() {
    alert(this);     //此处的this表示object(lib对象本身)
    //var that = this;  //要想匿名函数中this表示lib对象,可以这样
    (function() {
     alert(this);    //此处的匿名函数不属于lib对象,所以this的任然表示window
    })();
  }
};
lib.test();

构造器形态的工作机制

构造器形态通过new关键字实现对象的实例化过程。

首先,new运算符会创建一个新的对象,并在内存中为其开辟存储空间。

其次,该新对象的引用地址会被传递给构造函数,并在函数内部通过this关键字接收。

最后,当构造函数的执行逻辑结束,默认返回this,即新创建的对象。


var Person = function() {
  this.age = 19;
  this.name = "Mr靖";
  return "{}";
};

var p = new Person();
alert(p.name);  //弹出的是undefined,由于函数返回的是一个对象,所以直接将这个对象返回给person,而忽略age,name属性

var Person = function() {
  this.age = 19;
  this.name = "Mr靖";
  return 123;
};

var p = new Person();
alert(p.name);    //弹出“Mr靖”,由于返回值不是对象,所以直接忽略返回值
alert(p);      //弹出object

需要注意的是,构造函数的行为会改变函数的返回值:如果函数内部显式返回一个对象,则返回该对象;如果返回值不是对象,则忽略返回值,直接返回this。

上下文调用模式的应用

上下文调用模式允许通过apply方法指定函数执行时的this对象,并传入参数数组。


var foo1 = function(a, b) {
  alert(this);
  return a > b ? a : b;
};
var num = foo1.apply(null, [112, 34]);   //此时foo1是函数形态,this表示window
num = foo1.apply({}, [112, 34]);      //此时foo1是方法形态,this表示参数中传入的对象{}

同样,call方法也允许指定执行上下文,但参数以列表形式单独传入。


var num1 =foo1.call(null,112,34);
num1=foo1.call({},112,34);      //除了参数列表外,其余和apply一样

以上是对JavaScript函数四种存在形态的完整解析,旨在帮助开发者深入理解函数在不同场景下的行为差异,供学习参考。

作者最新文章