使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事。这个开发神器到底能给我们带来哪些更神奇的帮助呢?这几天看的一些资料中给了我启发,能不通过Firebug和chrome-devToolBar发现JS的全局对象的全部属性呢?能不能发现document对象中含有哪些不常用而又需要深刻理解的属性呢?

我们在此开8!

原创博文,转载请标明出处:http://www.cnblogs.com/dereksunok/p/4884460.html

一.浅析for-in语句

for-in循环也被称为“枚举”,用在非数组对象的遍历上,这个语句可以返回对象中的属性或属性对应的值。

从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的。因为如果数组对象已被自定义的功能增强,就可能发生逻辑错误。另外,在for-in中,属性列表的顺序(序列)是不能保证的。所以最好数组使用正常的for循环,对象使用for-in循环。

有个很重要的 hasOwnProperty() 方法,当遍历对象属性的时候可以滤掉从原型链上扩展或继承的属性。

这里来看一个例子:

// 对象
var obj = {
a: 2,
b: 2,
c: 1
}; // 给所有对象扩展了一个方法
if (typeof Object.prototype.other === "undefined") {
Object.prototype.other = function () { };
}

我们现在输入 obj.other,得到的是一个自定义的扩展方法。

二.一个极简单对象的遍历方法

1.案例代码(1)

var num = 0;
for( var myattr in obj){
console.log(myattr);
num++;
}
console.log(num);

在firebug中运行这段代码得到如下结果:

代码解释:

我们在for-in中创建一个名为myattr的变量来枚举出 对象obj中所有的属性。从我们写这段代码的出发点来讲,希望得的是 obj.a,obj.b,obj.c 三个属性,结果却多出一个obj.other,且对象obj有四个属性。这时如果我们提出这样的需求:我只要obj字面上定义的属性,该如何处理呢?

现在我们使用 hasOwnProperty() 方法介入 for-in 循环,看看有什么结果。

2.案例代码(2)

var num = 0;
for( var myattr in obj){
if (obj.hasOwnProperty(myattr)) { // 过滤
console.log(myattr);
}
num++;
}
console.log(num);

这时我们得到了我们想要的结果:

这里我们使用hasOwnProperty() 方法滤掉从原型链上扩展或继承的属性。至于得到的 num = 4这个这个结果,细节请参考 Object.prototype 相关资料。

三.Javascript中内置对象和宿主对象

1.内置对象JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。有如下:

JS 对象 object
JS 数字
JS 字符串
JS 日期
JS 数组
JS 逻辑
JS 算数
JS 正则表达式

2.宿主对象可以理解为window 对象,基于计算机系统或浏览器能够支持的功能,不同的浏览器支持的window对象。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 甚至 HTML DOM 的 document 也是 window 对象的属性之一。有如下

JS Window
JS Screen
JS Location
JS History
JS Navigator
JS PopupAlert
JS Timing
JS Cookies

这里属于概念性的介绍,可以参考 http://www.w3school.com.cn/js/js_objects.asp

四.全新的参考手册:使用Firebug或chrome-devToolBar深入学习javascript语言

再简单的了解了for-in语句和js对象之后,我们自己来整理一点干货!打开浏览器创建一个新标签页,华丽的按下F12键。

1.看代码,window对象里面到底有些啥。

var num = 0;
for(var myproto in window){
num++;
if(window.hasOwnProperty(myproto )){
console.log(myproto);
}
}
console.log(num);

此处注意:chrome浏览器下的结果和firebug下得到的略有不同,但这无伤大雅,毕竟不同浏览器厂商的需求出发点略有区别嘛。

2.再看document下面有哪些方法或属性。这里生成的数据比较多,大家自己可以在本地写写看下。

var num = 0;
for(var myproto in document){
num++;
console.log(myproto);
}
console.log(num);

这里之所以没有使用hasOwnProperty(),因为document下有大量顶层对象继承或扩展来的方法或属性。

3.再看location。

var num = 0;
for(var myproto in location){
num++;
console.log(myproto);
}
console.log(num);

六.小结

我们从for-in说起,再聊到hasOwnProperty()js的对象,通过一些简单的代码就能够轻松获得javascript的“参考手册”。想到这里,再也不愿去看什么JScript.chm这个艹淡的文档了!

当然,如上所述确实有些玩笑之意,但是不得不再给自己一些勉励,书要多看,多练,多想,说不定哪天理想实现了呢?

粮食大米已经分享完毕,大家炖着吃,蒸着吃,随便!

原创博文,转载请标明出处:http://www.cnblogs.com/dereksunok/p/4884460.html

使用Firebug或chrome-devToolBar深入学习javascript语言核心的更多相关文章

  1. 第一章:Javascript语言核心

    本节是javascript语言的一个快速预览,也是本书的第一部分快速预览. 读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书.感谢你们无私的分享,仅以此笔记献给你们 ...

  2. 第一部分 JavaScript语言核心(二)

    第四章 表达式和运算符 P66 运算符优先级,从上到下: p68 属性访问表达式和调用表达式的优先级比运算符优先级都要高,eg: typeof my.functions[x](y) //typeof在 ...

  3. JavaScript语言核心之词法结构

    编程语言的词法结构是一套基础性规则,用来描述如何使用这门语言来编写程序.作为语法的基础,它规定了诸如变量名是什么样的.怎么写注释,以及程序语句之间如何分割的等规则. 1.1字符集 JavaScript ...

  4. 初学者学习javascript语言应注意的那几点

    javascript在书写时应注意得那四点: 1)大小写敏感: 2)javascript是弱类型语言,声明变量是应全部使用var(因为javascript是弱类型语言): 3)字符串在定义时使用单引号 ...

  5. 学习javascript语言精粹的笔记

    1.枚举: 用for in 语句来遍历一个对象中所有的属性名,该枚举过程将会列出所有的属性也包括涵数和方法,如果我们想过滤掉那些不想要的值,最为常用的过滤器为hasOwnProperty方法,以及使用 ...

  6. JavaScript权威设计--JavaScript语言核心(简要学习笔记一)

    1.对象名/值得映射 var book={ top:"a", fat:true }   2.访问对象属性 book.top book["fat"] 3.通过赋值 ...

  7. javascript权威指南笔记--javascript语言核心(四)

    对象: 通过引用(而非值)来操作对象: var obj = {"x":1,"y":2}; var copyObj = obj; copyObj.x = 5; c ...

  8. javascript权威指南笔记--javascript语言核心(三)

    1.var用来声明一个或多个变量.全局变量是全局对象的属性,它无法通过delete删除. 如果var语句中的变量没有指定初始化表达式,那么这个变量的初始值为undefined. 变量声明语句会被提前到 ...

  9. javascript权威指南笔记--javascript语言核心(二)

    1.函数作用域:在函数内声明的所有变量在函数体内始终是可见的.这意味着在变量声明之前甚至已经可用. *“声明提前”:javascript函数里声明的所有变量(但不涉及赋值)都被提前至函数的顶部. fu ...

随机推荐

  1. ubuntu snmp Error: unknown payload OID

    ubuntu snmp Error: unknown payload OID 2013-11-12 15:51:48 标签:ubuntu Error snmp unknown payload OID ...

  2. Java中CSS&JS篇基础笔记

    HTML就是由一组标签所组成的.HTML的字体标签: <font>标签: 属性:color,size,face HTML的排版标签: h标签:标题标签. p标签:段落标签. b标签:加粗标 ...

  3. 并发编程(三)------并发类容器Copy-On-Write容器

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.JDK里的COW容器有两种: CopyOnWriteArrayList CopyOnWriteArraySet CopyOnWri ...

  4. 记一次 oracle 12.2 RAC : Transaction recovery: lock conflict caught and ignored

    节点一 alert日志: PDB(17):Transaction recovery: lock conflict caught and ignored PDB(17):Transaction reco ...

  5. Delphi写的DLL,OCX中多线程一个同步问题

    Delphi写的DLL,OCX中如果使用了TThread.Synchronze(Proc),可能导致线程死锁,原因是无法唤醒EXE中主线程, Synchronze并不会进入EXE主线程消息队列. 下面 ...

  6. ESP8266传送文件设置和操作

    问题:ESP8266不能被识别为USB盘,也不能通过串口传送文件,只能通过wifi传送文件,需要事前在串口连接后的repl状态下,用命令行方式配置网络参数,之后才可以用wifi传送文件(webrepl ...

  7. C语言堆排序

    堆是一种类似二叉树的数据结构,分为最大堆和最小堆,最大堆得定义是当前节点必须大于左右子节点,堆中所有节点都要符合这个定义.最小堆反之.这一点不同于二叉树排序.假设有数组int a[10] = {90, ...

  8. Selenium_python自动化第一个测试案例(代码基本规范)

    发生背景: 最近开始整理Selenium+python自动化测试项目中相关问题,偶然间翻起自己当时学习自动化时候写的脚本,发现我已经快认不出来写的什么鬼流水账了,所以今天特别整理下自动化开发Selen ...

  9. bat脚本,winscp,shell加mysql存储过程实现mysql单条数据迁移

    起因 公司有个任务,需要迁移mysql中的单条数据.从公司的dev环境到staging环境,dev环境的mysql安装在windows server 2012 R2下,stage是aws的服务器不能直 ...

  10. Go实现发送解析GET与POST请求

    参考链接: https://www.jb51.net/article/115693.htm https://www.jb51.net/article/60900.htm https://www.cnb ...