JavaScript中Function函数与Object对象的关系


Posted in Javascript onDecember 17, 2015

Function是javascript里最常用的一个概念,javascript里的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,当然不奇怪了.因为他是一个对象,不是函数.

我们再来看一个代码

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

代码很简单.运行结构两个都是为true,为什么呢? 第一个用函数的定义来说,(javascript中函数实际也是一个函数对象),当然为true,那第二个呢?对象也是函数?

Object也是函数.因为Object的结构是function Object(){native code}.

这种形式,很清晰的就是声明的一个Object函数,当然就是函数了,所以两个都是为true.

他们两个Function和Object函数实现代码,那当然是不一样了.他们是怎么实现的,那我们就不去详细琢磨了,如果想琢磨的,就可以了解浏览器的相关知识了.

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

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

页面加载完成有两种事件

一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)

二是onload,指示页面包含图片等文件在内的所有元素都加载完成。

用jQ的人很多人都是这么开始写脚本的:

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

其实这个就是jq ready()的简写,他等价于:

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

这个就是jq ready()的方法就是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
Javascript 相关文章推荐
jquery+json实现的搜索加分页效果
Mar 31 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
浅谈Javascript数据属性与访问器属性
Jul 26 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JavaScript函数基础详解
Feb 03 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
详解webpack loader和plugin编写
Oct 12 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
jQuery实现进度条效果代码
Dec 17 #Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 #Javascript
javascript日期格式化方法小结
Dec 17 #Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 #Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 #Javascript
详解js图片轮播效果实现原理
Dec 17 #Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 #Javascript
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
浅谈php的优缺点
2015/07/14 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
Three.js基础部分学习
2017/01/08 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python中实现k-means聚类算法详解
2017/11/11 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
村级四风对照检查材料
2014/08/24 职场文书
会计工作总结范文2014
2014/12/23 职场文书
项目建议书
2015/02/04 职场文书
决心书格式范文
2015/09/23 职场文书
技术转让协议书
2016/03/19 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python