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全局变量var与不var的区别深入解析
Dec 09 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
js获取微信版本号的方法
May 12 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP插入排序实现代码
2013/04/04 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
PHP函数超时处理方法
2016/02/14 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
jQuery中:has选择器用法实例
2014/12/30 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
Final类有什么特点
2012/04/25 面试题
给老婆的搞笑检讨书
2014/01/12 职场文书
客户接待方案
2014/02/26 职场文书
春节超市活动方案
2014/08/14 职场文书
捐助倡议书
2015/01/19 职场文书
《正比例》教学反思
2016/02/23 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS