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 相关文章推荐
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
基于ts的动态接口数据配置的详解
Dec 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图片验证码实例
2014/03/21 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python实现飞机大战小游戏
2019/11/08 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python的链表基础知识点
2020/09/13 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
专科毕业生就业推荐信
2013/11/01 职场文书
架构师岗位职责
2013/11/18 职场文书
给校长的建议书200字
2014/05/16 职场文书
2015年科室工作总结
2015/04/10 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python