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 要点归纳(一) jQuery选择器
Mar 21 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
js和php如何获取当前url的内容
Sep 22 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 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中遍历stdclass object的实现代码
2011/06/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
js格式化时间小结
2014/11/03 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
jQuery事件对象总结
2016/10/17 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python连接mysql实例分享
2016/10/09 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Django中多种重定向方法使用详解
2019/07/17 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
DTD的含义以及作用
2014/01/26 面试题
十佳护士获奖感言
2014/02/18 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
年终总结会议主持词
2014/03/17 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书