美文网首页
设计模式之构造函数模式

设计模式之构造函数模式

作者: AAA前端 | 来源:发表于2021-10-08 17:38 被阅读0次

定义

构造函数用于创建特定类型的对象——不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。
你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。

实现

在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数。通过new关键字来调用定义的否早函数,你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。在构造函数内部,this关键字引用的是新创建的对象。基本用法如下:

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output= function () {
        return this.model + "走了" + this.miles + "公里";
    };
}

var tom= new Car("大叔", 2009, 20000);
var dudu= new Car("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

上面的例子是个非常简单的构造函数模式,但是有点小问题。首先是使用继承很麻烦了,其次output()在每次创建对象的时候都重新定义了,最好的方法是让所有Car类型的实例都共享这个output()方法,这样如果有大批量的实例的话,就会节约很多内存。

JavaScript里函数有个原型属性叫prototype,当调用构造函数创建对象的时候,所有该构造函数原型的属性在新创建对象上都可用。
按照这样,多个Car对象实例可以共享同一个原型,我们再扩展一下上例的代码:

function Car(model, year, miles) {
    //构造函数强制使用new关键字
    if (!(this instanceof Car)) {
        return new Car(model, year, miles);
    }
    this.model = model;
    this.year = year;
    this.miles = miles;
}

/*
注意:这里我们使用了Object.prototype.方法名,而不是Object.prototype
主要是用来避免重写定义原型prototype对象
*/
Car.prototype.output= function () {
    return this.model + "走了" + this.miles + "公里";
};

var tom = new Car("大叔", 2009, 20000);
var dudu = new Car("Dudu", 2010, 5000);

console.log(tom.output());
console.log(dudu.output());

这里,output()单实例可以在所有Car对象实例里共享使用。

上面代码有强制使用new创建构造函数
通过判断this的instanceof是不是Car来决定返回new Car还是继续执行代码,如果使用的是new关键字,则(this instanceof Car)为真,会继续执行下面的参数赋值,如果没有用new,(this instanceof Car)就为假,就会重新new一个实例返回。

另外:我们推荐构造函数以大写字母开头,以便区分普通的函数

补充

不使用new的情况

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    // 自定义一个output输出内容
    this.output = function () {
        return this.model + "走了" + this.miles + "公里";
    }
}

//方法1:作为函数调用
// 如果不适用new直接调用函数的话,this指向的是全局对象window
Car("大叔", 2009, 20000);  //添加到window对象上
console.log(window.output());

//方法2:在另外一个对象的作用域内调用
var o = new Object();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output()); 

参考: 汤姆大叔的博客

相关文章

  • 设计模式之工厂方法模式

    设计模式之工厂方法模式 又称虚拟构造函数、Virtual Constructor、Factory Method 一...

  • JS常见设计模式

    常见的一些设计模式 构造函数模式(Constructor) 工厂模式(factory) 工厂模式和构造函数模式每次...

  • web前端-js设计模式

    1、写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 1、设计模式分类: 构造函数...

  • js常见设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 JS设计模式大全 构造函数模...

  • 原型链的深入理解

    创建对象之设计模式 工厂模式 构造函数模式 原型模式 这三种模式大家应该挺熟悉了,就不一一赘述了,介绍设计模式主要...

  • 从零开始学设计模式(一)——工厂模式

    工厂模式 工厂模式也被称之为虚拟构造函数(Virtual Constructor),是Java中最常用的设计模式之...

  • JavaScript

    JavaScript高级函数 惰性函数 函数柯里化 级联函数(链式函数) 设计模式 单例模式 构造函数模式 工厂模...

  • 前端面试题总结【37】:javascript对象的几种创建方式

    工厂模式 构造函数模式 原型模式 混合构造函数和原型模式 动态原型模式 寄生构造函数模式 稳妥构造函数模式 推荐:...

  • 前端设计模式

    一、6种设计模式 构造函数constructor模式 构造函数模式是创建特定类型的对象的一种模式,把私有属性绑定到...

  • 对象的创建与继承

    创建对象 工厂模式 => 构造函数模式 => 原型对象模式 => 构造函数模式+原型对象模式 工厂模式 构造函数模...

网友评论

      本文标题:设计模式之构造函数模式

      本文链接:https://www.haomeiwen.com/subject/fkbxoltx.html