使用Firebug或chrome-devToolBar深入学习javascript语言核心
使用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。
转载于:https://www.cnblogs.com/dereksunok/p/4884460.html
使用Firebug或chrome-devToolBar深入学习javascript语言核心相关推荐
- 学习javascript语言精粹的笔记
1.枚举: 用for in 语句来遍历一个对象中所有的属性名,该枚举过程将会列出所有的属性也包括涵数和方法,如果我们想过滤掉那些不想要的值,最为常用的过滤器为hasOwnProperty方法,以及使用 ...
- JavaScript语言核心
Js语言的主要参考资料,以后在遇到JavaScript的难点时,回来查阅. 1.词法结构 2.类型.值和变量 3.运算符 4.语句 5.对象 6.数组 7.函数 8.类和模块 9.正则表达式的模式匹配 ...
- JavaScript语言核心(五)-- 异步 async/await
迭代器 生成器 对应Python的协程 .go语言的 流程控制 转载于:https://www.cnblogs.com/rhinoxy/p/8024017.html
- JavaScript语言基础(一)
1.通过学习JavaScript语言基础,我们应该了解关键字与标识符.掌握JavaScript常用的数据类型.熟悉常量与变量.熟悉运算符和表达式. JavaScript语言基础知识框架如下图所示: 此 ...
- [译]通过使用Chrome的开发者工具来学习JavaScript
原文:https://gist.github.com/4158604 本文作者是Peter Rybin,Chrome开发者工具团队成员. 本文中,我们将通过使用Chrome的开发者工具,来学习Java ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
- 如何正确学习JavaScript
既然你找到这篇文章来,说明你是真心想学好JavaScript的.你没有想错,当今如果要开发现代网站或web应用(包括互联网创业),都要学会JavaScript.而面对泛滥的JavaScript在线学习 ...
- 「译」如何正确学习JavaScript
原文地址: http://www.crimx.com/2014/05/15/how-to-learn-javascript-properly 原文:How to Learn JavaScript Pr ...
- 学习 JavaScript (四)核心概念:操作符
JavaScript 的核心概念主要由语法.变量.数据类型.操作符.语句.函数组成,前面三个上一篇文章已经讲解完了.后面三个内容超级多,这篇文章主要讲解的是操作符. 操作符 什么叫做操作符? 这是一种 ...
最新文章
- 0、Spring 注解驱动开发
- 伍冬睿教授:脑机接口中迁移学习的完整流程
- UA STAT675 统计计算I 随机数生成7 Envelope Accept-Reject Algorithm
- Deeplearnng.AI第四部分第二周、经典网络
- php 取url根域名,php中取得URL的根域名的代码
- 基于HTML5的网络拓扑图 - 设备状态面板
- visualmap超过范围改变颜色_换种颜色,换种心情——车身改色
- joson返回数据库的时间格式在前台用js转换
- python定期自动运行_令人惊叹的8个Python新手工具
- python病毒攻击代码_用python写的简单病毒(无害) -
- 2021-08-21Verilog三段式状态机的写法,标准示例和仿真。
- 10/9 直播预告|半只土豆老师来啦
- 删除IBM常见软件进程释放系统资源
- 网页导出Word几种方法简介
- 用c语言编程英雄联盟,用C语言编写购置英雄联盟中的物品的过程
- 批量重命名文件夹和文件名bat脚本
- 笔记本插拔电源屏闪问题
- HDU 6438 Buy and Resell【贪心】
- 贵州2021高考成绩排名查询,贵州高考排名查询方法,2021年贵州高考成绩位次全省排名查询...
- Luckysheet的使用
热门文章
- 运维软件PE工具箱下载附制作、安装教程
- python spider 安装_Python爬虫(11):Scrapy框架的安装和基本使用
- m1mac安装linux,M1 Mac 能安装 Ubuntu 和 Linux 了 ??
- python日历下拉框_Python版的农历日历Calendar,功能简单
- 凯盛机器人_机器人登场!水泥发运告别人工,粉尘危害降至最低
- 多布局怎么搭建_小展位大吸引力,如何设计搭建出精致的展台?
- CentOS 7配置LNMP开发环境及配置文件管理详解
- 细说Android 4.0 NDK编程pdf
- Omi框架学习之旅 - 生命周期 及原理说明
- Jquery_改变背景颜色