js面形对象(2)

1.​原型与in操作符
    有两种方式使用in操作符:单独使用和在for-in循环中使用.在单独使用时,in操作符会在通过对象能够访问给定属性时,返回true,无论该属性是存在实例或者是存在于原型之中.
    看看下面的代码:
  1.         console.debug(p1.hasOwnProperty('name'));//false 实例中没有name属性
  2. 	console.debug('name' in p1);//输出true  实例或者原型中有name属性
  3. 	p1.name = 'Lebron';
  4. 	console.debug(p1.hasOwnProperty('name'));//true 实例中有name属性
  5. 	console.debug('name' in p1);//输出true  实例或者原型中有name属性

    那么利用in 操作符就可以判断一个属性是在实例中或者是在其原型中,如果Object.hasOwnProterty('proname')返回false,并且 'proName' in Obejct 则说明这个property是存在于原型中.看看下面的这个函数:
  1. function hasPrototypeProperty(object,name){
  2. 		return (name in object) && (!object.hasOwnProperty(name));
  3. 	}
  4. 	
  5. 	console.debug( hasPrototypeProperty(p2,'name'));//返回true name属性在原型中
  6. 	p2.name = 'kobe';//实例p2增加name属性
  7. 	console.debug( hasPrototypeProperty(p2,'name'));//返回false name属性不在原型中
但是这个函数并不严谨,因为即使p2访问name属性时是访问的实例的name属性,并且原型的name属性被实例的name属性屏蔽了,但是也不能认为这个原型没有name属性.
所以把这个函数进化一下

  2. 	function ownPrototypeHasProperty(object,name){
  3. 		while( Object.getPrototypeOf(object).constructor != Object){//object的原型的构造函数不为Object
  4. 			var pro = Object.getPrototypeOf(object);//获取这个原型
  5. 			//如果原型中有这个属性
  6. 			if(pro.hasOwnProperty(name)){
  7. 				return true;
  8. 			}
  9. 			//顺着原型向上搜索
  10. 			object = pro;
  11. 		}
  12. 		
  13. 		return false;
  14. 	}
  15. 	
  16. 	var v3 = new Person();
  17. 	console.debug( ownPrototypeHasProperty(v3,'name'));//true  v3的原型中有name属性
  18. 	console.debug( ownPrototypeHasProperty(v3,'sex'));//false v3的原型中木有sex属性
  19.
    in操作符除了可以判断属性是否在其实例或原型中( 'protertyName' in  object) 之外,可以使用 for-in结构来遍历实例的可枚举的所有属性(包括其原型的),就像下面这样

  2. 	console.debug('---------------');
  3. 	function itratePropertyOf(object){
  4. 		for( var per in object){
  5. 		console.debug(per);
  6. 		}
  7. 		
  8. 	}
  9. 	itratePropertyOf(v3);	
  10.

Obejct.keys(obj)方法,这个方法会返回obj这个对象上的属性集合

    
  1. function Person() {
  2. 	}
  4. 	Person.prototype.name = "Nicholas";
  5. 	Person.prototype.age = 29;
  6. 	Person.prototype.job = "Software Engineer";
  7. 	Person.prototype.sayName = function() {
  8. 		console.debug(this.name);
  9. 	};
  11. 	var keys = Object.keys(Person.prototype);
  12. 	console.debug(keys); //"name,age,job,sayName"


更简洁的原型语法
使用原型语法时,并不一定每设置一个属性就是用Person.prorerty.**,可以使用对象字面量的方式


  1. function Person() {
  2. 	}
  3. 	Person.prototype.name = "Nicholas";
  4. 	Person.prototype.age = 29;
  5. 	Person.prototype.job = "Software Engineer";
  6. 	Person.prototype.sayName = function() {
  7. 		console.debug(this.name);
  8. 	};
  9. 	function Per (){
  10. 		console.debug('Per构造函数');
  11. 	}
  12. 	//设置per的原型 使用对象字面量的方式,但是这样会使Per的原型失去construtor(会使用Object() ),所以要制定constructor 为 Per
  13. 	Per.prototype = {
  14. 			name : 'kobe',
  15. 			sayName : function(nameStr){
  16. 				this.name = nameStr;
  17. 			},
  18. 			constructor : Per
  19. 	};
  20. 	var p1 = new Per();
  21. 	var p2 = new Per();
  22. 	console.debug(p1);
  23. 	console.debug(p2);


原型的动态性
就像对象一样,原型的属性也是可以动态添加的,我们可以通过构造函数获取原型,也可以直接通过对象来获取原型,然后在原型对象上进行动态的修改,修改之后,再根据原型创建的对象也会具有修改后原型的属性.

参看下面的代码:

  1.  function Person(){
  2.         }
  3.         
  4.         //Person的原型指向新对象 
  5.         Person.prototype = {
  6.             constructor: Person,
  7.             name : "Nicholas",
  8.             age : 29,
  9.             job : "Software Engineer",
  10.             sayName : function () {
  11.                 alert(this.name);
  12.             }
  13.         };
  14.         
  15.         var friend = new Person();
  16.         
  17.         Person.prototype.sayHi = function(){
  18.             alert("hi");
  19.         };
  20.         friend.sayHi();   //"hi" works!

但是有一种比较危险的情况,会使原型与对象脱离关系(尽管这么描述并不准确),看看下面的示例代码:

  1.             
  2.         function Person(){
  3.         }
  4.         
  5.         var friend = new Person();
  6.                 
  7.         //Person的原型对象指向了一个新的对象
  8.         Person.prototype = {
  9.             constructor: Person,
  10.             name : "Nicholas",
  11.             age : 29,
  12.             job : "Software Engineer",
  13.             sayName : function () {
  14.                 alert(this.name);
  15.             }
  16.         };
  17.         
  18.         //friend.sayName();   //Uncaught TypeError: Object #<Person> has no method 'sayName' 
  19. 	//friend对象的原型指针仍然指向的是旧的Person的原型对象导致错误的发生



原生对象的原型
原型模式同样适用于JavaScript的原生对象,我们可以获取原生对象的原型,并且修改其原型属性,比如给原生对象的原型增加属性或者方法
看看下面的示例代码:

  2. 	
  3. 	/**
  4. 		原型模式不仅仅适用于创建自定义类型,原生的引用类型也是采用原型模式创建的
  5. 	**/
  6. 	console.debug(typeof Array.prototype.sort); //"function"
  7. 	console.debug(typeof String.prototype.substring); //"function"
  8. 	//通过原型对象的原型 不仅仅可以取得默认方法的引用,并且可以修改原声对象的引用
  9. 	//下面的代码给基本包装类型String添加一个名为startsWith()的方法
  10. 	String.prototype.startsWith = function(text) {
  11. 		return this.indexOf(text) == 0;
  12. 	};
  14. 	var msg = "Hello world!";
  15. 	console.debug(msg.startsWith("Hello")); //true



原型模式的问题
    尽管原型模式创建对象十分方便,并且比起构造器模式来更节省资源,但是原型模式也是有它的问题的.原型模式的最大问题是由其共享的本性所导致的.原型中的属性是被很多实例所共享的,这种共享对于函数非常合适.对于那些包含基本值的属性倒也说的过去,毕竟,通过在实例上添加一个同名属性,可以隐藏原型中的对应属性,如果对于引用类型,那么就有些麻烦了,如果仅仅是使对象的属性重新指向一个新值(引用类型),这样还可以,因为这样是在实例上添加一个同名属性,隐藏掉原型中的属性,不会引起错误,但是下面这种情况就麻烦了,如果对实例的原型的引用类型属性进行属性的修改,那么修改的是原型的引用类型属性,所有根据这个原型生成的实例的这个属性都会修改的.
比如说Dog对象中有一个master属性,master属性是Person类型的,并且master有属性name,如果改变Dog原型中的master属性的name属性,那么所有根据Dog原型生成的实例都会有属性的改变.看看下面的代码:

  1. //主人  默认名字为kobe
  2. 	var per_1 = new Person();
  3. 	//Dog构造函数
  4. 	function Dog(){
  5. 	}
  6. 	//Dog原型
  7. 	Dog.prototype = {
  8. 		constuctor : Dog,
  9. 		name : 'Hachi',
  10. 		master : per_1,//主人为per_1  per_1的name默认为Kobe
  11. 		sayName : function(){
  12. 			console.debug(this.name + ' 主人' +this.master.name);
  13. 		}
  14. 	};
  15. 	//实例化两只狗狗
  16. 	var d1 = new Dog();
  17. 	var d2 = new Dog();
  18. 	d1.sayName();//Hachi 主人kobe 
  19. 	d2.sayName();//Hachi 主人kobe 
  20. 	d1.master.name = 'Garnett';//改变狗狗1的主人	
  21. 	d1.sayName();//Hachi 主人Garnett 
  22. 	d2.sayName();//Hachi 主人Garnett  逻辑上不应该更改的吧
  23.
同类型的错误,再看看下面的一段代码:
  1.         function Person(){
  2.         }
  3.         Person.prototype = {
  4.             constructor: Person,
  5.             name : "Nicholas",
  6.             age : 29,
  7.             job : "Software Engineer",
  8.             friends : ["Shelby", "Court"],
  9.             sayName : function () {
  10.                 alert(this.name);
  11.             }
  12.         };
  13.         var person1 = new Person();
  14.         var person2 = new Person();
  15.         person1.friends.push("Van");
  16.         alert(person1.friends);    //"Shelby,Court,Van"
  17.         alert(person2.friends);    //"Shelby,Court,Van"
  18.         alert(person1.friends === person2.friends);  //true
出现上面的这种问题就是为什么很少单独使用原型模式

组合使用构造函数模式和原型模式

    构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性.这样每个实例都会有自己的一份实例属性副本,但同时又共享着对方法的引用,最大限度的节省了内存,另外这种混成模式还支持向构造函数传递参数,可以说是集两种模式之长.
如下面的代码所示:
  1.         
  2.         function Person(name, age, job){
  3.             this.name = name;
  4.             this.age = age;
  5.             this.job = job;
  6.             this.friends = ["Shelby", "Court"];
  7.         }
  8.         Person.prototype = {
  9.             constructor: Person,
  10.             sayName : function () {
  11.                 console(this.name);
  12.             }
  13.         };
  14.         var person1 = new Person("Nicholas", 29, "Software Engineer");
  15.         var person2 = new Person("Greg", 27, "Doctor");
  16.         person1.friends.push("Van");
  17.         console(person1.friends);    //"Shelby,Court,Van"
  18.         console(person2.friends);    //"Shelby,Court"
  19.         console(person1.friends === person2.friends);  //false
  20.         console(person1.sayName === person2.sayName);  //true

在这个例子当中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的,这样就保证了实例属性的修改不会相互影响,
这种构造函数与原型混成的模式,是目前ECMAScript中使用最为广泛,认同度最高的一种创建自定义类型的方法.可以说构造函数与原型混成的模式是用来定义引用类型的一种默认模式

动态原型模式




























ss




posted @ 2014-07-07 16:33  bing2011  阅读(342)  评论(0)  编辑  收藏  举报