JavaScript中的设计模式

从明天开始好好学习前端

已于 2023-11-27 14:41:11 修改

阅读量1.2k

点赞数 43

文章标签： javascript 设计模式开发语言

于 2023-11-21 16:26:08 首次发布

本文链接：https://blog.csdn.net/l12345666777/article/details/134534624

版权

JavaScript中有四种常见的设计模式，目的是为了批量创建对象为了实现继承。

1.工厂模式

利用工厂模式批量创建对象
优点：可以批量创建对象
缺点：无法区分种类，创建实例对象都是Object实例，方法冗余

var sayName = function(){
  console.log(this.name)
};//b1001
function Person(name,age,gender){
  return {
    name:name,
    age:age,
    gender:gender,
    sayName:sayName
  }
}
var p1 = Person('terry',12,'male');
var p2 = Person('larry',18,'female');
console.log(p1,p2);
p1.sayName();
p2.sayName();
console.log(p1.sayName===p2.sayName);

function Animal(){
  return {

  }
}
var a1 = Animal();
console.log(a1);

代码运行结果如下：

2.构造函数模式

优点：可以批量创建对象可以区分种类 Person{} Animal{}
缺点：无法解决方法冗余

var sayName = function(){
  console.log(this.name)
}
function Person(name,age,gender){
  // new Object() new Array()
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayName = sayName;
}
var p1 = new Person('terry',12,'male');
var p2 = new Person('larry',18,'female');
console.log(p1,p2);
console.log(p1.sayName===p2.sayName);
p1.sayName();
p2.sayName();

function Animal(){

}
var a1 = new Animal();
console.log(a1);

构造函数中new关键字作用：

1.创建一个Person对应的实例
2.将this指向实例对象
3.执行函数体代码
4.返回实例对象

代码运行结果如下：

3.原型模式

不单独使用构造函数不做任何处理将实例所有属性和方法全部写在原型对象中

优点：可以区分种类可以批量创建对象方法不冗余

缺点：所有实例方法和属性一样

function Person(){};
Person.prototype.name = 'lisi';
Person.prototype.age = 12;
Person.prototype.gender = 'male';
Person.prototype.sayName = function(){
  console.log(this.name);
};
Person.prototype.firends = [];
var p1 = new Person();
var p2 = new Person();
console.log(p1,p2);
console.log(p1.name,p2.name,p1.sayName(),p2.sayName());
p1.firends.push('tom');
console.log(p1.firends,p2.firends);

代码运行结果如下：

4.组合模式

      构造函数模式 + 原型模式
    将实例私有属性和私有方法放在构造函数中
    将实例公共属性和公共方法放在原型对象中

function Person(name,age,gender,weight){
  // 私有属性
  this.name = name;
  this.age = age;
  this.gender = gender;
  // 私有方法
  this.weight = function(){
    console.log(weight)
  }
}
// // 公共方法
// Person.prototype.sayName = function(){
//   console.log(this.name);
// }
// // 公共属性
// Person.prototype.type = 'Person实例';
// 简化上述代码
Person.prototype = {
  // 将构造者改为Person 
  constructor:Person,
  sayName:function(){
    console.log(this.name)
  },
  type:'Person实例'
};

var p1 = new Person('terry',16,'male','40kg');
var p2 = new Person('larry',18,'female','60kg');
p1.sayName();
p2.sayName();
console.log(p1.sayName === p2.sayName,p1.type === p2.type);
console.log(p1.type,p2.type);
p1.weight();
p2.weight();
console.log(p1.weight === p2.weight);
console.log(p1.constructor,p2.constructor);

// instanceof 检测实例在不在原型链中 是否是构造函数实例
console.log(p1 instanceof Person);
console.log(p1 instanceof Object);
console.log(p1 instanceof Array);
console.log(Person instanceof Object);

function Animal(){};
console.log(Animal instanceof Object);

代码运行结果如下：