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

Posted 2020-07-19

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());