js的常用设计模式

Janna69049
218 阅读3分钟

在我们编写代码的过程中，如果我们考虑使用一些设计模式，可以使我们的代码更加具有可读性和健壮性。接下来整理一些js常用的设计模式：

一、工厂模式

使用简单的函数创建对象，为对象添加属性和方法，然后返回对象

function createPerson(name,age,job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    }
    return o; // 这里将对象return回来
}
var person1 = createPerson("Nicholas",29,"Software Engineer");
var person2 = createPerson("Greg",27,"Dector");

二、构造函数模式

可以创建自定义引用类型，可以像创建内置对象实例一样使用new操作符。由于函数不局限于任何对象，（即在对象具有松散耦合的特点），因此没有理由不在多个对象间共享函数

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.age = age;
    this.sayName = function(){
        alert(this.Name);  
    };
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Grep",27,"Doctor");

以上两者的不同之处在于：

  • 1、构造函数没有显式地创建对象；
  • 2、构造函数直接将属性和方法赋给this对象
  • 3、构造函数没有return语句 调用构造函数创建实例会经历以下过程：
  • 1、创建一个对象；
  • 2、将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
  • 3、执行构造函数中的代码（为这个新对象添加属性）
  • 4、返回新对象。 注意：以这种方式定义的构造函数是定义在Global对象（在浏览器中是window对象）中的

三、原型模式

  • 原因：每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，用途是包含可以由特定类型的所有实例共享的属性和方法。
  • prototype是通过调用构造函数而创建的那个对象实例的原型对象。
  • 特点：使用构造函数的prototype来指定那些应用共享的属性和方法。组合使用构造函数模式和原型模式时，使用构造函数定义实例属性，而使用原型定义共享的属性和方法。
function Person(){
}

Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
    alert(this.name);
}
var person1 = new Person();
person1.sayName();

var person2 = new Person();
person2.sayName();
alert(person1.sayName == person2.sayName); //true Person.prototype.constructor指向Person.

四、组合使用构造函数模式和原型模式

里面既有构造函数的定义对象模式，也有使用prototype的原型形式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby","Court"];
}

Person.prototype ={
    constructor:Person,
    sayName:function(){
        alert(this.name);
    }
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Grep",27,"Doctor");

person1.friends.push("Van");

五、动态原型模式

function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.job = job;
    if(typeof this.sayName != "function"){ // 这里体现了动态
        Person.prototype.sayName = function(){
            alert(this.name);
        };
    }
}
var friend = new Person("Nicholas",29,"Software Engineer");
firend.sayName();

六、寄生构造函数模式

返回的对象与构造函数或者与构造函数的原型属性之间没有关系；也就是说，构造函数返回的对象与在构造函数外部创建的对象没有什么不同。

function Person(name,age,job){
    var o = new Object();
    o.name = name;
    o.age =age;
    o.job = job;
    o.sayName = function(){
        alert(this.name);
    };
    return o;
}

var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();

七、稳妥构造函数模式

没有公共属性，其方法也不引用this的对象

function Person(name,age,job){
    //创建要返回的对象
    var o = new Object();
    //添加方法
    o.sayName = function(){
        alert(name);
    }
    //返回对象
    return o;
}
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();

以上，就是常用的7种js设计模式

avatar
文章
阅读
粉丝