zepto.1.1.6.js源码中的each方法学习笔记

each方法接受要遍历的对象和对应的回调函数作为参数,它的作用是:
1、如果要遍历的对象是类似数组的形式(以该对象的length属性值的类型是否为number类型来判断),那么就把以要遍历的对象为执行环境,将回调函数放到该执行环境中去循环执行length次;
2、如果要遍历的对象不类似数组,那么用for key in obj 的方法循环执行回调函数key次,同样以要遍历的对象为执行环境,将回调函数放到该执行环境中去循环执行。

function each(elements, callback){
//定义each的回调函数的参数
var i, key
//如果elements参数的length是一个number类型,可能是数组、字符串、arguments对象等
if (typeof elements.length == "number") {
for (i = 0; i < elements.length; i++)
//call(thisObj,arg1,arg2,....); 第一个参数是执行环境对象,后面都是传递的数据
//如果回调函数在elements[i]这个执行环境中,使用i和elements[i]这两个参数执行的结果为null、undefined,那么将elements原样返回
if (callback.call(elements[i], i, elements[i]) === false) return elements
} else {
for (key in elements)
if (callback.call(elements[key], key, elements[key]) === false) return elements
}

return elements
};

用法很简单,就不举例子了。

因为正在学习this,所以我想知道在回调函数里面输出this是怎么个情况,于是我这样玩了一下:

var o = {"a":"sdfsdf","s":3};
each(o,function(i,ele){
console.log(this);

});

在谷歌浏览器的console.log控制台居然是得到这样的结果:String {0: "s", 1: "d", 2: "f", 3: "s", 4: "d", 5: "f", length: 6, [[PrimitiveValue]]: "sdfsdf"}
这是因为回调函数的执行环境是elements[key],在本例中也就是o[a],而第一次遍历传入的参数也就成了o[a],而o[a]的值是一个字符串"sdfsdf",那么this很自然就指向了这个字符串对象
将字符串在console控制台作为一个对象输出时,自然就得到对象的属性树,但是如果是在html页面中使用document.write输出,那就会得到这个字符串的值;
以下例子可以证明:

function test(){
  console.log(this);
}

var str = "sdfsdfsdf";

test.call(str);
//在控制台得到:String {0: "s", 1: "d", 2: "f", 3: "s", 4: "d", 5: "f", 6: "s", 7: "d", 8: "f", length: 9, [[PrimitiveValue]]: "sdfsdfsdf"}
//在html页面中输出得到字符串的值:sdfsdfsdf
时间: 04-06

zepto.1.1.6.js源码中的each方法学习笔记的相关文章

为什么android源码中有的public方法,在官网会查不到并且我们也用不了?

比如,看这个: 在android开发官网上搜是搜不到这个方法的,我们也调用不了,为什么呢?这是因为我们只能调用到android Framework层给我们提供的api,而这个方法框架层不开放调用,所以自然我们就调用不到了.不过,我们可以通过反射的方式间接调用此类方法(详细见我上一篇博客). 附在线看android源代码网址:http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android

MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码里,只要你踏下心去看,一切就都有了! Knockout.Validation.js是为Knockout插件服务的,它可以为Knockout对象进行验证,就像你使用MVC模型验证 一样,而这种绑定的验证方式对于开发人员来说是很容易接受的,也是一种趋势,它在验证过程中,会将出现异常的点记录下来,然后在

jQuery源码中的Ajax--load方法

load()方法是jQuery中最为简单和常用的方法,能载入远程HTML代码幷插入到DOM中,其结构为: load(url [.data] [.callback]) 各参数解释如下: 参数名称 类型 说明 url String 请求HTML页面的URL地址 data(可选) Object 发送至服务器的key/value数据 callback(可选) Function 请求完成时的回调函数,无论请求成功或失败 load的源码如下:(源码目录:jquery/src/ajax/load.js) de

zepto源码--几个判断函数--学习笔记

几个需要经常用到的类型判断: 自定义一个类似于typeof的函数,提供更多的类型判断. 如果传入的参数为null,则类型返回'null',基本上可以返回各种常用对象类型,如'function', 'array','regexp'--而不是统一返回object. 判断是否为函数类型: 判断是不是window对象: 判断是不是document对象: 判断是否为object对象: 判断是否为{}对象: 判断是否为类数组:arguments就属于类数组,或者$('div')这种,可以用下标读取,看起来像

Go语言源码中Replacer查找部份的笔记

用过strings.NewReplacer,replacer.Replace(),它按对传入参数后,能依优先级替换,并能处理中文字符串参数. 觉得功能强大,特别好用.对它的查找和优先级怎么处理有点兴趣,花时间研究了下源码,在这记录一下个人理解. package main //author:xcl //2014-1-20 记录 import ( "fmt" "strings" ) func main(){ patterns := []string{ "y&q

Java源码之 java.util.concurrent 学习笔记01

准备花点时间看看 java.util.concurrent这个包的源代码,来提高自己对Java的认识,努力~~~ 参阅了@梧留柒的博客!边看源码,边通过前辈的博客学习! 包下的代码结构分类: 1.java.util.concurrent.atomic,正如它的英文意思一样,是一个线程安全.原子操作相关的包 另一个专门为线程安全设计的Java包,包含多个原子操作类.这个包里面提供了一组原子变量类.其基本的特性就是在多线程环境下,当有多个线程同时执行这些类的实例包含的方法时,具有排他性,即当某个线程

JS和JQuery中的事件委托 学习笔记

事件委托其实并不是一个很高级的技巧,比如在一个页面里面,当只存在两个按钮的时候,可能你给按钮添加监听是这样的:(本文不考虑浏览器兼容性,关于事件的兼容性可参考前面的学习笔记) <div id="container"> <button id="btn1">按钮1</button> <button id="btn2">按钮2</button> </div> var btn1 =

分享:json2.js源码解读笔记

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

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

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