JavaScript面向对象编程-封装

最新推荐文章于 2025-03-02 17:53:06 发布

原创最新推荐文章于 2025-03-02 17:53:06 发布 · 657 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

本文深入探讨了JavaScript中面向对象编程的概念，通过原始模式、构造函数模式和原型模式三种方式来实现对象的创建和属性赋值，展示了如何利用这些模式进行代码的封装和复用。

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

<!doctype html>
<html>
 <head>
  <title>Document</title>
  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
  <script>
	/*JavaScript面向对象编程-封装*/
	$(function(){
		// 生成对象的原始模式
		var Cat = {
			name : '',
			color : ''
		};

		var c1 = {};	// 创建一个空对象
		c1.name = '大毛';
		c1.colr = '黄色';

		var c2 = {};
		c2.name = '二毛';
		c2.color = '黑色';

	//	alert(c1.name);
	
		// 原始模式的改进
		function Cat(name, color){
			return {
				name : name,
				color : color
			}
		}
		
	//	var c3 = Cat('大毛', '黄色');
	//	var c4 = Cat('二毛', '黑色');
	//	alert(c4);

		// 构造函数模式
		function Person(name, gender) {
			this.name = name;
			this.gender = gender;
			// 内存浪费问题
			this.type = '人';
			this.eat = function(){
				alert('吃饭...');
			}
		}
		
		var c5 = new Person('张三', '男');
		var c6 = new Person('李四', '女');

	//	alert(c5.name + ',' + c5.gender);

	//	alert(c5.constructor == Person);
	//	alert(c6 instanceof Person);

		// Prototype模式
		function Dog(name, gender){
			this.name = name;
			this.gender = gender;
		}

		Dog.prototype.type = '狗';
		Dog.prototype.eat = function(){
			alert('狗是最忠实的动物！');
		}
		
		var dog1 = new Dog('大黄', '公');
		var dog2 = new Dog('二黄', '母');

	//	alert(dog1.type);
	//	alert(dog2.type);
	//	alert(dog1.type == dog2.type); // true

	//	dog1.eat();
	//	dog2.eat();

	//	alert(dog1.eat == dog2.eat); // true

	//	alert(Dog.prototype.isPrototypeOf(dog1));
		
		// 用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。
	//	alert(dog1.hasOwnProperty('name'));

		// in运算符
		// 判断某个实例是否含有某个属性
	//	alert('name' in dog1); // true

		// 用来遍历某个对象的所有属性
		for(var pro in dog1) {
			alert(pro);
		}

		var arrs = [1, 2, 3, 4];
		for(var i in arrs) {
			console.log(i);
		}

	});
  </script>
 </head>
 <body>
  
 </body>
</html></span>