其他分享
首页 > 其他分享> > 浅谈基础模式,工厂模式,构造函数模式,原型模式,继承模式

浅谈基础模式,工厂模式,构造函数模式,原型模式,继承模式

作者:互联网

一.基础模式

var web2101=[{
			name:'',
			age:20,
			gender:'men',
			tel:xxxx,
			address:'',
			专业:xxx
		},{
			name:'',
			age:20,
			gender:'men',
			tel:xxxx,
			address:'',
			专业:xxx
		},{
			name:'',
			age:20,
			gender:'men',
			tel:xxxx,
			address:'',
			专业:xxx
		},....];

二.工厂模式

function Student(name,age,gender){
            var obj=new Object();
            obj.name=name;
            obj.age=age;
            obj.gender=gender;
            obj.say=function(){
            	alert('学生中的说话属性');
            }
            return obj;//一定要写return 因为obj是局部变量,在函数外部无法访问
		};
		var stu1=Student('李明',19,'男');
		var stu2=Student('张华',20,'女');
		console.log(stu1);
		console.log(stu2);
		//输出结果:
/*{name: "李明", age: 19, gender: "男", say:      ƒ}
{name: "张华", age: 20, gender: "女", say: ƒ}*/


//测试stu1 stu2是否能访问say();
        stu1.say();
		stu2.say();//测试结果可以 
//stu1 和stu2不同的引用地址所以两者不等

工厂模式的优缺点:
优点:简化了基础模式的代码量
缺点:对象不能细分,浪费内存空间(内置函数)
解决方法:将共有函数写在工厂函数外部,在函数内部将指针指向共有函数
例如:

function Student(name,age,gender){
            var obj=new Object();
            obj.name=name;
            obj.age=age;
            obj.gender=gender;
           /* obj.say=function(){
            	alert('学生中的说话属性');
            }*/  //此函数为内置函数,写在函数内部会浪费空间
            return obj;
		};
		//解决工厂模式浪费内存的方法 将say()方法写到函数外部
		function say(){
		alert('学生公有属性说话属性');
		}
		var stu1=Student('李明',19,'男');
		var stu2=Student('张华',20,'女');
		
//测试stu1 stu2是否能访问say();
        stu1.say();
		stu2.say();//测试结果可以 

三.构造函数模式

function Student(name,age,gender){
            this.name=name;
            this.age=age;
            this.gender=gender;
		}
		var stu1=new Student('李明',19,'男');
		var stu2=new Student('张华',20,'女');
		console.log(stu1,stu2);
		//输出结果:
/*Student {name: "李明", age: 19, gender: "男"} Student {name: "张华", age: 20, gender: "女"}*、
/*stu1 和 stu2依然不等 原因:stu1和stu2都是new出来的,地址依然同*/

优点:
解决对象细分问题
缺点:
公有属性/方法 外置

四.原型模式

将所有的共有属性/方法 放到构造函数的原型函数中,构造函数可以调用,构造对象的原型对象也能调用

function Student(name,age,gender){
            this.name=name;
            this.gender=gender;
            this.age=age;
		}
		//共有属性/函数 放在了构造函数Student的原型函数中
		Student.prototype.say=function(){
               alert('学生的公有属性');
		}
		var stu1= new Student('李明',19,'男');
		var stu2= new Student('张华',20,'女');
		stu1.say();
		stu2.say();
		console.log(stu1,stu2);

五.继承

子类的原型指向父类的实例
父类的实例指向子类的构造函数
关系如下图所示
在这里插入图片描述
代码实现如下:

function rich(name,age,gender){
			this.name=name;
			this.age=age;
			this.gender=gender;
		}
		//rich的共有属性money声明在rich的原型对象中
		rich.prototype.enjoy=function(){
			alert('rich的共有函数享受');
		}
		rich.prototype.money=['card1','card2','card3'];

		//声明poor
		function poor(name,age,gender){
              this.name=name;
              this.age=age;
              this.gender=gender;
		}
		  //我们想要p1来继承r1
    /*1.将子类的原型对象p1.prototype指向父类的实例new rich()
    2.将父类的实例[此时父类的实例对象为p1.prototype]对象指向子类的构造函数p*/
		 
  poor.prototype=new rich();
  poor.prototype.constructor=poor;
   
		poor.prototype.work=function(){
			alert('poor的公有方法-工作');
		}
    var r1=new rich('张明',20,'男');
    var p1=new poor('李芳',19,'女');
    console.log(p1.money);
    p1.enjoy();
    console.log('poor1的构造函数为'+p1.constructor);
  

标签:stu2,stu1,name,gender,age,模式,Student,构造函数,浅谈
来源: https://blog.csdn.net/weixin_43164078/article/details/114846711