重学js之面向对象技术

为了写出更加优秀而可读的ui代码,不得不重学一下js技术,同样也算是为了ext吧

 Prototype模式创建js对象

 JS每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,它是所有通过new操作符使用函数创建的实例的原型对象。原型对象最大特点是,所有对象实例共享它所包含的属性和方法,也就是说,所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

 1     function Cat(name) {
 2         this.Name = name;
 3         this.initFun = function(msg) {
 4             alert('name -->' + Name + 'msg --->' + msg);
 5         }
 6     }
 7     Cat.prototype.type = 'mao';
 8     Cat.prototype.su = function() {
 9         alert('type  --->' + this.type);
10     }
11     var cat1 = new Cat('momo');
12     cat1.su();

在这里有必要注意一下这个this关键字,就记住一句话谁调用this就指向谁

其实汇总起来创建javascript对象的方大概也就那么几种(工厂模式,构造函数模式,Prototype模式也叫原型模式,构造函数与Prototype模式混合)具体使用那种因情况而定,

有必要说明一下原型模式与构造函数模式各有特点,所以我们也一般选用构造与原型的混合 在所接触的JS库中,jQuery类型的封装就是使用构造函数与原型混合模式来实例的!!!

他们的特点:

构造函数模式用于定义实例的属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方方法的引用,最大限度的节约内存。此外,组合模式还支持向构造函数传递参数,可谓是集两家之所长。

下面上代码(构造函数与原型模式混合)

 1     function Cat(name) {
 2         this.Name = name;
 3         this.initFun = function(msg) {
 4             alert('name -->' + Name + 'msg --->' + msg);
 5         }
 6     }
 7     Cat.prototype = {
 8         age : '2',
 9         getName : function() {
10             return this.Name;
11         }
12     }
13     var cat1 = new Cat('mo');
14     alert(cat1.getName());
15     alert(cat1.age);

其实还有一种生成对象的方式叫动态原型模式

组合模式中实例属性与共享方法(由原型定义)是分离的,这与纯面向对象语言不太一致;动态原型模式将所有构造信息都封装在构造函数中,又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性,如果没有则定义,否则不再执行定义过程。该方式只原型上方法或属性只定义一次,且将所有构造过程都封装在构造函数中,对原型所做的修改能立即体现所有实例中:

 

posted @ 2016-09-06 08:29 奋斗,坚持 阅读(...) 评论(...)  编辑 收藏