使用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. 【luogu P1606 [USACO07FEB]荷叶塘Lilypad Pond】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1606 这个题..第一问很好想,但是第二问,如果要跑最短路计数的话,零边权的花怎么办? 不如这样想,如果这个点 ...

  2. Web—09-正则表达式

    正则表达式 1.什么是正则表达式: 能让计算机读懂的字符串匹配规则. 2.正则表达式的写法: var re=new RegExp('规则', '可选参数'); var re=/规则/参数; 3.规则中 ...

  3. MySQL架构与引擎初识

    一.MySQL逻辑架构 1.连接层: 最上层是一些客户端和连接服务,所包含的服务并不是MySQL所独有的技术.它们都是服务于C/S程序或者是这些程序所需要的 :连接处理,身份验证,安全性等等. 2.服 ...

  4. vue中点击添加class,双击去掉class

    VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...

  5. JAVA 设计模式之原型模式

    目录 JAVA 设计模式之原型模式 简介 Java实现 1.浅拷贝 2.深拷贝 优缺点说明 1.优点 2.缺点 JAVA 设计模式之原型模式 简介 原型模式是六种创建型设计模式之一,主要应用于创建相同 ...

  6. Redis推荐阅读笔记整理

    Herrt灬凌夜    https://www.cnblogs.com/wuyx/archive/2018/03.html 6. Redis_常用5大数据类型简介 5. redis_安装 4. Red ...

  7. STM32 HAL库学习系列第4篇 定时器TIM----- 开始定时器与PWM输出配置

    基本流程: 1.配置定时器 2.开启定时器 3.动态改变pwm输出,改变值  HAL_TIM_PWM_Start(&htim4, TIM_CHANNEL_1); 函数总结: __HAL_TIM ...

  8. Django模型定义参考

    字段 对字段名称的限制 字段名不能是Python的保留字,否则会导致语法错误 字段名不能有多个连续下划线,否则影响ORM查询操作 Django模型字段类 字段类 说明 AutoField 自增ID字段 ...

  9. Java 多线程 volitile 和 atomic

    Java 多线程 volitile 和 atomic volitile关键字 public class MTester { public static class TestKey{ int x = 0 ...

  10. C语言 编程练习22

    一.题目 1.编一个程序,输入x的值,按下列公式计算并输出y值: 2.已知数A与B,由键盘输入AB的值,交换它们的值,并输出. 3.给一个不多于5位的正整数,要求:一.求它是几位数,二.逆序打印出各位 ...