使用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. HDU 1829 A Bug's Life (种类并查集)

    传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1829 A Bug's Life Time Limit: 15000/5000 MS (Java/Oth ...

  2. Centos 7下Nagios的安装及配置

    简介 Nagios 是一款自动化运维工具,可以协助运维人员监控服务器的运行状况,并且拥有报警功能.本文章将介绍其安装方法和详细的配置方法. nagios 监控服务应用指南 本地资源:负载,CPU,磁盘 ...

  3. 【CSS-移动端响应式布局详解】

    背景 移动端响应式布局开发主要方案有: 基于rem开发 基于媒体查询 基于弹性盒 基础概念 在讨论响应式布局知识前,先了解下移动端常用基础概念. 逻辑像素(CSS pixels) 浏览器使用的抽象单位 ...

  4. 原生js创建模态框

    1.效果图如下: 2.代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. 搭建Java的运行和开发环境

    Java最大的优势就是跨平台,即编译一次,就能在linux.windows和mac等平台运行,无需再次编译.而典型的C和C++ 则是源代码跨平台,需要根据不同平台的编译规范来进行编译. Java如何跨 ...

  6. vue axios拦截器的封装

    // request.js import axios from 'axios' import qs from 'qs' // 创建axios实例 const service = axios.creat ...

  7. PyAutoGui 中遇到的KeyError : DISPLAY

    实际情形有可能是: tests/test_enlighten.py:: in <module> import re, sys, signal, logging, argparse, pya ...

  8. 用Python批量下载DACC的MODIS数据

    本人初次尝试用Python批量下载DACC的MODIS数据,记下步骤,提醒自己,数据还在下载,成功是否未知,等待结果中...... 若有大佬发现步骤有不对之处,望指出,不胜感激. 1.下载Python ...

  9. Jquery 批量操作标签属性

     $("[id*='Custom']").removeAttr("disabled")

  10. CTF-安恒18年十二月月赛部分writeup

    CTF-安恒十二月月赛部分writeup 这次题目都比较简单蛤,连我这菜鸡都能做几道. WEB1-ezweb2 打开网站,啥也没有,审计源代码,还是啥都没有,也没什么功能菜单,扫了一下目录,扫到了ad ...