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初学者的编写开发的七个细节
Jan 11 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Python多进程编程技术实例分析
2014/09/16 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python闭包实现计数器的方法
2015/05/05 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python正则表达式实例代码
2020/03/03 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
python中实现栈的三种方法
2020/12/19 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
大四学生思想汇报
2014/01/13 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫