原型和原型链

Posted 2021-01-07 pfcan66

1:参照此文理解js的静态方法与实例方法 https://www.cnblogs.com/faithZZZ/p/7045323.html

以下是我结合jquery设计的原理的一些理解

            var Fn=function(){}
            //给Fn添加静态属性和方法，这些静态属性和方法只有Fn才能引用到
            //jquery的$就是一个类似Fn的方法，$.trim()就是$的一个静态方法。
            Fn.age=18;
            Fn.trim=function(){
                console.log(‘trim‘);
            }
            console.log(Fn.trim);
            //给Fn添加实例属性和方法，这些实例的属性和方法只有实例出来的对象(new出来的对象)才有
            //jquery中的addClass也是这样添加的，$(‘span‘) 调用$方法，传参‘span‘会返回一个实例对象出来
            Fn.prototype.name=‘penny‘;
            Fn.prototype.addClass=function(){
                console.log(‘addClass‘);
            }
            var f1=new Fn();
            console.log(f1.addClass);

2:原型链，hasOwnProperty                https://blog.csdn.net/SalmonellaVaccine/article/details/52456066   

hasOwnProperty与isPrototypeOf        https://www.cnblogs.com/jenry/archive/2010/12/08/1900150.html

　　　　　　  var Foo=function(){}
            var f1=new Foo();
            f1.a=10;
            Foo.prototype.a=100;
            Foo.prototype.b=200;
            console.log(f1.a);//10
            console.log(f1.b);//200
            //以上代码中，f1是Foo函数new出来的对象，f1.a是f1对象的基本属性，f1.b是怎么来的呢？
            //——从Foo.prototype得来，因为f1.__proto__指向的是Foo.prototype
            //访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着__proto__这条链向上找，这就是原型链。

            //那么我们在实际应用中如何区分一个属性到底是基本的还是从原型中找到的呢？
            //hasOwnProperty，特别是在for…in…循环中，一定要注意。
            for(var item in f1){
                if(f1.hasOwnProperty(item)){//这里只输出了a,hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象
                    console.log(item);//此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员 
                }
            }