js进阶学习之--面向对象（一）

最新推荐文章于 2023-04-09 11:44:10 发布

Web攻城狮

最新推荐文章于 2023-04-09 11:44:10 发布

阅读量406

点赞数 1

分类专栏： js 文章标签： js进阶学习之面向对象 js 内存冗余解决

本文链接：https://blog.csdn.net/b1244154318/article/details/52133319

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

js进阶学习之--面向对象（一）

构建对象的方式一共有三种:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>面向对象</title>
	<script>
		

		//1.工厂方式构建对象
		//弊端：通过工厂构建对象无法检测该示例来自于哪个对象类型
		function Person(name,sex,age){
		 	var obj = new Object();
		 	obj.name = name;
			obj.sex = sex;
		 	obj.age = age;
		 	obj.eat = function(){
		 		console.log("吃饭");
		 	}
		 	return obj;
		 }
		 var person = createObj("李四","女",28);
		 console.log(person);



		//2.字面量形式创建对象(属性、方法)
		 var person = {
		 	name:"张三",
		 	sex:"男",
		 	age:30,
		 	eat:function(){
		 		console.log("吃饭");
		 	},
		 	say:function(){
		 		console.log("说话");
		 	}
		 };

		 console.log(person);


		//3.通过构造函数构建对象
		//1）、构造函数名首字母大写(规范)
		//2)、构造函数和函数调用方式不同
		//普通函数调用：函数名()
		//构造函数调用：使用new 函数名();  一旦使用new关键调用函数，内部this指向发生变化，并且该函数变成了对象，this指向是该对象本身。
		function Person(){
			this.name = "张三";
			this.sex = "男";
			this.age = 30;
			this.eat = function(){
				console.log("吃饭");
			}
		}

		//Person.abc = "123"; // 静态属性赋值：调用方式构造函数名.属性名 = 数据

		var person = new Person();
		//动态属性：调用方式通过实例名.属性名
		console.log(person);
		//console.log(Person.abc); // 静态属性取值：调用方式构造函数名.属性名
	</script>
</head>
<body>
	
</body>
</html>

面向对象添加共享的方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>面向对象2</title>
	<script>

		//如果将方法放在构造函数中就会造成多余内存的消耗（内存冗余）
		//原因：在创建该对象多个实例时，每个方法都会形成该示例的副本并在内存中重复开辟空间
		function Person(name,sex,age){
			this.name = name;
			this.sex = sex;
			this.age = age;
			this.hobby = ["看书","听歌"];
		}


		//向原型对象中添加方法有2种方式：


		//1.利用原型对象动态创建属性添加方法
		
		 Person.prototype.eat = function(){
		 	console.log("吃饭");
		 }
		 Person.prototype.say = function(){
		 	console.log("说话");
		 }
		console.log(Person.prototype);


		//2.利用重写原型对象添加方法
		
		 Person.prototype = {
		 	constructor:Person,
		 	eat:function(){
				console.log("吃饭");
		 	},
		 	say:function(){
		 		console.log("说话");
		 	}
		 };
		 console.log(Person.prototype);


		//对象实例会共享该实例构造函数中的原型对象

		var person1 = new Person("张三","男",30);
		console.log(person1);

		var person2 = new Person("李四","女",28);

		//在构建对象时，将方法存储到该对象的原型对象即可解决方法造成的内存冗余问题
	</script>
</head>
<body>
	
</body>
</html>

Web攻城狮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进阶学习之--面向对象（一）

js进阶学习之--面向对象（一）构建对象的方式一共有三种: 面向对象 //1.工厂方式构建对象 //弊端：通过工厂构建对象无法检测该示例来自于哪个对象类型 function Person(name,sex,age){ var obj = new Object(); obj.name = name; obj.sex = sex;
复制链接

扫一扫