深入理解JavaScript中Function与Object的关系及DOM加载时机

Function与Object的关系解析

Function是JavaScript中最基础的概念之一，它既是初学者最容易上手的特性，也是语言中最为复杂、难以完全掌握的核心机制。

本文将尝试厘清Function与Object之间的内在联系，因为许多开发者在初期容易对此产生困惑，包括作者本人在初学阶段也曾对此感到不解。

首先需要明确官方定义：在JavaScript规范中，每一个函数本质上都是一个函数对象。

为了直观理解，我们先观察两组最基础的代码示例。

function fn(){}
var obj = {}
console.log(fn instanceof Function)//true
console.log(obj instanceof Object)//true
console.log(fn instanceof Object)//true
console.log(obj instanceof Function)//false

前两组打印结果符合常规认知。值得注意的是，fn instanceof Object的结果为true。这源于JavaScript的定义：所有函数实际上都是对象，因此该判断为true并不意外；而obj instanceof Function为false，因为obj是普通对象而非函数。

接着观察另一段代码示例。

console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

这段代码运行结果两个判断均为true。从函数定义的角度看，JavaScript中函数本身也是对象，因此第一个判断为true；那么第二个判断为何也为true？这引出了对象与函数的深层关系。

Object本身也是一个函数。这是因为Object的内部实现结构为function Object(){native code}。

这种结构清晰地表明Object是一个被声明的函数，因此它既是对象也是函数，两个判断均为true也就顺理成章。

Function和Object这两个函数的具体实现代码存在差异。至于其底层实现细节，通常涉及浏览器引擎的相关机制，此处不作深入探讨，有兴趣者可查阅浏览器内核相关知识。

DOM Ready与onload的执行时机对比

ps：$(function(){})和$(document).ready(function(){})

document.ready和onload的区别——JavaScript文档加载完成事件

页面加载完成涉及两种不同的事件机制。

一是ready事件，表示文档结构（DOM树）已经加载完成，但不包含图片等非文字媒体文件。

二是onload事件，指示页面中包含图片等文件在内的所有元素均已加载完成。

许多jQuery使用者在编写脚本时习惯采用以下写法：

$(function(){
// do something
});

这实际上是jQuery中ready()方法的简写形式，它等价于：

$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})

该方法对应DOM Ready机制，其核心意义在于：在DOM结构加载完成后即可对DOM进行操作，无需等待其他资源。

通常情况下，页面响应加载的顺序依次为：域名解析、加载HTML、加载JS和CSS文件、最后加载图片等其他信息。

因此，Dom Ready的执行时机应位于“加载JS和CSS”之后、“加载图片等其他信息”之前，此时即可安全操作DOM。

1.window.onload方法

⑴执行时机:

该事件在网页中所有元素（包括元素的所有关联文件，如图片、样式表等）完全加载到浏览器后才执行。此时，JavaScript可以访问网页中的所有元素。

window.onload=function(){ $(window).load(function(){
//编写代码 等价于 //编写代码
} });

⑵多次使用:

JavaScript的onload事件机制存在限制，一次只能保存对一个函数的引用。如果多次赋值，后面的函数会覆盖前面的函数，导致前面的函数无法执行。

function one()
{ alert("one");
} 
function two()
{ alert("two"); 
}
window.onload=one; 
window.onload=two; //运行代码后只有 two 

2.$(document).ready()方法

⑴执行时机: 在DOM完全就绪时即可调用。这并不意味着这些元素关联的外部文件（如图片）都已经下载完毕。

例如：$(document).ready()方法明确表明，只要DOM就绪即可进行操作，无需等待所有图片下载完毕。

⑵多次使用:

function one(){ alert("one"); 
} 
function two(){ alert("two"); 
} $(document).ready(function()
{ one(); }); 
$(document).ready(function()
{ two(); 
}); //运行代码后 //先是：one //先是：two