JavaScript对象、内置对象及值类型与引用类型详解

作者:代码拾荒时间:2026-10-24 12:25:47浏览:392

本文详细解析JavaScript中对象的三大分类(内置、宿主、自定义),涵盖使用构造函数和字面量创建对象的方法,以及for...in循环遍历成员的技巧。重点讲解Math、Date、Array等常用内置对象的使用,并深入剖析值类型与引用类型在栈和堆内存中的存储差异及赋值行为。

对象

在JavaScript中,对象被视为属性与行为的集合。其中,属性构成了对象的静态特征,而行为(通常称为方法)则体现了对象的动态特征。

JavaScript中的对象主要可以分为以下三类:

  • 内置对象

内置对象是由ECMAScript(ES)标准定义的对象,在任何符合标准的ES实现中均可直接使用。常见的内置对象包括Math、String、Number、Boolean、Function和Object等。

  • 宿主对象

宿主对象是由JavaScript运行环境提供的对象,目前主要指浏览器环境提供的对象,例如BOM(浏览器对象模型)和DOM(文档对象模型)。

  • 自定义对象

自定义对象是指由开发人员根据具体需求自行创建的对象。

对象的定义

定义非空对象


// 非空对象:
var 对象名 = {
	属性名: 值,
	...
	方法名: function([参数]){
		方法体语句;
	}
	...
}

var p1 = {
	color: '黑色',//给对象添加属性
	weight: '188g',//属性之间用逗号隔开
	screenSize: 6.5,
	call: function(name){//给对象添加方法
		console.log("打出电话:"+name);
	},
	sendMassage: function(msg){
		console.log("发出的信息是:"+msg);
	},
	playVideo: function(){
		console.log("播放视频");
	},
	playMusic: function(){
		console.log("播放音乐");
	}
}
console.log("手机颜色:"+p1['color']);//也可以使用 对象['属性']来输出属性值
console.log("手机重量:"+p1.weight);
console.log("屏幕尺寸:"+p1.screenSize);
p1.call("张三");//调用对象的发方法
p1["sendMassage"]("helo");
p1.playVideo();
p1.playMusic();
console.log(p1);

可以使用new Object()来创建对象。


var p = new Object(); // 创建一个空对象p

p2.name = '刘备';
p2.sex = '男';
p2.age = 32;
p2.sayHello = function(){
	console.log('Hello');
}
p2.sayHello();//调用对象的方法

可以通过构造函数来创建对象,语法格式为:new 构造函数名()。


function Student(name,sex,age){
	this.name = name;//这里的this指向的是构造函数新创建的对象
	this.sex = sex;
	this.age = age;
	this.show = function(){
		console.log("姓名:"+this.name)
		console.log("姓别:"+this.sex)
		console.log("年龄:"+this.age)
	}
}
var s1 = new Student('乔峰','男',28);//s1为构造函数创建的新对象 即实例
s1.show();
var s2 = new Student('段誉','男',23);
s2.show();

需要注意的是,构造函数可以接受参数,也可以不接受参数。如果构造函数没有参数,其后的圆括号可以省略。

遍历对象的成员

要遍历对象的属性和方法,可以使用for...in循环结构。


for(var 变量名 in 对象名){
	循环语句
}

function Student(name,sex,age){
	this.name = name;
	this.sex = sex;
	this.age = age;
	this.show = function(){
		console.log("姓名:"+this.name)
		console.log("姓别:"+this.sex)
		console.log("年龄:"+this.age)
	}
}
// s2是要遍历的对象
var s2 = new Student('段誉','男',23);
for(var k in s2){
	console.log(k);//依次输出 name sex age show()
	console.log(s2[k]);//依次输出 段誉 男 23 
}

in运算符用于判断成员(属性)是否存在于对象中。如果存在,返回true;如果不存在,返回false。

JS内置对象

JavaScript提供了多种常用的内置对象,包括用于数学运算的Math对象、处理日期的Date对象、存储数据集合的Array数组对象,以及处理文本的String字符串对象等。

Math对象

Math对象用于执行与数学相关的数值运算。该对象无需实例化,可以直接调用其静态属性和静态方法。


Math对象:不需要实例化
Math.PI:算数常量PI
Math.abs(x):返回x的绝对值
Math.max(args...):返回最大数
Math.min(args...):返回最小数
Math.pow(x,y):返回x的y次方
Math.sqrt(x):返回x的算术平方根
Math.random():返回0.0到1.0之间的随机数
Math.round(x):返回最接近x的整数
Math.floor(x):返回一个小于等于x 并且与它最接近的整数
Math.ceil(x):返回一个大于等于x 并且与它最接近的整数

Date对象

Date对象需要使用new Date()进行实例化才能使用。Date()是一个构造函数,可以向其传递参数以生成特定的日期对象。

对象
对象


// 1.创建一个Date对象 没有参数
var date1 = new Date();
console.log(date1);
// 2.传入年 月 日 时 分 秒 创建一个指定日期时间的Date对象
// 月份是 0-11
var date2 = new Date(2021,4,22,10,17,55);
console.log(date2);
// 3.传入一个日期和时间字符串创建一个Date对象
var date3 = new Date("2021-5-22 18:19:25");
console.log(date3);
console.log(date3.getMonth())//4
console.log(date3.getTime())//表示Date对象距离1970年1月1日午夜之间的毫秒数
console.log(date1.toLocaleDateString())//2021/6/14
console.log(date1.toLocaleString())//2021/6/14 下午11:17:36
console.log(date1.getFullYear())//2021

数组对象

数组是存储相同类型数据集合的结构,其功能与普通对象类似,但数组使用数字作为索引来操作内部元素。创建数组的方式包括:

  • 使用字面量
    
    var arr=[]//创建一个空数组
  • 使用new Array创建
    
    var arr = new Array();//定义一个空数组

判断一个对象是否为数组有两种常用方法:

  • isArray(对象名)
  • instanceof: 对象名 instanceof Array
    
    var arr = [];
    var obj = {};
    console.log(Array.isArray(arr));//true
    console.log(Array.isArray(obj));//false
    console.log(arr instanceof Array);//trrue

对象

关于数组的其他方法,之前的文章已有详细介绍,此处不再赘述。

String对象

String对象用于处理字符串,必须使用new String()来创建实例。

字符串常用方法


- charAt(n) 返回n位置上的字符串
- concat(s1,s2,...) 连接多个字符串
- charCodeAt(n) 返回n位置上的ASCII码
- split('分隔符') 将字符串按给定的分隔符 转换成字符串数组
- substr(start,length) 从start开始提取length个字符构成一个新串
- substring(from,to) 提取from和to之间的字符串构成一个新串
- toLowerCase() 将串中的大写字符转换成小写 不影响原字符串 返回一个新字符串
- toUpperCase() 将串中的所有小写转换成大写 不影响原字符串 返回一个新字符串
- replace(str1,str2) 使用str2替换字符串中的str1 返回替换结果 不影响原字符串

字符串对象练习


// 输入一个由字母组成的字符串,统计串中每个字母出现的次数
var str = 'abBSdXbdea';
var lower = new Array(26);// 存放26个小写字母各自出现的次数
var upper = new Array(26);// 存放26个大写字母各自出现的次数
// 初始化两个数组
for(var i=0;i<lower.length;i++){
    lower[i] = 0
    upper[i] = 0
}
for(var k=0;k<str.length;k++){
    if(str.charAt(k)>='a' && str.charAt(k)<='z'){
        lower[str.charCodeAt(k)-97]++
    }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){
        upper[str.charCodeAt(k)-65]++
    }
}
console.log(lower);
console.log(upper);

/* 输入一个十进制整数和一个数制(2、8、16)将该十进制整数转换成
        对应的数值格式输出
            取余法:
               m=15 k=8
               m%k 将余数存放在数组中
        */
        var m = parseInt(prompt('请输入一个整数:'));
        var k = parseInt(prompt('请输入一个数制(2~16)'));
        var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
        var arr = new Array();//存放数制转换的结果
        var i = 0;
        while(m!=0){//对m进行数制转换 将余数放在arr数组里
            arr[i] = m%k;
            m = parseInt(m/k);
            i++;
        }
        var str = '';
        if(k==8){
            str = '0';
        }else if(k==16){
            str = '0x';
        }
        for(var i=arr.length-1;i>=0;i--){
            str += result[arr[i]];
        }
        console.log('转换的结果为:'+str);

值类型和引用类型

值类型包括简单的数据类型,如字符串、数值型、布尔型、undefined和null。引用类型则是复杂数据类型(如对象),变量中保存的是引用的地址。

需要注意的是,引用类型的特点是变量中仅保存一个引用地址。当对变量进行赋值操作时,并不是复制整个对象,而是让两个变量指向同一个对象的引用。

下面对内存中的栈和堆进行分析:栈(stack)会自动分配内存空间并自动释放,简单数据类型存储在栈中。堆(heap)用于动态分配内存,大小不定且不会自动释放,复杂数据类型存储在堆中。

对象

由此可见,存放在堆内存中的对象,变量实际保存的是一个指针,该指针指向另一个位置。通过此指针可以找到堆中存储的对象的属性和值,且每个空间大小不同,需根据具体情况特定分配。

到此这篇关于JavaScript对象、内置对象、值类型和引用类型讲解的文章就介绍到这了,更多相关JavaScript基本对象讲解内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章