JavaScript 中 Object 与 Function 核心概念解析

作者:小括号

时间:2026-10-31

浏览:308

本文梳理了JavaScript中Object与Function的核心概念,对比Java面向对象特性,详解对象创建、属性访问方式及函数声明。重点解析了JavaScript中arguments数组机制、函数指针特性及缺乏传统重载的原因,帮助开发者理清动态类型与引用类型的差异。

文章目录

JavaScript Object与Function基础概念

在掌握Java、C++等传统面向对象语言后,转向学习JavaScript时,开发者常因其中Object(对象)和Function(函数)的概念感到困惑。为了便于理解,这里整理了一些基础概念,并结合Java面向对象知识进行对比说明。

首先明确几个核心概念。

在ECMAScript规范中,Object代表复杂数据类型。ECMAScript包含5种简单数据类型:Undefined、Null、Boolean、Number和String,而Object则是唯一的复杂数据类型。

引用类型对应Java中的类概念。

引用类型的值对应Java中的对象概念。

函数对应Java中的方法概念。

var是声明变量的操作符。由于JavaScript采用松散类型,变量可以保存任何数据,仅作为占位符存在,因此无需指定String或int等具体类型,直接使用var即可。需要注意的是,对象也可以使用var进行声明。

Object()在JavaScript中充当构造函数,类似于Java中Object类的构造方法。

关于Object的详细说明。

Object对象创建与属性访问

JavaScript支持动态添加属性和方法。例如,可以通过以下方式创建一个Object实例:

var obj = new Object();

变量obj即为new Object()生成的对象。接下来演示具体操作:


var obj = new Object();
obj.name = 'Zeng';
obj.age = 12;
obj.fun = function () {
  console.log(this.name+this.age);
}

上述方式封装性较差,因此更常用的是对象字面量表示法。


var obj = {
  name:'Zeng',
  age:12,
  fun:function () {
    console.log(this.name+this.age);
  }
}
obj.fun(); // 打印出: Zeng12

关于对象属性的访问方式:

1. 使用中括号语法:console.log(obj["name"]);

2. 使用点语法,建议采用此方式:console.log(obj.name );

Function函数声明与参数机制

关于Function的详细说明。

函数是任何语言的重要组成部分。在JavaScript中称为函数,可理解为Java的方法或C语言的函数,本质相同,但在声明和使用方式上JavaScript有显著差异。

以下是一个函数示例:


function fun() {
   return "例子";
}
console.log(fun()); // 输出 : ‘例子'

还可以采用另一种方式声明:


var fun = function() {
  return "使用表达式创建函数"
};
console.log(fun()); // 输出 : "使用表达式创建函数"

观察上述示例,函数没有名称,仅有一个变量名fun,且表达式末尾带有分号。可将其视为声明变量的表达式,其他变量声明方式如下:

var name = "Zeng"; // 包含变量名和分号

以下是一个带参数的示例:


function fun() {
   return arguments[0] + arguments[1] + arguments[2];
}
console.log(fun("这是","一个","例子")); // 输出 :“这是一个例子”

这看似奇怪:创建的函数未定义参数,但调用时传入了参数,函数内部仍能获取并返回这些参数。

这说明了JavaScript函数不介意传入参数的数量或类型,因为函数内部通过arguments数组来存储参数。

arguments是一个数组,无论传入多少参数,它都能处理;若无参数,则对应值为null。

函数特性:模拟重载与指针行为

利用这一特性,可以构建如下示例:

通过参数个数不同来模拟方法重载。


function fun() {
  if(arguments.length == 1){
    return arguments[0]*10;
  }
  if(arguments.length == 2){
    return (arguments[0]+arguments[1])*10;
  }
  return 10;
}
console.log(fun(11,111)); // 返回 1220 !!!!

未实现真正的重载:上述示例旨在模拟函数重载。既然可以创建多个不同参数的函数,为何要模拟呢?


function fun( num1) {
  return "只有一个参数的函数"
}
function fun( num1,num2) {

  return "有两个参数的函数";
}
console.log(fun(11)); // 输出 “有两个参数的函数”

明明调用的是带一个参数的函数,实际执行的却是带两个参数的函数。原因在于:JavaScript中定义两个同名函数时,该名称仅归属于后定义的函数,因此JavaScript中不存在传统意义上的重载特性。

函数名实际上是指针:


var fun = function(num1,num2) {
  return num1+num2;
};

var new_fun = fun;
fun = null; // 将 函数 置 null

console.log(new_fun(10,20)); //输出 :30
console.log(fun(10,20)); //抛出异常 :fun is not a function

尽管执行了fun = null,但在执行前var new_fun = fun已使指针指向new_fun,因此new_fun()仍可执行,且函数体并未置为null。

函数也可以作为值使用:


function add(fun,num) {
  return fun(num);
}
function add_10(num) {
  return num+10;
}

console.log(add(add_10,200)); // 输出 : 210

可以这样解释:


function add( 函数  ,  参数  ) {

  return  函数 (  传递过来的参数 );
}

关于函数的arguments.callee属性,这是一个递归示例。


function fun(num) {
  if(num<=1){
    console.log(num );
    return 1 ;
  }else {
    console.log(num );
    return num * arguments.callee(num-1);
  }
}
console.log(fun(3)); // 输出 6

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章