Javascript-Object-Definition

  1 /* 定义对象的方法：构造函数，函数字面量法，工厂模式，构造函数模式 */
  2 
  3     /**************************************/
  4     /**                                  **/
  5     /**         1.原生构造函数法         **/
  6     /**                                  **/
  7     /**************************************/
  8 
  9     //只能创建特定的对象，使用原生的构造函数，比如：Object，Array。
 10     var prince = new Object();
 11     prince.name = "Prince";
 12     prince.age = 25;
 13     prince.job = "Front End Engineer";
 14     prince.sayJob = function(){
 15         alert(prince.job);
 16     };
 17     var xiaobao = new Object();
 18     xiaobao.name = "Zhibao Hu";
 19     xiaobao.age = 25;
 20     xiaobao.job = "SEO";
 21     xiaobao.sayJob = function(){
 22         alert(xiaobao.job);
 23     };
 24     prince.sayJob();
 25     xiaobao.sayJob();
 26 
 27     /**************************************/
 28     /**                                  **/
 29     /**           2.字面量法             **/
 30     /**                                  **/
 31     /**************************************/
 32 
 33     //javascript对象中实行名称可以加双引号，单引号，或者不加，但是json数据一定要用双引号，不加引号或者用单引号都会出错。
 34     var xiaoyin = {
 35         name : "Chaohuan Yin",
 36         age : 24,
 37         job : "Wireless Yunyin",
 38         sayAge : function(){
 39             //这里如果省略了this就会出错。
 40             alert(this.age);
 41         }
 42     };
 43     xiaoyin.sayAge();
 44 
 45     //以上两种方法的缺点：使用一个接口创建很多对象，代码重复很多。
 46     //为了解决这个问题，人们开始使用工厂模式和他的变体
 47 
 48     /**************************************/
 49     /**                                  **/
 50     /**           3.工厂模式             **/
 51     /**                                  **/
 52     /**************************************/
 53 
 54     //用函数来封装以特定接口创建对象的细节
 55     function createPerson(name,age,job){
 56         var o = new Object();
 57         o.name = name;
 58         o.age = age;
 59         o.job = job;
 60         o.sayAge = function(){
 61             alert(this.age);
 62         };
 63         return o;
 64     }
 65     var tangtang = createPerson("Jin Shi",23,"Shop Yunyin");
 66     tangtang.sayAge();
 67     //工厂模式没有办法知道一个对象的类型，所以出现了构造函数模式，自己定义构造函数
 68 
 69     /**************************************/
 70     /**                                  **/
 71     /**        4.自定义构造函数法        **/
 72     /**                                  **/
 73     /**************************************/
 74 
 75     function Person(name,age,job){
 76         this.name = name;
 77         this.age = age;
 78         this.job = job;
 79         this.sayName = function(){
 80             alert(this.name);
 81         };
 82     }
 83     //当构造函数使用
 84     var liujie = new Person("Jie Liu",27,"Yunwei");
 85     //当普通函数使用
 86     Person("Qinqin Yu",27,"Shop Yunyin");//添加到window中
 87     liujie.sayName();
 88     window.sayName();
 89     //在另一个对象的作用域中使用
 90     var o = new Object();
 91     Person.call(o,"Prince",25,"F2E");
 92     o.sayName();
 93     
 94     //将构造函数中的方法提取出来
 95     function Person1(name,age,job){
 96         this.name = name;
 97         this.age = age;
 98         this.job = job;
 99         this.sayName = sayName;
100     }
101     function sayName(){
102         alert(this.name);
103     }
104     var prince = new Person1("Prince Yu",25,"Front End Engineer");
105     var xiaoyin = new Person1("Chaohuan Yin",24,"Shop Yunyin");
106     prince.sayName();
107     xiaoyin.sayName();
108 
109     /**************************************/
110     /**                                  **/
111     /**             5.原型模式           **/
112     /**                                  **/
113     /**************************************/
114     //1.原型对象方法
115     function Person2(){}
116     Person2.prototype.name = "Prince";
117     Person2.prototype.age = 29;
118     Person2.prototype.job = "F2E";
119     Person2.prototype.sayAge = function(){
120         alert(this.age);
121     };
122     var dada = new Person2();
123     var prince = new Person2();
124     dada.sayAge();
125     prince.sayAge();
126 
127     //2.原型对象字面量方法
128     function Person3(){}
129     Person3.prototype = {
130         name : "Prince",
131         age : 30,
132         job : "F2E",
133         sayAge : function(){
134         alert(this.age);
135         }
136     };
137     var wangzi = new Person3();
138     wangzi.sayAge();
139 
140     /**************************************/
141     /**                                  **/
142     /** 6.组合使用构造函数模式和原型模式 **/
143     /**                                  **/
144     /**************************************/
145 
146     function Person4(name,age,job){
147         this.name = name;
148         this.age = age;
149         this.job = job;
150         this.friends =["Wangbing","Liutan"];
151     }
152     Person4.prototype = {
153         constructor : Person4,
154         sayAge : function(){
155         alert(this.age);
156         }
157     }
158     var dada =new Person4("Prince",25,"F2E");
159     var xiaobao =new Person4("Zhibao Hu",25,"SEO");
160     dada.friends.push("Prince Yu");
161     alert(dada.friends);
162     alert(xiaobao.friends);
163     alert(xiaobao.friends == dada.friends);
164     alert(xiaobao.sayAge == dada.sayAge);
165     //这是用来定义引用类型的一种默认方式

 

转载于:https://www.cnblogs.com/snowinmay/p/3205084.html