码迷,mamicode.com
首页 > Web开发 > 详细

JS原型+原型链+设计模式

时间:2016-06-02 23:30:50      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

JavaScript是一种基于对象的语言,JavaScript中的所有对象,都具有prototype属性。prototype属性返回对象的所有属性和方法,所有 JavaScript 内部对象都有只读的 prototype 属性,可以向其原型中动态添加属性和方法,但该对象不能被赋予不同的原型。但是自定义的对象可以被赋给新的原型。

对象分为函数对象和普通对象,区分:凡是通过 new Function() 创建的对象都是函数对象,其他的都是普通对象。(Object ,Function 是JS自带的函数对象)

1.原型对象:prototype

 在JS 中,函数对象其中一个属性:原型对象 prototype。普通对象是没有prototype属性,但有__proto__属性。

原型的作用就是给这个类的每一个对象都添加一个统一的方法,在原型中定义的方法和属性都是被所以实例对象所共享。

   例:

      var person = function(name){
         this.name = name
      };
      person.prototype.getName = function(){//通过person.prototype设置函数对象属性
           return this.name; 
      }
      var zxj= new person(‘zhangxiaojie’);
      zxj.getName(); //zhangxiaojie       //zxj继承上属性

2.原型链

 __proto__:js创建对象的内置属性,用于指向创建它的函数对象的原型对象prototype。(是JS内部使用寻找原型链的属性。当实例化一个对象时候,内部会新建一个__proto__属性并把prototype赋值给它)

    下图为原型链运行图解,当我们实例一个对象之后,调用它的内部方法,他的运行顺序是先找自身有没有该方法,如果没有就会通过__proto__属性想上层寻找,一直寻找到Object对象中,如果还没有才会报错null

        p._proto_----->Persion._proto_---->object._proto_----->null

 

3.设计模式

(1)工厂模式:在函数内创建一个对象,给对象赋予属性及方法再将对象返回。

      function Parent(){  
             var  Child = new Object();  
             Child.name="ZXJ";  
             Child.age="24";

      Child.sex=function(){  

             return "女";  
         };   
           return Child;  
      };  
      调用:
      var  x =Parent();  

      alert(x.name);      //ZXJ
      alert(x.sex());       //女

(2)构造函数模式:无需再函数内部重建创建对象,而使用this指代

     function Parent(){  

              var  Child = new Object();  
              this.name="ZXJ";  
              this.age=24";  
              this.lev=lev;  

      Child.sex=function(){  

             return "女";  
          };   
             return Child;  
        };  
        调用:
        var  x = new Parent();  
        alert(x.name);      //ZXJ
        alert(x.sex());       //女

  (3)原型模式:函数中不对属性进行定义,利用prototype属性对属性进行定义,可以让所有对象实例共享它所包含的属性及方法。

    function Parent(){   };  
          Parent.prototype.name="ZXJ";  
          Parent.prototype.age="24";  
          Parent.prototype.sex=function(){

        var s="女";

        alert(s);

      };  
    

     调用:
        var  x =new  Parent();  
        alert(x.name);      //ZXJ
           alert(x.sex());       //女

 

  (4)混合模式:原型模式+构造函数模式。这种模式中,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性。

     function Parent(){  
          this.name="ZXJ";  
          this.age=24;  
      };
      Parent.prototype.sayname=function(){  
         return this.name;  
      };
      调用:
      var  x =new  Parent(); 
      alert(x.sayname());   //ZXJ  

 

  (5)动态原型模式:将所有信息封装在了构造函数中,而通过构造函数中初始化原型,这个可以通过判断该方法是否有效而选择是否需要初始化原型。

 

    function Parent(){  
        this.name="ZXJ";  
        this.age=24;  
       if(typeof Parent._sayname=="undefined"){     
           Parent.prototype.sayname=function(){  
                   return this.name;  
           }  
            Parent._sayname=true;  
        }  
         
      };   
     调用: 
    var  x =new  Parent();  
    alert(x.sayname());  

 

JS原型+原型链+设计模式

标签:

原文地址:http://www.cnblogs.com/echo3621/p/5551712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!