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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
Apr 27 Javascript
js实现随机点名程序
Sep 17 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
《大海那边》教学反思
2014/04/09 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书