`

jQuery中对象字面量形式判断的原理及实现

阅读更多
//测试Chrome版本  40.0.2214.115 m

//如有错误欢迎指出
//isPlainObject才是重点
//下面的一些方法前面都做了分析
//如有不懂可以看下我以前对这些方法的说明

var toString={}.toString;
var class2type={};
var hasOwn={}.hasOwnProperty;
var isArray=Array.isArray;
var indexOf=[].indexOf;

var each=function(obj,callback){
	var 
		value,
		length=obj.length,
		i=0,
		isArray=isArrayLike(obj);
		//两种情况
		//类数组
		if(isArray){
			for(;i<length;i++){
				//若是返回false,则直接跳出
				value=callback.call(obj,i,obj[i]);
				if(value===false){
					break;
				}
			}
		}else{
			for(i in obj){
				value=callback.call(obj,i,obj[i]);
				if(value===false){
					break;
				}
			}
		}
		return obj;
};

//第二个判断是否像数组一样的对象

var isArrayLike=function(obj){
	var 
		length=obj.length;
		
	//判断为空
	if(obj==null){
		return false;
	}
	
	if(type(obj)==="object" ||typeof(obj)==="function"){
		return false;
	}
	
	return type(obj)==="array" ||length===0 || (length>0 &&(length-1) in obj);
};


//第三个判断类型
var type=function(obj){
	//排除为空的
	if(obj==null){
		return obj+"";
	}
	//做判断,如果是object或者function类型的时候
	//不是执行后面
	return  typeof obj==="object" ||typeof obj==="function"  ? class2type[toString.call(obj)] : typeof obj;
};

each("Boolean Number String Function Array Date RegExp Object Error".split(" "),function(_,name){
	class2type["[object "+name+"]"]=name.toLowerCase();  
});


var isFunction=function(obj){
	return type(obj);
};
var isWindow=function(obj){
	return obj!==null && obj.window===window;
};

//本次重点来了
//字面量对象判断
//判断之前做一个测试,形如 {}
var isPlainObject=function(obj){
	//第一判断,如果不是object类型直接返回false
	//第二判断是否是节点类型
	//第三window
	if(type(obj)!=="object" ||obj.nodeType||isWindow(obj)){
		return false;
	}
	//当是{}或者是new Object() 时为真,这两种是符合的  只有object对象的原型中有这个方法
	if(hasOwn.call(obj.constructor.prototype,"isPrototypeOf")){
		return true;
	}
	
};

console.info(isPlainObject(window));
console.info(isPlainObject({}));
console.info(isPlainObject(new Object()));
console.info(isPlainObject(new Date()));
var d=new Object();
d.namexx='fsafa';
d.xx=function(){};


var c=function(){
	this.namess="xxx";
	this.fas=function(){};
};
//来看下  hasOwn.call(obj.constructor.prototype,"isPrototypeOf") 这句话到底是什么东东
//首先支hasOwnProperty做个说明 hasOwnProperty:
//是用来判断一个对象是否有你给出名称的属性或对象。//
//此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员。
console.info("c "+c.constructor);
console.info("c "+c.constructor.prototype);

console.info("d "+d.constructor);
console.info("d "+d.constructor.prototype);//[object Object] //这个下面才有isPrototypeOf方法

console.info("{} "+{}.constructor);
console.info("{} "+{}.constructor.prototype);//[object Object]

console.log(d);//__proto__: Object -->isPrototypeOf: function isPrototypeOf() { [native code] }
console.log(new c());//__proto__: c --->__proto__: Object   constructor: function ()

 

分享到:
评论

相关推荐

    jQuery实现轮播图及其原理详解

    本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" name="viewport" content="width=device-width,...

    jQuery技术内幕:深入解析jQuery架构设计与实现原理

    资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...

    jQery中类数组判断的实现原理及代码实现

    本文将深入探讨jQuery中类数组判断的实现原理,并通过代码实现来帮助理解这一概念。 首先,我们要明确什么是类数组对象。类数组对象是指拥有一个`length`属性和索引元素,但不完全符合数组特性的对象。它们通常没有...

    JQUERY技术内幕:深入解析QUERY架构设计与实现原理 完整版 共两个包

    深入解析jquery架构设计与实现原理》首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jquery的工作原理有大致的印象;进而通过“构造jquery对象”章节分析了构造函数jquery()的各种用法和内部...

    jQuery技术内幕 深入解析jQuery架构设计与实现原理

    《jquery技术内幕:深入解析jquery架构设计与实现原理》由阿里巴巴资深前端开发工程师撰写,从源代码角度全面而系统地解读了jquery的17个模块的架构设计理念和内部实现原理,旨在帮助读者参透jquery中的实现技巧和...

    使用JQuery实现从JSON对象转换为form提交数据

    要将JSON对象转换为适合表单提交的数据格式,我们需要遍历JSON对象的键值对,构建一个字符串形式的URL编码参数。这可以通过遍历JSON对象并使用`$.param()`函数实现。`$.param()`是jQuery内部用于URL编码参数的方法...

    JQuery高级编程之面向对象.rar

    在jQuery中,我们可以定义一个构造函数来初始化对象,并在其中设置属性和方法。 4. **原型链和继承**: jQuery对象可以通过原型链实现继承,这样可以复用父类的方法和属性。使用`$.extend()`或`Object.create()`可以...

    jQuery实现简单复制json对象和json对象集合操作示例.docx

    在处理 JSON(JavaScript Object Notation)数据时,jQuery 提供了一个方便的方法 `jQuery.extend()` 来实现对象的复制。JSON 是一种轻量级的数据交换格式,常用于在前后端之间传输数据。 在提供的示例中,`jQuery....

    Jquery对象集合

    在JavaScript中,DOM(Document Object Model)元素是网页结构的表示形式,而jQuery对象是对这些DOM元素的封装,提供了一组强大的方法和属性。jQuery对象集合则是一系列jQuery对象的组合,允许我们对一组元素执行...

    jquery对象和dom对象

    **jQuery对象和DOM对象** 在JavaScript中,DOM(Document Object Model)对象是浏览器解析HTML或XML文档后生成的...在实际项目中,灵活运用DOM对象和jQuery对象,可以实现高效且易于维护的网页动态效果和用户交互。

    jQuery获取当前点击的对象元素(实现代码)

    jQuery获取当前点击的对象元素(实现代码) [removed][removed] &lt;/head&gt; &lt;body&gt; 段落1 段落2 段落3 段落4 段落5 [removed] //获取当前点击的对象 $('p').click( function(){ //this表示当前被...

    基于jQuery的对象切换插件,JQuery图片切换

    在jQuery中,可以利用`.show()`, `.hide()`和`.toggle()`等方法实现这一功能。`.show()`用于显示隐藏的元素,`.hide()`则用于隐藏可见元素,`.toggle()`则根据当前状态执行隐藏或显示操作。 ### JQuery图片切换插件...

    jquery判断360浏览器

    在jQuery中,我们可以创建一个扩展方法来实现这一功能: ```javascript // 导入jQuery库 var $ = require('jquery'); // 扩展jQuery对象 $.extend({ is360Browser: function() { var userAgent = navigator....

    jQuery中判断对象是否存在的方法汇总

    在jQuery中,`$("#id")`是一个选择器,它会尝试找到ID为"id"的元素。即使没有找到匹配的元素,这个表达式也会返回一个jQuery对象,只是其长度(length属性)为0。因此,直接将jQuery对象作为条件判断是无法区分元素...

    4、jQuery原理,模拟实现jQuery扩展1

    六、jQuery 的实现原理: 1. 通过 jQuery 原型属性的 `init` 方法来创建对象。`init` 是 jQuery 的构造函数,用于初始化元素集合并返回 jQuery 对象。 2. 对 `init` 方法内 `this` 指向的处理。在 `init` 方法...

    jquery工作原理

    **jQuery工作原理详解** jQuery,一个著名的JavaScript库,自2006年发布以来,以其简洁易用的API和强大的功能赢得了开发者们的广泛喜爱。它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本文将...

    jQuery源码分析-03构造jQuery对象

    它们的主要作用是合并多个对象的属性到一个对象中,从而实现对jQuery对象功能的动态扩展。 - **`jQuery.extend`**:用于扩展jQuery对象的静态方法。 - **`jQuery.fn.extend`**:用于扩展jQuery对象的原型方法。 这...

    jQuery封装插件原理教学 Demo

    1. **命名空间**:在jQuery对象上添加方法,通常使用`$.fn.extend`来实现,这里的`fn`是jQuery对象的别名,`extend`用于扩展函数。 2. **主函数**:这是插件的核心,包含了插件的主要功能。当我们在jQuery对象上调...

    jQuery对象和DOM对象之间相互转换的方法介绍

    在Web开发中,经常需要在jQuery对象和DOM对象之间进行转换,以便可以利用各自对象的方法优势进行高效编程。jQuery对象是包装了DOM对象的类数组对象,它们之间的转换虽然看似简单,但在实际操作中却非常重要。 首先...

    Jquery实现的分页功能

    在Jquery中,我们可以使用HTML和CSS创建分页布局,然后利用Jquery事件监听来响应用户的点击操作,发送Ajax请求获取新的数据。 分页组件的核心功能包括: 1. 计算总页数:根据服务器返回的总数据条数和每页展示的条...

Global site tag (gtag.js) - Google Analytics