JavaScript原型、定时器与对象分类核心概念解析
本文解析JavaScript中利用原型减少内存占用的机制,阐述属性继承规则。对比setTimeout与setInterval的执行逻辑及代码实现,并梳理本地、内置与宿主对象的定义与区别,最后演示Array.prototype.slice.call的高效用法。
JavaScript原型机制与属性继承
利用原型机制可以显著降低单个对象对内存的消耗,因为多个对象可以共享并继承原型上的属性。
即使属性是在对象实例创建之后才被添加到原型中,已存在的对象依然能够访问并继承这些新增属性。
具体实现示例如下:
代码片段:
<script type="text/javascript">
function print(msg)
{
document.write(msg,'<br/>');
}
function printhr()
{
document.write('<hr/>');
}
print("prototype属性:<br/>"+
"1. 使用原型可以大量减少每个对象对内存的需求量,因为对象可以继承许多属性。<br/>"+
"2. 即使属性在对象被创建之后才被添加至原型中,对象也能够继承这些属性。");
printhr();
function User(name)
{
this.name=name;
}
var zhang = new User('老张');
zhang.favchannel ='hello';
User.prototype.favchannel='CCTV';
Object.prototype.qq ='569723660';
print(zhang.favchannel);
print(zhang.qq);
</script> 程序执行输出结果如下:
prototype属性:
1. 使用原型可以大量减少每个对象对内存的需求量,因为对象可以继承许多属性。
2. 即使属性在对象被创建之后才被添加至原型中,对象也能够继承这些属性。
二.setTimeout和setInterval 两个函数都定义在window对象中。
定时器函数setTimeout与setInterval解析
setTimeout(fun_name,time_minisec)用于在指定毫秒数后执行一次fun_name函数;setInterval(fun_name,time_minisec)则用于每隔time_sec毫秒周期性地执行fun_name函数。
相关功能演示代码如下:
代码片段:
<html>
<head></head>
<body>
<div id="show"></div>
<input type="button" value='' id='btntime'></input>
<script type='text/javascript'>
function print(msg)
{
document.write(msg,'<br/>');
}
var changetime = function()
{
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var sec=d.getSeconds();
var ampm=(h>=12)?'PM':'AM';
if(h>12) h-=12;
if(h==0)h=12;
if(m<10) m='0'+m;
var t=h+':'+m+':'+sec+" "+ampm;
var button = document.getElementById('btntime');
button.value = "setInterval:"+t;
}
changetime();
setInterval("changetime()",1000);
function time_setTimeOut()
{
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var sec=d.getSeconds();
var ampm=(h>=12)?'PM':'AM';
if(h>12) h-=12;
if(h==0)h=12;
if(m<10) m='0'+m;
var t=h+':'+m+':'+sec+" "+ampm;
document.getElementById('show').innerHTML='setTimeout:'+t;
setTimeout('time_setTimeOut()',1000);
}
time_setTimeOut();
</script>
</body>
</html> 三.本地对象,内置对象和宿主对象
本地、内置与宿主对象的分类
1.本地对象包含的内容有 Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError,这些均属于ECMA-262标准定义的引用类型。
2.内置对象:由 ECMAScript 实现提供的、独立于宿主环境的所有对象,在 ECMAScript 程序开始执行时出现(ECMA-262定义), 内置对象只有两个Global 和 Math ,它们都是本地对象。内置对象就是一种特殊的本地对象。
3.宿主对象:所有非本地对象都是宿主对象(host object),即由 ECMAScript 实现的宿主环境提供的对象。
综上所述,本地对象是指官方预定义好的对象;内置对象属于本地对象的一种,仅包含Global和Math两个对象;而宿主对象则指官方未定义、由用户自行构建的对象,以及DOM和BOM对象的集合。
四.Array.prototype.slice.call(_array,begin[,end]) 的使用相当于_array.slice(begin[,end]),不过Array.prototype.slice.call的效率要远远高过第二种用法。
Array.prototype.slice.call高效用法
具体应用示例:
function p(msg)
{
document.write(msg,'<br/>');
}
p(Array.prototype.slice.call([1,2,3,4],2));
p([1,2,3,4].slice(2));
程序运行输出结果:
3,4
3,4
(注:记录这些内容主要是为了便于日后查阅,作为个人知识积累的参考。其中部分内容参考了网络资源,未逐一列出出处,敬请原作者谅解。)
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
