javascript 面向对象

最新推荐文章于 2025-08-15 09:50:45 发布

「已注销」

最新推荐文章于 2025-08-15 09:50:45 发布

阅读量621

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 面向对象

本文链接：https://blog.youkuaiyun.com/wo_shi_chuan_qi_007/article/details/20080807

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了JavaScript中创建对象的五种模式：直接创建对象、工厂模式、构造函数模式、对象冒充以及原型模式，并详细解析了每种模式的特点及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
  /*
  01-创建对象
  */
  var obj = new Object(); // 创建对象
  obj.name = "huang";
  obj.age = 24;
  obj.fn = function(){
  	 return "姓名："+this.name+" "+"年龄："+this.age; // 当前作用域下的对象（obj作用域下，代表obj对象本身）
  	};  
  	
  
  /*
  02-工厂模式
  */ 
  var createObjFactory = function(name,age){
  	  var obj = new Object();
  	  obj.name = name;
  	  obj.age = age;
  	  obj.fn = function(){
  	  	return "姓名："+this.name+" "+"年龄："+this.age; 
  	  	};
  	  return obj;
  	};
  	
  	// 创建一个用户对象
  	var user = createObjFactory("huang",24);
  	
  	/*
  	03-构造函数模式（改良后的工厂方法）
  	*/
  	/*
  	①构造函数 没有 new Object()
  	②this 就相当于 obj
  	③后台会自动创建对象
  	④不需要返回对象
  	⑤构造函数必须使用 new 运算符
  	*/
  	var Constructor = function(name,age){ // this 代表Constructor (构造函数名最好大写)
  		this.name = name;
  		this.age = age;
  		this.fn = function(){
  			return "姓名："+this.name+" "+"年龄："+this.age; 
  			};
  		};
   
   var constructor1 = new Constructor("张",25);
   var constructor2 = new Constructor("王",29);
   

   
   /*
   04-对象冒充
   */ 
   var o = new Object();
   Constructor.call(o,'张三',26);

           /*
  	05-原型
  	①地址共享
  	②每一个原型都有一个prototype属性
  	*/
  	var PrototypeFn=function(){};
  	
  	PrototypeFn.prototype.userName="小花"; // 原型属性
  	PrototypeFn.prototype.age = 18;
  	PrototypeFn.prototype.fn = function(){
  		 return "姓名："+this.userName+";年龄:"+this.age;
  		}
  		
  		var prototypeFn1 = new PrototypeFn();
  		var prototypeFn2 = new PrototypeFn();
  		
  		// 返回true  地址是相同的
  	  alert(prototypeFn2.fn==prototypeFn1.fn);

                // 5.1
  		//document.write(prototypeFn1.constructor); // 构造属性(会打印出构造函数本身)
  		
  		// 5.2 返回true  地址是相同的
  	        //document.write(prototypeFn2.fn==prototypeFn1.fn);
  		
  		// 5.3 判断一个对象的实例是否是一个原型对象
  		//document.write(PrototypeFn.prototype.isPrototypeOf(prototypeFn1));
  		
  		//prototypeFn1.userName = "张三"; // 实例属性
  		//document.write(prototypeFn1.age); // 打印出原型的属性
  		//document.write(prototypeFn1.userName);  // 打印出实例属性 “张三” 就近原则
  		
  		// 5.4 删除实例属性
  		//delete prototypeFn1.userName; //  (实例对象无法删除原型属性)
  		//document.write(prototypeFn1.userName); // 打印出原型属性 “小花”
  		
  		// 5.5 删除原型属性
  		//delete PrototypeFn.prototype.userName; 
  		//document.write(prototypeFn1.userName);
  		//document.write(prototypeFn1.userName+"<br>");
  		
  		// 5.6 判断实例中对象中是否有指定的属性 hasOwnProperty() 方法无法判断 原型对象中是否有此属性
  		prototypeFn1.sex = '男';
  		//document.write(prototypeFn1.hasOwnProperty('sex')+"<br>"); // 结果： true
  		//document.write(PrototypeFn.hasOwnProperty('age')+"<br>");
  		
  		// 5.7 可以通过 in 判断是否存在属性 （无论是实例属性还是原型属性 只要有就返回 true否则返回 false）
  		//document.write(('sex' in prototypeFn1)+"<br>"); // 结果： true
  		//document.write(('age' in prototypeFn1)+"<br>"); // 结果： true
  		
  		// 5.8 判断 原型中是否有属性
  		var isProtopotyProperty=function(obj,propertyName){
  			  return !obj.hasOwnProperty(propertyName) && (propertyName in obj)
  			}
  		document.write(isProtopotyProperty(prototypeFn1,'age')+"<br>"); // 结果： true
  		document.write(isProtopotyProperty(prototypeFn1,'sex')+"<br>"); // 结果： false

</script>