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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
关于使用js算总价的问题
Jun 23 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
详解vue-router导航守卫
Jan 19 Javascript
实例分析javascript中的异步
Jun 02 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
Angular短信模板校验代码
Sep 23 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
小程序实现侧滑删除功能
Jun 25 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
程序员编程十条戒律
2009/07/09 PHP
php 常用类整理
2009/12/23 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python异常处理总结
2014/08/15 Python
Python 类的继承实例详解
2017/03/25 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
python3个性签名设计实现代码
2018/06/19 Python
python中嵌套函数的实操步骤
2019/02/27 Python
python顺序执行多个py文件的方法
2019/06/29 Python
pandas中的series数据类型详解
2019/07/06 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
统计员岗位职责
2013/11/14 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
预备党员半年考察意见
2015/06/01 职场文书
实施意见格式范本
2015/06/05 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
i7 6700处理器相当于i5几代
2022/04/19 数码科技