目录
  1. 1. 工厂模式
  2. 2. 构造函数
    1. 2.1. instanceof
    2. 2.2. 构造函数中的方法复用问题
JavaScript工厂方法创建对象

工厂模式

工厂方法模式(FACTORY METHOD)是一种常用的类创建型设计模式,此模式的核心精神是封装类中变化的部分,提取其中个性化善变的部分为独立类,通过依赖注入以达到解耦、复用和方便后期维护拓展的目的

   /*
* 使用工厂方法创建对象
* 通过该方法可以大批量的创建对象
*/
function createPerson(name , age ,gender){
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}

/*
* 用来创建狗的对象
*/
function createDog(name , age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHello = function(){
alert("汪汪~~");
};

return obj;
}
var obj2 = createPerson("猪八戒",28,"男");
var obj3 = createPerson("白骨精",16,"女");
var obj4 = createPerson("蜘蛛精",18,"女");
//创建一个狗的对象
var dog = createDog("旺财",3);

console.log(dog);
console.log(obj4);

可以看出,使用工厂方法创建的对象,使用的构造函数都是Object,所以创建的对象都是Object这个类型,就导致我们无法区分出多种不同类型的对象,因此可以通过构造函数来进行区分,不同类型的对象

构造函数

构造函数是专门用来创建对象的函数

一个构造函数我们也可以称为一个类,通过一个构造函数创建的对象,我们称该对象时这个构造函数的实例

通过同一个构造函数创建的对象,我们称为一类对象

构造函数就是一个普通的函数,只是他的调用方式不同,普通函数是直接调用,而构造函数需要使用new关键字来调用,且构造函数习惯上首字母大写。

造函数的执行流程:

  • 调用构造函数时立刻创建一个新的对象
  • 将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
  • 逐行执行函数中的代码
  • 将新建的对象作为返回值返回
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};
}

function Dog(){

}

var per = new Person("孙悟空",18,"男");
var per2 = new Person("玉兔精",16,"女");
var per3 = new Person("奔波霸",38,"男");

var dog = new Dog();

/*console.log(per);
console.log(dog);*/

这样对不同类型的对象进行了类别的区分

instanceof

使用instanceof可以检查一个对象是否是一个类的实例

语法:

  • 对象 instanceof 构造函数
  • 如果是,则返回true,否则返回false
  • 所有的对象都是Object的后代,所以任何对象和Object左instanceof检查时都会返回true
   console.log(per instanceof Person);
console.log(dog instanceof Person);
console.log(dog instanceof Object);
console.log(per instanceof Object);

构造函数中的方法复用问题

在Person构造函数中,为每一个对象都添加了一个sayName方法,目前我们的方法是在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的sayName方法,也是所有实例的sayName都是唯一的。

这样就导致了构造函数执行一次就会创建一个新的方法,执行10000次就会创建10000个新的方法,而10000个方法都是一摸一样的,因此这是完全没有必要,完全可以使所有的对象共享同一个方法

function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
this.sayName = function(){
console.log(this.name);
};
}
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");
per.sayName();
per2.sayName();

console.log(per.sayName == per2.sayName);

此处可以发现量实例调用同样构造函数的方法是不同的

因此解决方法的复用性,实现方法的共享很有必要

function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
}

//向原型中添加sayName方法
Person.prototype.sayName = function(){
console.log("Hello大家好,我是:"+this.name);
};

//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");
per.sayName();
per2.sayName();

console.log(per.sayName == per2.sayName);

这里就能够发现此时两个方法是相同的了,实现了方法的复用

文章作者: Jachie Xie
文章链接: https://xjc5772.github.io/2020-02/16/%E5%AD%A6%E4%B9%A0/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/JS/JavaScript-factory_object/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 XJC&Blog
打赏
  • 微信
  • 支付宝

评论