js设计模式

article/2025/10/25 16:03:13

js设计模式

1.构造器函数

        function Ema(name, age) {this.name = nameconsole.log(this);//谁调用了this就指向谁this.say=function(){console.log('1')}}let ema1=new Ema('zhangsna1')let ema2=new Ema('李四1')console.log(ema1);//Ema obj {name:'zhangsan1', Fun say}console.log(ema2);//Ema obj {name:'李四1', Fun say}let ema1=Ema('战三')//这是this就指向window  new跟没new的this指向是不同的

构造器模式的优点，可以创建不同的对象并且每个对象的地址不一样
缺点：就是构造器里面的方法其实都是一样的，但是他们都重新开辟了空间，消耗内存

2.原型链构造模式

由于构造器里面的每个函数都重新开启内存消耗性能，如果有100个人1000个调用，消耗内存就有点大了，因此就衍生出了原型链模式

        function Ema(name, age) {this.name = name// console.log(this);//谁调用了this就指向谁//this.say=function(){console.log('1')}提取出来}Ema.prototype.say=function(){console.log(this.name)}let ema1=new Ema('zhangsna1')let ema2=new Ema('李四1')console.log(ema1);//Ema obj {name:'zhangsan1', Fun say}console.log(ema2);//Ema obj {name:'李四1', Fun say}ema1.say();//张三1ema2.say();//李四1

在这里插入图片描述

以上其实用了原型链与构造函数结合的设计模式

3.类构造函数

类构造函数其实就是把原型链跟构造函数和结合起来的成果，constructor 里面相当于构造函数值，
下面的方法相当于原型链

  class Ema {constructor(name, age) {this.name = namethis.age = age + 'sss'this.spaeak22()//直接调用方法this.speak()}speak(){console.log('原型链');}speak22=()=>{console.log('不在原型链');}
}
let ema1 = new Ema('张三', 18)
console.log(ema1);//{name:'张三，age:'18sss} 
//类继承
class Say extends Ema {constructor(name, age) {console.log(name, age);//李四 28 //注意这时候继承的只是Ema的传参并不是计算后的age+ssssuper(name, age)console.log(age);//28// this.age=age+2}say = () => {console.log('不是在原型链');return 222}
}
let say1 = new Say('李四', 28)
console.log(say1);//{name:'李四'，age:28sss,say:fun}  //注意这里面为什么是28sss
console.log(say1.say());//222

这里要注意以下几点

在类函数里面不管是不是继承的只要写箭头函数那么就是相当于直接在构造器上会直接看到，如果是普通函数那么就相当于写在原型链里面
类继承中要把需要的参数继承过来不需要的就不要继承，因为如果说你继承过来了，但是你没有使用，并且没有方法改变他，那么他就会找到父类函数去执行，返回的值是父类函数计算后的值
不允许任何数值写在super前面

4.工厂模式

   //一个场景什么角色显示什么页面 管理员 对应【主页，编辑页，删除页】vip 【主页，编辑】 游客【主页】class User {constructor(role) {this.role = role}static lookPage(role) {switch (role) {case "admin":return { name: 'admin', page: ['主页', '编辑页', '删除页'] }break;case "vip":return { name: 'vip', page: ['主页', '编辑页'] }break;case "editor":return { name: 'editor', page: ['主页'] }break;default:throw new Error('数据错误')}}}// let admin = new User('vip')// console.log(admin.lookPage());//静态方法的调用let admin =User.lookPage('vip')console.log(admin);//name: 'vip', page: Array(2)