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 相关文章推荐
javascript创建和存储cookie示例
Jan 07 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
javascript实现简易计算器的代码
May 31 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 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实现读取和编写XML DOM代码
2010/04/07 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[41:54]2018DOTA2亚洲邀请赛 4.1 小组赛A组加赛 TNC vs Liquid
2018/04/03 DOTA
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
微信小程序python用户认证的实现
2019/07/29 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
服务生自我鉴定
2014/01/22 职场文书
生日庆典策划方案
2014/06/02 职场文书
体育节口号
2014/06/19 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
离婚协议书范本2014
2014/10/27 职场文书
财务部岗位职责
2015/02/03 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书