js面向对象

本文深入探讨面向对象编程的四种实现方式:直接创建对象、工厂模式、构造函数法及混合方式(构造函数+原型模式),并分析每种方式的优缺点,如代码重复、内存消耗、函数识别和this作用域等问题。

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

面向对象:一个对象下有多种属性和方法

 一:创建对象

// 一:创建对象
	// 缺点:产生大量代码
		var box = new Object();
		box.name = 'wang';
		box.age = 18;
		box.run = function(){
			console.log(this.age);
		}
		var box2 = new Object();
		box2.name = 'lin';
		box2.age = 19;
		box2.run = function(){
			console.log(this.name);
		}
		box.run();
		box2.run();

二.工厂模式
    解决了大量重复代码,1.但存在内存消耗太大,2.函数识别问题

// 二.工厂模式
	// 解决了大量重复代码,1.但存在内存消耗太大,2.函数识别问题
		function createObject(name, age){
			// console.log(name,age)
			var box = new Object();
			box.name = name;
			box.age = age;
			box.run = function(){
				console.log(this.name)
				console.log(this.age)
			}
			return box
		}
		var c = createObject('wang', 13);//执行
		var d = createObject('lin', 19);//执行
		c.run();
		d.run();
		

三.构造函数法(加个new)
         解决了函数识别问题,1.但消耗内存问题没有解决;2.this作用域的问题

// 三.构造函数法(加个new)
		// 解决了函数识别问题,1.但消耗内存问题没有解决;2.this作用域的问题
		function CreateObject(name, age){
			// var box = new Object();//省略了
			this.name = name;
			this.age = age;
			this.run = function(){
				console.log(this.name)
				console.log(this.age)
			}
			// return box//省略了
		}
		var son = new CreateObject('lalal', 13);//执行
		var son1 = new CreateObject('caiji', 19);//执行
		son.run();
		son1.run();

四.混合方式。(构造函数+原型模式)1.加上new;2.原型
     解决了消耗内存问题。当然它也可以解决this作用域等问题

// 1.构造函数里放属性
		function CreatePeople(name, age){
			// var box = new Object();//省略了
			this.name = name;
			this.age = age;
			// return box//省略了
		}
		// 2.方法放外面
		//构造函数名.原型.方法名
		CreatePeople.prototype.show = function(){
			console.log(this.name)
		}
		CreatePeople.prototype.showAge = function(){
			console.log(this.age)
		}
		var a = new CreatePeople('lalal', 13);//执行
		var b = new CreatePeople('caiji', 19);//执行
		a.show();
		b.showAge();

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值