原型和原型链

↘锁芯ラ 提交于 2020-03-11 16:31:05

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

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

           var Fn=function(){
          //【注意】用this定义出来的属性和方法是在prototype里的
         this.a=10;
         this.add=function(){
             console.log('add');
         }
       }
            //给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);//此方法无法检查该对象的原型链中是否具有该属性,该属性必须是对象本身的一个成员 
                }
            }

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!