超越Jquery_01_isPlainObject分析与重构_javascript技巧

isPlainObject是Jquery1.4后提供的新方法,用于判断对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)。

使用isPlainObject
  首先我们来了解一下什么叫'纯粹的对象',简单的理解'纯粹的对象'指的就是由Object构造出来的对象。那哪些对象是由Object构造出来的呢。首当其充的肯定是由new Object()所构造出来的对象,注意:在Object后的括号里可没加任何东西。因为Object是所有'类'的根基,因此它有一些特殊的行为,如当调用new Object(3)的时候,会构造一个Number类型的对象。new Object('')会构造一个String类型的对象。然后以{}这种形式定义的对象也属于'纯粹的对象'。'{}'的实质就是new Object(),只是表现形形式不同。好,让我们来看一段代码:

复制代码 代码如下:

var objStr = new Object('');
alert(objStr.constructor);//String
alert(isPlainObject(objStr));//false
var objNum = new Object(3);
alert(objNum.constructor);//Number
alert(isPlainObject(objNum));//false
function Person(){}
var person = new Person();
alert(isPlainObject(person));//false
var obj01 = new Object();
obj01.name = '笨蛋的座右铭';
alert(isPlainObject(obj01));//true
alert(isPlainObject({name:'笨蛋的座右铭'}));//true

isPlainObject源码分析
以下代码为Jquery中的isPlainObject的完整版本,注释已经很详尽了,我就不多说什么了。

复制代码 代码如下:

var toString = Object.prototype.toString,
hasOwnProperty = Object.prototype.hasOwnProperty;
function isPlainObject( obj ) {
// Must be an Object.
// Because of IE, we also have to check the presence of the constructor property.
//Make sure that DOM nodes and window objects don't pass through, as well
//windows objects:toString.call(window):IE [object Object] FF [object Window] chrome [window global] safari [object DOMWindow]
//DOM nodes:toString.call(#div01):IE [object Object] FF [object Window] chrome [object global] safari [object DOMWindow]
//结论:obj.nodeType || obj.setInterval主要是针对于IE浏览器进行判断
//注:history,location,navigator,screen的setInterval为undefined
if ( !obj || toString.call(obj) !== "[object Object]" || obj.nodeType || obj.setInterval ) {
return false;
}
// Not own constructor property must be Object
// 除去自定义对象和内置对象的判断,如function Person(){} var p = new Person();String,Number
if ( obj.constructor //有constructor属性
&& !hasOwnProperty.call(obj, "constructor") //并且constructor这个属性必须是在原型链中进行定义的
&& !hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf")//并且原型中有isPrototypeOf方法,一般只有Object的原型中才有这个方法
) {
return false;
}
// Own properties are enumerated firstly, so to speed up,
// if last one is own, then all properties are own.
//针对于复杂类结构,如有继承...
/*
//一个简单的测试
function Animal(name){
}
function Person(name,age){
Animal.call(this,name);
this.age =age;
}
var p = new Person('jxl',20);
for(key in p){
alert(hasOwnProperty.call( p, key ))//true , false
}
*/
var key;
for ( key in obj ) {}
return key === undefined || hasOwnProperty.call( obj, key );
}

提出问题
个人感觉这个实现比较复杂,而且有BUG。
简单的BUG,history,location,navigator,screen可以顺序通过 isPlainObject的检测返回true.
来看一个我的解决方案(修改BUG,简化):

复制代码 代码如下:

function isPlainObject(obj){
if(obj&&Object.prototype.toString.call(obj)==="[object Object]"&&obj.constructor===Object &&!hasOwnProperty.call(obj, "constructor")){
var key;
for ( key in obj ) {}
return key === undefined || hasOwnProperty.call( obj, key );
}
return false;
}

还有BUG,而且是一个无解的BUG:

复制代码 代码如下:

function m(){};
m.prototype.constructor=Object; //必杀
obj=new m;
alert(isPlainObject(obj)); //true

再来一个同理的:

复制代码 代码如下:

function m(){};
m.prototype = {};
obj=new m;
alert(isPlainObject(obj)); //true

这个答案是无解的!

解答无解
本以为这个问题很好解决,结果深入后,发现这是一个无解的问题。原因如下:

复制代码 代码如下:

function Person(){};
Person.prototype.constructor=Object;
var person=new Person;

让我们来看一下person现在的状态:

person和其构造函数Person唯一的联系就是其prototype链中的constructor属性。而在我们判断是否为'纯粹的对象'主要是依据对象实例的constructor进行的。如果我们将其指向Object,正如图中看到的那样,那么person和Person在代码上就没有关系了。也正是因为这一点,让类型的判断出现了问题。

时间: 2024-08-03 18:32:11

超越Jquery_01_isPlainObject分析与重构_javascript技巧的相关文章

深入浅析knockout源码分析之订阅_javascript技巧

Knockout.js是什么? Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面.任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护. 一.主类关系图 二.类职责 2.1.observable(普通监控对象类) observable(他其是一个function)的内部实现: 1.首先声

页面装载js及性能分析方法介绍_javascript技巧

一.装载 先装载静态页面的引用js文件,然后查找引用文件中是否包含onload函数,比如main.js中包含onload函数,在main.js中查找是否有对其他js文件的引用,优先装载引用js文件,被引用中文件的装载顺序和main.js的顺序一致. 装载完毕后,开始执行onload函数.由于js执行顺序是顺序执行的,为提高页面相应速度,一般做法是在onload中只画页面,一些事件的绑定函数,ajax方法等可延后书写. 二.响应速度分析 1.借助工具进行分析 各大浏览器的开发者工具(最喜欢使用火狐

Javascript 浮点运算精度问题分析与解决_javascript技巧

分析 JavaScript 只有一种数字类型 Number ,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的. 浮点数的精度问题不是JavaScript特有的,因为有些小数以二进制表示位数是无穷的: 十进制           二进制0.1              0.0001 1001 1001 1001 ...0.2              0.0011 0011 0011 0011 ...0.3              0.0100 1100 1100 1

JavaScript 组件之旅(一)分析和设计_javascript技巧

另一方面,由于 JavaScript 通常会和宿主环境(比如浏览器)紧密结合,因此缺乏功能强大而简单易用的开发工具.在这样的环境中,开发组件或框架成为一项具有挑战的工作.这次,我们将以一个简易的 JavaScript 组件开发为契机,逐步展开组件的分析.设计.实现.构建和测试等任务,探讨组件开发过程涉及的方方面面.这些探讨将分 4 篇陆续张贴出来(链接将在张贴后更新): 分析和设计组件 编码实现和算法 用 Ant 构建组件 测试 JavaScript 组件 现在,假设我们要从头开始设计并实现一个

让浏览器崩溃的12行JS代码(DoS攻击分析及防御)_javascript技巧

Ajax与pjax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新-无刷新操作. 但是,ajax应用也会造成另外的问题,容易导致浏览器无法前进与后退,这是个很头疼的问题,开发人员必须增加工作量(比如通过一个隐藏的iframe,或者改变location.ha

利用a标签自动解析URL分析网址实例_javascript技巧

对于window.location,我们比较熟悉,它有protocol,hostname,host,port,search,hash,href,pathname等属性,a标签也和window.location一样,也有这样属性,这样可以方便我们分析网址,闲话少说,上代码. function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, protocol: a.pro

引用外部js乱码问题分析及解决方案_javascript技巧

在web开发中我们一般都会不可避免的使用js.我们可以将js代码直接放在页面中即通过内部使用js.但是为了给页面良好的"瘦身"我们一般都会将js代码放在外部,然后通过src引用.这个时候我们就需要注意一个问题:编码问题.如果web页面也js采用不同编码,这个时候就会出现乱码.(内部使用js不需要注意编码问题,因为他们采用的是同一种编码) 对于大多数的web页面,我们一般都是使用如下两种编码:UTF-8.GB2312.所以我们只需要同意页面和js编码就可以解决乱码问题: 对于GBK页面引

关闭页面时window.location事件未执行的原因分析及解决方案_javascript技巧

1.问题描述: JS中定义widow.location = function(),页面关闭时,logout()函数未执行. window.onunload = function() { logout(); } function logout(reqParam, callback){ var userManageServiceUrl = "http://" + getServerAddr() + "/axis2/services/UserManageService";

JS 动态获取节点代码innerHTML分析 [IE,FF]_javascript技巧

<div id="parentnode"> <span id="childnode">child</span> </div> <script type="text/javascript"> var childNode = document.getElementById("childnode") , parentNode = document.getElementByI