js面形对象(2)

1.​原型与in操作符

    有两种方式使用in操作符:单独使用和在for-in循环中使用.在单独使用时,in操作符会在通过对象能够访问给定属性时,返回true,无论该属性是存在实例或者是存在于原型之中.

    看看下面的代码:

        console.debug(p1.hasOwnProperty('name'));//false 实例中没有name属性
	console.debug('name' in p1);//输出true  实例或者原型中有name属性
	p1.name = 'Lebron';
	console.debug(p1.hasOwnProperty('name'));//true 实例中有name属性
	console.debug('name' in p1);//输出true  实例或者原型中有name属性

    那么利用in 操作符就可以判断一个属性是在实例中或者是在其原型中,如果Object.hasOwnProterty('proname')返回false,并且 'proName' in Obejct 则说明这个property是存在于原型中.看看下面的这个函数:

function hasPrototypeProperty(object,name){
		return (name in object) && (!object.hasOwnProperty(name));
	}
	
	console.debug( hasPrototypeProperty(p2,'name'));//返回true name属性在原型中
	p2.name = 'kobe';//实例p2增加name属性
	console.debug( hasPrototypeProperty(p2,'name'));//返回false name属性不在原型中

但是这个函数并不严谨,因为即使p2访问name属性时是访问的实例的name属性,并且原型的name属性被实例的name属性屏蔽了,但是也不能认为这个原型没有name属性.

所以把这个函数进化一下

	function ownPrototypeHasProperty(object,name){
		while( Object.getPrototypeOf(object).constructor != Object){//object的原型的构造函数不为Object
			var pro = Object.getPrototypeOf(object);//获取这个原型
			//如果原型中有这个属性
			if(pro.hasOwnProperty(name)){
				return true;
			}
			//顺着原型向上搜索
			object = pro;
		}
		
		return false;
	}
	
	var v3 = new Person();
	console.debug( ownPrototypeHasProperty(v3,'name'));//true  v3的原型中有name属性
	console.debug( ownPrototypeHasProperty(v3,'sex'));//false v3的原型中木有sex属性
	

    in操作符除了可以判断属性是否在其实例或原型中( 'protertyName' in  object) 之外,可以使用 for-in结构来遍历实例的可枚举的所有属性(包括其原型的),就像下面这样

	console.debug('---------------');
	function itratePropertyOf(object){
		for( var per in object){
		console.debug(per);
		}
		
	}
	itratePropertyOf(v3);	
	

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

    

function Person() {
	}

	Person.prototype.name = "Nicholas";
	Person.prototype.age = 29;
	Person.prototype.job = "Software Engineer";
	Person.prototype.sayName = function() {
		console.debug(this.name);
	};

	var keys = Object.keys(Person.prototype);
	console.debug(keys); //"name,age,job,sayName"

更简洁的原型语法

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

function Person() {
	}
	Person.prototype.name = "Nicholas";
	Person.prototype.age = 29;
	Person.prototype.job = "Software Engineer";
	Person.prototype.sayName = function() {
		console.debug(this.name);
	};
	function Per (){
		console.debug('Per构造函数');
	}
	//设置per的原型 使用对象字面量的方式,但是这样会使Per的原型失去construtor(会使用Object() ),所以要制定constructor 为 Per
	Per.prototype = {
			name : 'kobe',
			sayName : function(nameStr){
				this.name = nameStr;
			},
			constructor : Per
	};
	var p1 = new Per();
	var p2 = new Per();
	console.debug(p1);
	console.debug(p2);

原型的动态性

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

参看下面的代码:

 function Person(){
        }
        
        //Person的原型指向新对象 
        Person.prototype = {
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            sayName : function () {
                alert(this.name);
            }
        };
        
        var friend = new Person();
        
        Person.prototype.sayHi = function(){
            alert("hi");
        };
        friend.sayHi();   //"hi" works!

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

            
        function Person(){
        }
        
        var friend = new Person();
                
        //Person的原型对象指向了一个新的对象
        Person.prototype = {
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            sayName : function () {
                alert(this.name);
            }
        };
        
        //friend.sayName();   //Uncaught TypeError: Object #<Person> has no method 'sayName' 
	//friend对象的原型指针仍然指向的是旧的Person的原型对象导致错误的发生

原生对象的原型

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

看看下面的示例代码:

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

	var msg = "Hello world!";
	console.debug(msg.startsWith("Hello")); //true

原型模式的问题

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

比如说Dog对象中有一个master属性,master属性是Person类型的,并且master有属性name,如果改变Dog原型中的master属性的name属性,那么所有根据Dog原型生成的实例都会有属性的改变.看看下面的代码:

//主人  默认名字为kobe
	var per_1 = new Person();
	//Dog构造函数
	function Dog(){
	}
	//Dog原型
	Dog.prototype = {
		constuctor : Dog,
		name : 'Hachi',
		master : per_1,//主人为per_1  per_1的name默认为Kobe
		sayName : function(){
			console.debug(this.name + ' 主人' +this.master.name);
		}
	};
	//实例化两只狗狗
	var d1 = new Dog();
	var d2 = new Dog();
	d1.sayName();//Hachi 主人kobe
	d2.sayName();//Hachi 主人kobe
	d1.master.name = 'Garnett';//改变狗狗1的主人	
	d1.sayName();//Hachi 主人Garnett
	d2.sayName();//Hachi 主人Garnett  逻辑上不应该更改的吧
	

同类型的错误,再看看下面的一段代码:

        function Person(){
        }
        Person.prototype = {
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            friends : ["Shelby", "Court"],
            sayName : function () {
                alert(this.name);
            }
        };
        var person1 = new Person();
        var person2 = new Person();
        person1.friends.push("Van");
        alert(person1.friends);    //"Shelby,Court,Van"
        alert(person2.friends);    //"Shelby,Court,Van"
        alert(person1.friends === person2.friends);  //true

出现上面的这种问题就是为什么很少单独使用原型模式

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

    构造函数模式用于定义实例属性,而原型模式用于定义方法和共享属性.这样每个实例都会有自己的一份实例属性副本,但同时又共享着对方法的引用,最大限度的节省了内存,另外这种混成模式还支持向构造函数传递参数,可以说是集两种模式之长.

如下面的代码所示:

        
        function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.friends = ["Shelby", "Court"];
        }
        Person.prototype = {
            constructor: Person,
            sayName : function () {
                console(this.name);
            }
        };
        var person1 = new Person("Nicholas", 29, "Software Engineer");
        var person2 = new Person("Greg", 27, "Doctor");
        person1.friends.push("Van");
        console(person1.friends);    //"Shelby,Court,Van"
        console(person2.friends);    //"Shelby,Court"
        console(person1.friends === person2.friends);  //false
        console(person1.sayName === person2.sayName);  //true

在这个例子当中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法sayName()则是在原型中定义的,这样就保证了实例属性的修改不会相互影响,

这种构造函数与原型混成的模式,是目前ECMAScript中使用最为广泛,认同度最高的一种创建自定义类型的方法.可以说构造函数与原型混成的模式是用来定义引用类型的一种默认模式

动态原型模式

ss

来自为知笔记(Wiz)