美文网首页
#jQuery.isPlainObject方法源码解析

#jQuery.isPlainObject方法源码解析

作者: ConsiceBook | 来源:发表于2016-12-05 10:21 被阅读0次

    jQuery.isPlainObject方法源码解析

    1.简述函数功能:

      --[官方描述](http://www.css88.com/jqapi-1.9/jQuery.isPlainObject/):测试一个对象是否是纯粹对象,但是
      结合代码测试,个人得出该方法是用于判断不存在属性值指向函数原型的对象或者是存在属性指向函数原型但是函数原型必须是
      Object.prototype,请看以下测试代码能够验证:
    
      1).什么是纯粹对象?即是通过{}或者new Object()方式创建的对象;
      
      2).a).noPrototype,ownNoPrototype是不具备属性指向函数原型的对象;
      
         b).literal,hasPrototype,object,ownHasPrototype是具备属性指向Object.prototype的对象;
         
         c).ownObject是具备属性指向自定义函数ownDef原型的对象,
    
         d).ownConObject是constructor是自身属性的对象
         
      3).通过以下输出结果可以断定isPlainObject函数的功能的判断依据与对象使用什么方式创建无关,而是与对象是否没有属
      
      性指向原型,有属性指向函数原型的对象,它的函数原型是否是Object.prototype有关系;
    

    测试代码:

        /*Object.create(null),Object.create(Object.prototype),字面量{},内置Object()
            Object.create内部实现如下:
            // 传入一个对象,作为F函数原型
            function create(object) {
                function F(){}
                F.prototype = object;
                return new F();
            }
        */
        
        var noPrototype = Object.create(null);
        console.log($.isPlainObject(noPrototype)); // true
    
        var literal = {};
        console.log($.isPlainObject(literal)); // true
    
        var hasPrototype = Object.create(Object.prototype);
        console.log($.isPlainObject(hasPrototype)); // true
    
        var object = new Object();
        console.log($.isPlainObject(object)); // true
    
        // 自定义函数创建对象
        function ownDef() {}
        var ownObject = new ownDef();
        console.log($.isPlainObject(ownObject)); // false
    
        ownDef.prototype.isPrototypeOf = '';
        var ownHasPrototype = new ownDef();
        console.log($.isPlainObject(ownHasPrototype)); // false
        
        ownDef.prototype.isPropertyOf = 'xxx';
        var owntransProtoProper = new ownDef();
        console.log($.isPlainObject(owntransProtoProper)); // false
        
        ownDef.prototype = null;
        var ownNoPrototype = new ownDef();
        console.log($.isPlainObject(ownNoPrototype)); // true
        
        ownDef.prototype = Object.prototype;
        var ownHasPrototype = new ownDef();
        console.log($.isPlainObject(ownHasPrototype)); // true
        
        function ownConstructor(){
            this.cunstructor = 'ownConstructor';
        }
        var ownConObject =  new ownConstructor();
        console.log($.isPlainObject(ownConObject)); // true
    
    

    2.源码解析:

      --整体思路:在js可编程区域object可能类型太多种了,比如:window(包含BOM对象),DOM对象,js对象(内置对象,自
      
      定义函数创建对象,字面量,Object.create函数),本函数的流程主要就是如何过滤掉不符合的对象。  
    

    代码片1:

    /* a.!obj过滤了undefined和null;
      b.jQuery.type(obj) !== "object",过滤了不是内置对象创建的对象除了Object()函数创建的;
       c.obj.nodeType,过滤DOM对象,因为每个DOM对象他的NodeType都存在且不为0;
       d.jQuery.isWindow( obj ),过滤掉window对象
    if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
        return false;
    }
    

    代码块2:

    try {
        /* 上一步过滤之后就只剩下自定义函数,new Object()方法,Object.create()方法,三种方式创建的对象; 
        结合以上测试代码的对象流程图片分析:
        
            --流程图可以看出if()中每个条件筛选后的输出:
            
            a.obj.constructor用于筛选出没有constructor的对象一般由是自身没有constructor,并且没有属性指向原型(由
            Object.create(null)创建比如:noPrototype或者其他原型为空得构造函数创建的比如:ownNoPrototype)
            
            b.!core_hasOwn.call(obj, "constructor")用于筛选出有自身constructor属性的对象(一般是对对象的构造函数
            自设置this.constructor = xxx;或者对象添加属性constructor如obj.constructor = xxx;)所以这里可能会出
            现bug,使得原型不是Object.prototype的构造函数创建的对象在这里逃脱进入下面继续执行,个人觉得这个条件去掉才
            能够筛选出需要的对象:没有属性指向原型的对象和有属性指向Object.prototype原型的对象;因为在后面的代码中没有
            对这里逃脱的对象进行有效的处理(不知道jQuery设置这个条件的意义是什么);
    
            c.!core_hasOwn.call(obj.constructor.prototype, "isPrototypeOf"),用于筛选出对象有属性指向
            Object.prototype原型的对象(一般是构造函数原型指向Object.porototype的对象,而原型不是
            Object.prototyp的构造函数通过为原型添加isPrototypeOf属性的对象会逃脱,但是在后面代码块3会被过滤);
        */
        if ( obj.constructor &&
            !core_hasOwn.call(obj, "constructor") &&
            !core_hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
            return false;
        }
    } catch ( e ) {
        // IE8,9 Will throw exceptions on certain host objects #9897 为了兼容IE
        return false;
    }
    
    代码片2过滤流程
    ###代码片3:
    
            /*
                主要为了过滤原型不是Object.prototyp的构造函数通过为原型添加isPrototypeOf属性的对象比如:
                owntransProtoProper对象,由于这种对象我们对他原型设置了对象,所以isPrototypeOf属性是可以枚举的,我
                们只需要判断该对象的原型中是否有可枚举的属性来达到目的,有因为枚举属性总是从自身属性枚举到原型属性,所以
                只需判断对象最后一个可枚举属性不是他原型属性;
            */
            var key;
            // 这里是快速获取最后一个属性
            for ( key in obj ) {}
            return key === undefined || core_hasOwn.call( obj, key );
        },
    

    相关文章

      网友评论

          本文标题:#jQuery.isPlainObject方法源码解析

          本文链接:https://www.haomeiwen.com/subject/psykmttx.html