js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1

1. 前言

这两天看了一下TOM大叔的《深入理解js系列》中的基础部分,根据自己的实际情况,做了读书笔记,记录了部分容易绊脚的问题。写篇文章,供大家分享。

2. 关于HTMLCollection的“实时查询”

var divs = document.getElementsByTagName("div"),
      i;
for (i = 0; i < divs.length; i++) {
      //……
}

以上代码中,会出现性能问题。问题就在于divs是一个HTMLCollection类型的对象,这种类型在每次获取数据时,都会再重新从dom中分析计算。因此,这里的for循环中,每一步循环都会执行一次divs.length的计算,都会令浏览器再重新遍历一遍dom树。
所以,应该在循环之外,早早的计算出divs的length属性值。如下:

var divs = document.getElementsByTagName("div"),
    i,
    length = divs.length;
for (i = 0; i < length; i++) {
    //……
}

3.  for..in...时,注意hasOwnProperty验证

var obj = {
                a: 10,
                b: 20
            };

            // 注意词句代码
            Object.prototype.c = 30;

            var item;
            for (item in obj) {
                console.log(item);
            }

以上代码中,注意中间标注释的句子。这句代码加与不加,会对下面的for..in..循环产生影响。加上了就输出“c”,不加就不输出“c”。道理很简单,for..in..循环不光能遍历obj对象本身就有的属性,还能遍历obj原型中的属性。

要想屏蔽掉原型中的属性,就用hasOwnProperty函数,如下:

           for (item in obj) {
                if (obj.hasOwnProperty(item)) {
                //if (Object.prototype.hasOwnProperty.call(obj, item)) {
                    console.log(item);
                }
            }

这两句if判断语句,都可以用,效果是一样的。第一个代码可读性好,第二个效率相对较高。建议,没有特殊情况,用第一个即可。

4. 老问题:循环中生成函数/事件的闭包问题

var events = [],
                i = 0;
        //循环创建函数
        for (; i < 10; i++) {
            events[i] = function () {
                console.log(i);
            };
        }

        //验证结果
        for (i = 0; i < events.length; i++) {
            events[0]();
        }

先看以上代码,有js开发经验的人肯定都很熟悉,但是有的人知道,有的人不知道。依照以上代码,循环遍历events数组,执行数组元素中的函数,这10个函数都会打印出什么数字?答案是:全都会输出“10”。下面解释一下原因:

在每个函数生成/被创建时,系统都会给它分配一个变量的环境,这个环境中也包括闭包的数据。但是,当多个环境,公用一个闭包的数据时,是一种引用的关系,这是重点。引用,不是复制。如果改变了这个公用数据,这些公用的环境获取时,也是改变后的数据。

所以,在创建第一个函数时,i === 0,第一个函数引用的闭包中i的值就是0;第二个函数被创建时,i === 1,这是,第一个、第二个两个函数应用闭包中i的值,都是1。以此类推,直到第十个函数创建时,i === 9;但是在for循环的最后一步,又执行了 i++;所以i === 10。

明白了吗?

想要改变这个问题,想要每个函数都输出不同的数值,那就需要不让每个函数都公用一个闭包——让每个函数使用单独的闭包数据,不共享。只需讲for循环创建函数的部分修改为:

//循环创建函数
        for (; i < 10; i++) {
            events[i] = (function (index) {
                return function (index) {
                    console.log(index);
                }
            })(i);
        }

此时,i作为参数,传入匿名自动执行函数,赋值给index参数。这个匿名函数的变量环境,就把index保存了下来,而不会随着i的变化而变化。这就是要点。

时间: 2024-10-06 01:14:46

js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1的相关文章

js便签笔记(12)——浏览TOM大叔博客的学习笔记 part2

1. 前言 昨天写了<js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1>,简单记录了几个问题.part1的重点还是在于最后那个循环创建函数的问题,也就是多个子函数公用一个闭包数据的问题.如果觉得有兴趣,可以再重新翻出来看看. 今天继续把剩下的问题写完. 2. 作用域链 学js的人,即使初级入门的也都知道“原型链”,但是“作用域链”,可能好多人没有听说过.大部分人都知道或者听说过“闭包”,但是可能有好多人不知道闭包其实和作用域链有莫大的联系.如果理解闭包不从作用域链开始理解,那么

javascript - 浏览TOM大叔博客的学习笔记

part1 --------------------------------------------------------------------------------------------------------- 1. 前言 这两天看了一下TOM大叔的<深入理解js系列>中的基础部分,根据自己的实际情况,做了读书笔记,记录了部分容易绊脚的问题.写篇文章,供大家分享. 2. 关于HTMLCollection的"实时查询" var divs = document.ge

开通博客园学习笔记博客

开通日期:2015年6月30日 域名:http://www.cnblogs.com/500k/ 内容:学习asp.net的笔记.心得.源码 目标:希望能坚持写下去……记下去……看下去……玩儿下去…… 总结:今天就这么多了……

大神博客【学习笔记】

深入浅出Android:http://blog.csdn.net/mr_raptor/article/details/7946254 老罗Android:http://blog.csdn.net/luoshengyang

js便签笔记(8)——js加载XML字符串或文件

1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("GET", "data.xml", false); xhr.send(null); var xmlDoc = xhr.responseXML; console.log(xmlDoc

js便签笔记(9)——解读jquery源码时记录的一些知识点

近来一直利用业余时间在看jquery2.1.1源码,大约看了两千行了.平时看的时候,做了一些笔记,贴出来分享. 1. Array.prototype.slice.call 可以将伪数组转化为真正的数组 其实,这里所谓的"伪数组"就是有length属性,并且有"0"."1"."2"等这些属性的对象,如下代码: var obj = { 0: "A", 1: "B", 2: "C&q

js便签笔记(10) - 分享:json2.js源码解读笔记

1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转换成字符串.以及转换成怎样的字符串——序列化 —— JSON.stringify 接口: 以及如何将一个有效字符串转换成js对象——反序列化—— JSON.parse 接口: 2. 关于作者 json作者是 道格拉斯.克劳福德 ,是一位js大牛,写过一本<javascript语言精粹>,相信不少朋

安卓开发笔记——打造属于自己的博客园APP(二)

在上一篇文章<安卓开发笔记——打造属于自己的博客园APP(一)>中,我们基本上实现了博客园的主体UI框架(后面可能会有些小变化,等遇到了再说).今天来讲讲博客园首页模块的大体实现,国际惯例,先来看下效果图: 整体UI效果: 下拉刷新和上拉加载的动画效果: 在上篇文章中,我们定义的Tabs主题文字分别是(首页,精华,候选,推荐),这边的命名我是根据博客园网站首页的栏目来命名的,那时候我还没仔细看过博客园的开放接口,后来才发现原来博客园没有对应开放这些栏目的接口,博客园只开放了(文章列表,48小时

写jQuery和直接写JS的区别(转自馒头的博客)

jQuery能大大简化Javascript程序的编写,我最近花时间了解了一下jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助. 要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如: <script language="javascript" src="/js/jquery.min.js"></script> 库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,