Javascript高级程序设计——14.面向对象与原型（1 ）

旧城等待， 2022-07-14 11:43 172阅读 0赞

ECMAScript有两种开发模式：1、函数化；2、面向对象（OOP）,

面向对象有一个标志，即“类”，通过类可以创建任意多个具有相同属性和方法的对象。

但是，ECMASctipt没有类的概念，因此它的对象也与基于类的对象有所不同。

## 1、创建对象 ##

案例1-1——对象的使用以及this关键字：

var box=new Object();
    	box.name1='Lee';
    	box.age=10;
    	box.run=function(){
    		return this.name+this.age+'运行中...';   //this表示当前作用域下的对象；
    	};
    	//this表示new Object()实例化出来的对象；
    	//this要放在一个作用域中，比如box.run(){}，只是box作用域下的方法，即可用this来表示box
    	alert(box.run());   
    	var name1='Jack';
    	alert(this.name1);   //此时this表示window对象

结果：（1）Lee 10 运行中...

（2）Jack(由于作为了全局变量，取代了之前的name1)

案例1-2——解决实例化对象产生重复的方法（工厂模式）

//工厂模式
    	function createObject(name,age){
    		var obj=new Object();   //创建对象；
    		obj.name=name; 		//为对象添加属性
    		obj.age=age;		
    		obj.run=function(){	//为对象添加方法；
    			return this.name+this.age+'运行中...';
    		};
    		return obj.;		//返回obj这个对象的引用；
    	};
    	var box1=createObject('Zhao',21);    //创建第一个、第二个对象；
    	var box2=createObject('Zhang',20);
    
    	alert(box1.run());		//打印出第一个、第二个对象的实例化run()方法；
    	alert(box2.run());
    
    	alert(box1 instanceof Object);   //true；
    	alert(box2 instanceof Object);	//true；

注意：由于上述若有重复的createObject2()方法，内容与第一个完全相同，且有一个box3对象，

并把它实例化，会发现在box3 instanceof Object时，也会返回true，并不能准确判断哪个实例化方法，

为此，可采用构造函数方法，即案例1-3。

案例1-3——构造函数：既解决了重复实例化的问题，又解决了对象识别的问题，并没有new Object()，却可以实例化Box()

解析：由于在上述函数中，构造了两个函数，若要用instanceof测试对象，即可以发现

box1是Box的实例化对象，所以返回true；box3是Dock的实例化对象，不是Box的

实例化对象，所以返回了false；

区别——构造函数、工厂模式

（1）构造函数没有显示的创建对象（new Object()）

（2）直接将属性和方法赋值给this对象

（3）没有return语句；

（new Object()相当于直接在后台上创建了对象方法）

案例1-4——this的使用（全局访问name会有干扰）

function Box(user,age){
    		this.user=name;
    		this.age=age;
    		this.run=function(){
    			return this.user+this.age+'运行中...';
    		};
    	};
    	var box1=new Box('Zhao',21);
    	alert(box1.run());   //Zhao 21 运行中...
    	alert(this.name);
    	//由于该this指向的是window对象，为null，即返回“unfined”

案例1-5——对象冒充call()方法

//...构造函数
    	var o=new Object();
    	box.call(o,'Zhao',21);   //对象冒充
    	alert(o.run());

案例1-6——属性、方法、地址的比较

var box1=new Box('Zhao',21);
    	var box2=new Box('Zhao',21);
    	alert(box1.age==box2.age);       //true；
    	alert(box1.run()==box2.run());   //true；
    	alert(box1.run==box2.run);       //false；

解析：由于在进行box.run比较时，比较的是地址，

box1对象实例化对应的是地址1，box2对象实例化对应的是地址2，所以二者不相等

（比较的是引用地址）

总结：对于一个对象，其属性和方法对于一个相等传递参数均相等，但对于实例化地址而言，是不相等的。

2、原型

由于创建的每一个函数都有prototype(原型)属性，这个属性是一个对象。

（1）用途：包含可以由特定类型的所有实例共享的属性和方法

简而言之，prototype通过调用构造函数而创建的那个对象的原型对象。

（2）优点：可以让所有对象实例共享它包含的属性和方法，即不必在构造函数中定义对象信息，

而是可以直接将这些信息添加到原型中。

案例2-1——原型prototype构造函数

functionc Box(){
    	....
    	};

解析：当构造函数体内有东西（属性/方法），即叫做实例属性、实例方法

Box.prototype.name='Zhao';
    	Box.prototype.age=21;
    	Box.prototype.run=function(){
    		return this.name+this.age+'运行中...';
    	};
    	var box1=new Box();
    	var box2=new Box();
    	alert(box1.run());		//Zhao 21 运行中；     
    	alert(box1.run==box2.run);   //true

区别——实例化构造与原型prototype构造函数

最大的不同点，即原型prototype构造函数时，会共享地址，

在进行box.run比较时，返回true，共享了同一个地址

（1）实例化构造函数，box1，box2均为function类型，但二者相互独立；

（2）原型prototype构造函数，box1，box2均会指向原型对象的一个\_proto\_属性（指针），当实例化了该指针属性时，

它的作用是指向构造函数的原型属性constructor。

案例2-1（2）——prototype

alert(box1.prototype);   //由于prototype是一个对象，所以访问不到

注意：在IE浏览器不能识别

案例2-2——判断原型prototype是否存在

var obj=new Object();
    	alert(Box.prototype.isPrototypeOf(obj));    //只要实例化对象，就会指向原型

（3）原型模式的执行流程

a、先查找构造函数实例里的属性或方法，若有，即返回；

b、若构造函数中没有，则去它的原型对象中找，若有，就返回。

案例2-3——虽说可以通过对象实例访问保存在原型中的值，但不可以访问通过对象实例重写原型中的值。

var box1=new Box();
    	alert(box1.name);      //Zhao，由于在案例2-1时，Box.prototype.name='Zhao',原型中的值；
    	box1.name='Zhang';
    	alert(box1.name);      //Zhang，就近原则
    	var box2=new Box();
    	alert(box2.name);	//Zhao，原型中的值，没有被box1修改

案例2-4——若想在就近原则后访问原型属性，即可以先删除实例中属性delete

delete box1.name;
    	alert(box1.name);     //删除了就近原则时的Zhang，可返回原型中的Zhao

（4）a、判断实例中是否存在指定属性hasOwnProperty()

b、in操作符，会在通过对象能够访问给定属性时访问true，无论该属性在实例中还是在原型中

（in操作符表示只要有就返回true）

案例2-5——判断实例中是否有指定属性

function Box(){}    //构造函数为空
    	Box.prototype.name='Zhao';
    	Box.prototype.age=21;
    	Box.prototype.run=function(){
    		return this.name+this.age+'运行中...';
    	};
    	var box1=new Box();   //表示实例化了Box()
    	box1.name='Zhang';
    	alert(box1.hasOwnProperty('name'));  //由于实例了name->'Zhang',所以结果应该返回true

案例2-5——in操作符的使用

上述代码修改为

var box1=new Box();
    	alert('name' in box1);
     //不管实例或原型属性是否存在，只要有就会返回true；两边都没有，返回flase。

案例2-6——判断原型中是否有属性

（将案例2-5与案例2-6合并起来）

function isProperty(object,property){
    		return !object.hasOwnProperty(property)&&(property in object);
    		//表示实例中没有，原型和实例中都有，即“只有原型中有”
    	}
    	
    	//原型
    	function Box(){...}
    	Box.prototype.name='Zhao';   //原型属性；
    	Box.prototype.age=21;
    	var box1=new Box();    
    	//box1.name='';		//实例属性；
    	//alert(isProperty(box1,'name'));  //false，由于在实例化对象属性中仍有，返回false；
    
    	alert(isProperty(box1,'name'));    //true
    	//由于在实例中创建的box1对象没有name，但在原型中有，所以返回true；