JavaScript的四种设计模式

发布于:2023-01-11 ⋅ 阅读:(401) ⋅ 点赞:(0)

工厂类模式

从var person=new Object()可以看出由工厂类创建的实例的构造函数都是大的Object

所以无法区分实例的种类

每个创建的实例的sayName方法以及属性(name,age)都是它自己私有的

优点:批量创建对象 提高代码复用率

缺点:方法冗余 无法区分种类 创建的实例都是Object的实例

var Person = function (name, age) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.sayName = function () {
    console.log(this.name);
  }
  return person
}
var p1 = Person('张三', 18)
p1.sayName()
console.log(p1);

构造函数模式

通过构造函数创建的实例对象

优点:可以批量创建对象 区分种类

缺点:方法冗余

 ****new操作符做的事情

        1.创建一个实例对象 Person的实例对象

        2.this指向person实例对象 this----p1 p2

        3.执行函数体

        4.返回person实例对象

var Person = function (name, age) {
  this.name = name,
    this.age = age,
    this.sayName = function () {
      console.log(this.name);
    }
}
var person1 = new Person('lili', 18)
var person2 = new Person('hoho', 15)
Person('ww', 19)
//调用Person函数,将实参添加至全局对象中
// 相当于global.Person()
person1.sayName()
person2.sayName()
console.log(person1.sayName === person2.sayName);//输出为 false
// 如果其他类型的实例对象如果想调用Person里面的方法
// 通过Person调用call改变Person里面this的指向
var annimal = new Object();
Person.call(annimal, '动物', 15)
annimal.sayName()

原型模式

将所有的属性和方法全部维护到原型对象中 构造函数中不存放任何属性和方法

不单独使用

如果实例中命名了于原型中同名的属性,会将原型的该属性遮蔽

当实例调用该属性是会优先访问实例拥有的属性

如果想删除实例的属性:delete person1.name

注意:会影响constructor的指向

function Person () { }
Person.prototype = {
  constructor:Person//回复指向
  name: '张三',
  age: 19,
  hobby: [],
  sayName () {
    console.log(this.name);
  }
}
var person1 = new Person()
var person2 = new Person()
console.log(person1);//输出为{}
person1.name = 'lisi'
person1.hobby.push('篮球')
console.log(person1.hobby, person2.hobby);//输出为['篮球'] ['篮球'] 
//更改引用数据类型的数据
console.log(person1);//输出为{name:'lisi'}
person1.sayName()//输出为lisi
person2.sayName()//输出为张三

关于 指向的问题:

 

组合模式

将共用的方法或者属性放在原型里面

把私有的属性放在构造函数里面

function Person (name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.firends = ['zhangsan', 'lisi'];
}
Person.prototype = {
  constructor: Person,
  sayName: function () {
    console.log(this.name);
  }
};
var p1 = new Person('larry', 44, 'male');
var p2 = new Person('terry', 39, 'male');

p1.firends.push('robin');
console.log(p1.firends); // [ 'zhangsan', 'lisi', 'robin' ]
console.log(p2.firends); // [ 'zhangsan', 'lisi' ]
console.log(p1.firends === p2.firends); // false
console.log(p1.sayName === p2.sayName); // true

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到