浅谈JavaScript的面向对象程序设计(二)

  前面介绍通过Object构造函数或者字面量创建单个对象,但是通过这个的方法创建对象有明显的缺点:调用同一个接口创建多个实例,会产生大量的重复代码。怎么样解决?

工厂模式

  工厂模式是软件工程领域经常使用的一种设计模式,这种设计模式抽象了创建对象的具体过程。由于在JavaScript中无法使用类,可以使用函数来封装特定接口创建对象。

 1 function createPerson(name,age,sex){
 2                     var obj= new Object();
 3                     obj.name=name;
 4                     obj.age=age;
 5                     obj.sex=sex;
 6                     obj.getName=function(){
 7                         return this.name;
 8                     }
 9                 }
10                 var person1 = createPerson("ge","18","man");
11                 var person2 = createPerson("james","18","man");

  函数createPerson能够接受参数创建person对象。可以多次调用这个函数,创建拥有同样属性和方法的对象。工厂模式解决了多次创建,代码重复的问题,但是却遇到了对象识别的问题。我们没有办法识别这些对象。

构造函数模式

 

  前面介绍过构造函数可以创建特定类型的对象。对于Object和Array这样的构造函数,在程序运行时,会自动执行在环境中。通过自定义的函数创建属性,可以自己定义属性和方法。

 1 var obj={};
 2                 function Person(name,age,sex){
 3                     this.name=name;
 4                     this.age=age;
 5                     this.sex=sex;
 6                     this.getName=function(){
 7                         return this.name;
 8                     }
 9                 }
10                 var person1 = new Person("ge",18,"man");
11                 var person2 = new Person("ha",19,"man");
12                 console.log(obj instanceof Person);//false
13                 console.log(person1 instanceof Person);//true
14                 console.log(person2 instanceof Person);//true

  上面的代码,通过字面量创建了一个对象obj。定义一个函数Person,通过this添加了三个属性和一个方法。10行和11行创建了两个person对象,通过instanceof来判断对象的类型。通过上面的代码创建对象,没有调用Object方法,直接将属性和方法赋值给this。

  创建Person对象实例,要经历以下过程:创建一个新对象;将构造函数的作用域赋值给新对象;执行构造函数中的代码;返回新对象。

  在前面的代码中,person1和person2分别保存这Person对象的不同实例。这两个实例有一个实例属性constructor属性,该属性指向Person

1 console.log(person1.constructor==Person);//true
2 console.log(person2.constructor==Person);//true

  构造函数与其他函数的唯一区别,就是调用他们的方式不同。任何函数只要通过new操作符来调用,那它就可以作为构造函数;如果不通过new来调用,那它就是普通函数。

  

1 var person1 = new Person("ge",18,"man");
2 Person("jiang",18,"man");
3 window.getName();

  上面的代码显示了函数的普通调用以及new操作符来调用。如果不通过new操作符调用函数,则属性和方法都会被添加到window中。构造函数创建对象的主要缺点是每个方法在创建对象的时候,是重新创建了一遍。person1和person2都有getName方法,但是这两个方法是不同的函数实例。 1 console.log(person1.getName==person2.getName);//false ,这句代码可以说明getName是不同的函数实例。

  

1 function Person(name,age,sex){
2                     this.name=name;
3                     this.age=age;
4                     this.sex=sex;
5                     this.getName=getName;
6                 }
7                 function getName(){
8                         return this.name;
9                     }

  上面的代码在Person外部定义的函数getName,在内部通过this指向了外部的方法。但是getName是全局变量,如果全局变量只能给一个函数使用,那这个全局变量实在没有存在的必要。

原型模式 

  我们创建的每一个函数都有prototype属性,他是一个指针,指向一个对象。这个对象的用途是可以由特定类型的所有实例共享属性和方法。prototype就是通过调用构造函数创建的实例的原型对象。使用原型的优势是可以让所有的对象实例共享属性和方法。不必的在构造函数中定义对象的属性和方法,可以通过原型来创建。

 1 function Person(name,age,sex){
 2                     this.name=name;
 3                     this.age=age;
 4                     this.sex=sex;
 5                 }
 6                 Person.prototype.getName=function(){
 7                     return this.name;
 8                 }
 9                 var person1 = new Person("haha","ge","man");
10                 var person2 = new Person("hehe","dd","man");
11                 console.log( person1.getName== person2.getName);//true

  上面的代码定义了一个对象Person,通过this方法给对象添加了属性,通过原型给对象添加了方法。并在第九行和第十行新建了对象的两个实例。通过测试,这个两个实例的getName相等,也就是说这两个实例的getName方法指向同一个函数。

  • 什么是原型对象

  无论什么时候,只要创建了一个函数,JavaScript就会根据特定的规则为函数创建prototype属性,这个属性指向函数的原型对象。默认情况下,这个属性会自动获得一个constructor属性,constructor指向函数指针。Person.prototype.constructor指向Person函数。创建了自定义的函数后,原型对象默认只有一个属性constructor属性;其他属性则是从Object对象继续而来。当调用构造函数创建一个实例后,该实例的内部将包含一个指针,指向构造函数的原型对象。 console.log(Person.prototype.isPrototypeOf(person1)); 通过isPrototypeOf可以确定person1是否是Person.prototype原型对象。 console.log(Object.getPrototypeOf(person1)==Person.prototype); 上面的代码通过Object的getPrototypeOf方法获取实例的原型对象。 1 console.log(Object.getPrototypeOf(person1).getName); 通过该方法获取的是实例的原型对象,并能够获取原型对象拥有的属性和方法。

  通过对象实例能够访问保存在原型中的属性值,但是却不能通过对象实例修改原型中的属性值,如果给对象实例添加了一个和原型实例相同名字的属性,则原型中的属性将会被覆盖。

 1 function Person(){
 2                     
 3                 }
 4                 Person.prototype.Name="haha";
 5                 Person.prototype.age="19";
 6                 var person1 = new Person();
 7                 var person2 = new Person();
 8                 person1.Name="jordan";
 9                 console.log(person1.Name);//jordan
10                 console.log(person2.Name);//haha

  上面的代码,我们定义了一个函数,并为函数通过原型的方法添加了属性name和age。然后通过new  构造函数创建了该对象的两个实例person1和person2。为person1添加了属性name,其实是覆盖了原型中的属性name,通过下面的输出可以确定,person2的输出依然是原型中属性的值。

  当为对象实例添加一个属性时候,如果该属性与原型中的属性重名,则会屏蔽原型中的属性。也就是说,添加这个属性会阻止我们访问原型中的属性,并不会修改原型中属性的值。对象的属性检索是从对象本身实例开始,然后再到原型中查找,如果查找到,则不会继续检索。delete操作符可以删除实例中的属性,从而可以继续访问原型属性。

 1 function Person(){
 2                     
 3                 }
 4                 Person.prototype.Name="haha";
 5                 Person.prototype.age="19";
 6                 var person1 = new Person();
 7                 var person2 = new Person();
 8                 person1.Name="jordan";
 9                 console.log(person1.Name);//jordan
10                 delete person1.Name;
11                 console.log(person1.Name);//haha

  上面的代码,我们使用delete操作符删除了person1实例中的属性Name,但是我们通过person1Name访问到的就是原型对象的属性。可以通过hasOwnProperty方法来判断属性是在实例中,还是在对象中。该方法继承于Object中。

  

 1 function Person(){
 2                     this.sex="man";
 3                 }
 4                 Person.prototype.Name="haha";
 5                 Person.prototype.age="19";
 6                 var person1 = new Person();
 7                 var person2 = new Person();
 8                 person1.Name="jordan";
 9                 console.log(person1.hasOwnProperty("Name"));//true
10                 console.log(person1.Name);//jordan
11                 delete person1.Name;
12                 console.log(person1.hasOwnProperty("Name"));//false
13                 console.log(person1.Name);//haha

  上面的代码通过hasOwnProperty方法判断了name属性是属于原型还是属于实例。

1 function Person(){
2                     
3                 }
4                 Person.prototype.Name="haha";
5                 Person.prototype.age="19";
6                 var person1 = new Person();
7                 for(key in person1){
8                     console.log(key);
9                 }

  通过for-in循环能够获取到实例的原型属性以及方法。当然也可以通过in来判断实例是否拥有属性。 console.log("Name" in person1); 通过in操作符合方法hasOwnProperty能够确认属性是存在于对象中还是原型中。in操作符无论是对象中属性还是原型中属性都返回true,hasOwnProperty只有存在于实例中才返回true。

  

1 //true,实例中属性
2                 //false,原型中属性
3                 function hasOwnProperty(obj,name){
4                     return obj.hasOwnProperty(name)&&(name in obj);
5                 }

  要获取对象上所有可以枚举的属性,可以通过Object.keys方法,返回字符串组成的数组。 1 var keys = Object.keys(Person.prototype); 2 console.log(keys.toString());//Name,age 。Object.keys方法获取了Person中可以枚举的属性。

1 var allkeys=Object.getOwnPropertyNames(Person.prototype);
2                 console.log(allkeys.toString());//constructor,Name,age

  通过Object.getOwnPropertyNames能够获取所有的属性,包括不可枚举的属性。

  • 原型的动态性   

  在原型中的修改是一次搜索,我们对原型的修改,会立即从实例上反映出来。即使是先创建实例,再修改原型,也可以。

  

1 function Person(){
2                     
3                 }
4                 var person1 = new Person();
5                 Person.prototype.getName=function(){
6                     return "hehe";
7                 }
8                 console.log(person1.getName());//hehe

  上面的代码定义了函数,并为对象创建了实例。在实例化之后,我们在原型中添加了属性getName,但是我们依然能够访问该原型。当我们在person1中调用getName时,首先在实例中搜索,如果搜索不到,则到原型中进行检索。原型与实例之间的连接是一个指针,因此可以在原型中找到getName属性。但是如果我们重写了原型对象,则无法访问到属性。实例中的指针仅仅指向原型,但是无法指向构造函数。

 1 function Person(){
 2                     
 3                 }
 4                 
 5                 var person1 = new Person();
 6                 Person.prototype={
 7                     getName:function(){return "hehe"}
 8                 };
 9                 var person2 = new Person();
10                 console.log(person2.getName());//hehe
11                 console.log(person1.getName());//报错

  上面的代码就显示了重写原型对象后,person1已经无法调用到原型的属性和方法了。但是peprson2可以调用到。

  • 原生对象的原型

  JavaScript中的引用类型都采用了原型模式。原生引用类型(Array、String、和Object)都在构造函数的原型上定义了方法。比如在String的原型用有toString()方法。

 1 console.log(typeof String.prototype.toString);//function 。同时我们还可以为原生引用类型添加新的方法。比如我们为String添加getString方法。

1 String.prototype.getString=function(){
2                     return this.toString().trim();
3                 }
4                 var str=" wo  ";
5                 console.log(str.getString());//wo

  上面的代码,我们为String的原型添加了getString 方法,该方法调用了toString方法和trim方法。

 

posted on 2018-01-08 10:25  水击三千  阅读(558)  评论(0编辑  收藏  举报

导航