首页
学习
活动
专区
圈层
工具
发布

设计模式(3)-JavaScript中的构造函数模式是什么?

1 什么是构造函数模式 构造函数用于创建特定类型的对象一不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。...你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法。在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概,但是有特殊的构造函数。...通过new关键字来调用自定义的构造函数,在构造函数内部,this关键字引用的是新创建的对象。 2 构造函数模式的作用和注意事项 2.1 模式作用 1.用于创建特定类型的对象。...__proto__ = Person.prototype; 3 将步骤1新创建的对象作为this的上下文 ;//Person.call(o); 3 执行构造函数中的代码(为这个新对象添加属性); 4...true console.log(xiaoMing instanceof Person);//true console.log(xiaoMing instanceof Object);//true 4 构造函数模式与单例模式结合

1.2K41

【前端】深入对比 JavaScript 中的工厂模式与自定义构造函数模式

前言 在 JavaScript 编程领域,对象的创建是一个至关重要的需求,不同的场景和需求决定了采用何种创建对象的方式。在这其中,工厂模式与自定义构造函数模式是两种经典的对象创建方法。...本文旨在对比分析工厂模式与自定义构造函数模式的概念、实现方式、适用场景以及各自的优劣之处,以便开发者能够根据具体需求选择最佳的对象创建策略。...它的设计灵感来源于现实生活中的“工厂”:工厂生产各种产品,而工厂函数则生产具有类似结构的对象。 在 JavaScript 中,工厂模式通过一个函数封装对象的创建逻辑,并返回新对象。...工厂模式与构造函数模式的对比 3.1 对象创建的方式 工厂模式:通过调用一个普通函数创建对象,函数内部手动创建对象并返回。...小结 在 JavaScript 中,工厂模式与构造函数模式是两种经典的对象创建方法。如何选择取决于具体需求: 工厂模式 提供了一种简单快捷的对象创建方式,特别适合快速开发和无需类型判断的场景。

12710
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript的构造函数

    在Java语言中,我们使用构造函数是实例化对象的过程,在JavaScript语言中我们可以使用构造函数的方式创建对象,如: let obj = new LanguageFun("javaScript")...与面向对象的语言不同,JavaScript使用构造函数创建对象不是真正意义上的实例化,而是通过new操作符调用的构造函数。...构造函数的执行过程: 1. 创建一个新的对象obj 2. obj被执行原型链[[prototype]]连接 3. obj绑定到函数调用的this上 4....没有其他返回对象,则返回obj 包括我们知道的内置函数Number(), String()都可以使用new操作符创建新的对象,这种函数在JavaScript中称为构造函数的调用。...,产生异常,所以我们需要对JavaScript的构造函数进行兼容改造。

    1.3K70

    【说站】JavaScript中构造函数是什么

    JavaScript中构造函数是什么 1、又称伪造对象或借用构造函数,在子类型构造函数内部调用超类型构造函数。 2、函数只是在特定环境下执行代码的对象。...因此,通过apply()和call()方法,构造函数可以在新对象上执行。 即在子类型对象上执行父类型函数中定义的所有对象的初始化代码。结果每个子类实例都有父类型中的属性和方法,不是继承,而是调用。...this.name = name;     this.name = age; } function Dog(name,age,color){     Animal.call(this,name,age);//子类中调用父类构造函数...{ name: 2, color: 'white' } 以上就是JavaScript中构造函数的介绍,希望对大家有所帮助。...更多Javascript学习指路:Javascript 推荐操作环境:windows7系统、jquery3.2.1版本,DELL G3电脑。

    63520

    javascript中常用的创建对象的方法工厂模式构造函数模式原型模式混合使用构造函数模式和原型模式小结

    实际上,js在使用构造函数模式创建对象的过程中有以下的几个步骤: 创建一个新对象 将对象的作用域赋给新对象 调用构造函数中的代码为属性和方法赋值 返回新对象 其中,我们发现js帮我们封装了1,2,4等步骤...但原型模式,显然存在一个问题就是,并不是所有东西都是共享的,所以实际中,我们常常将原型模式与工厂模式或者构造函数模式结合起来。联合使用。对于那些需要共享的属性和方法,我们就把它加入到原型对象中。...** 需要注意的是,如果实例对象和原型对象中的存在相同的属性和方法,那么js会先从实例中搜寻,如果找到了就忽略原型对象中的,如果在实例中没有找到,就继续到原型中寻找 ** 混合使用构造函数模式和原型模式...创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。...,工厂模式,构造函数模式,原型模式,构造函数模式和原型模式的组合使用。

    1.5K30

    js 中的构造函数,构造函数作用,构造函数和普通函数的区别

    构造函数 在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。构造函数首字母一般大写(规范)。...之所以有构造函数与普通函数之分,主要从功能上进行区别的,构造函数的主要 功能为 初始化对象,特点是和new 一起使用。new就是在创建对象,从无到有,构造函数就是在为初始化的对象添加属性和方法。...普通函数的调用方式:直接调用 person(); 构造函数的调用方式:需要使用new关键字来调用 new Person(); 3、构造函数的函数名与类名相同:Person( ) 这个构造函数,Person...(ES6 中 class 与构造函数的关 系,通过class定义的类 和通过构造函数定义的类 二者本质相同。并且在js执行时,会将第一种转会为第二种执行。...所以 ES6 class的写法实质就是构造函数) 4、内部用this 来构造属性和方法 5、构造函数的执行流程 A、立刻在堆内存中创建一个新的对象 B、将新建的对象设置为函数中的this C、

    4.8K10

    JavaScript原型链继承与盗用构造函数继承

    原型链继承 原型链继承是js中的主要继承方式,它的基本思想就是通过原型继承多个引用类型的属性和方法。...这个赋值重新更改了SUbType的最初原型,替换成了SuperType实例。这样意味着SuperType实例可以访问所有的属性和方法也存在与SubType.protoype。...盗用构造函数 盗用构造函数有时候也被一些人叫做“对象伪装”或“经典继承”。这个思路很简单,在字类构造函数中调用父类构造函数。我们可以用.call()和.apply()将父类构造函数引入子类函数。...,通过使用call()(也可以使用apply()),SuperType构造函数在为SubType的实例创建的新对象执行后,相当于新的SubType对象运行了SuperType()函数中的所有初始化代码。...所以会在 SubType 的实例上定义 name 属性。我们也可以访问到这个属性的值。 盗用构造函数也有一定的问题 1、只能继承父类构造函数的属性。 2、无法实现构造函数的复用。

    56920

    JavaScript OOP(一)之构造函数与new命令

    典型的oop语言,如hava、c++,存在着类的概念,类就是对象的模板 (类可以类比为人类;而实例化类后变为对象,对象可以类比为男人;其实男人还可以作为一个类,小明是男人这个类的实例化对象) 而在JavaScript...语言中,构造函数充当着对象的模板作用 JavaScript对象体系,是基于“构造函数”(constructor)和“原型对象”(prototype)的,不是基于类 使用构造函数和new示例: 1 var...为了避免出现不加new调用构造函数的情况:1.使用严格模式;2.构造函数内部对this的指向进行判断 1 //避免出现不加new情况,使用'use strict'; 2 //在严格模式下,函数内部this...构造函数中存在return语句:ruturn对象,那么new 返回return的这个对象;否则return无效,返回this 1 console.log('---'); 2 function Ele...普通函数使用new调用:生成空对象 //注意与普通函数进行区分;普通函数:内部没有this关键字、函数名一般以小写开头 function fire(){ var s='this is a test

    61070

    Dart 中的命名构造函数和常量构造函数

    它们与默认构造函数不同,因为你可以给它们提供自己定义的名称,这样就可以根据需要为类创建多个不同的构造函数。 1.1 命名构造函数的基本语法 命名构造函数的语法是在类的构造函数名称后面使用 ....1.3 命名构造函数与默认构造函数的组合 你可以在一个类中同时使用默认构造函数和命名构造函数。默认构造函数通常用来进行基本的初始化,而命名构造函数可以用于处理更特殊的初始化场景。...命名构造函数可以与默认构造函数一起使用,也可以使用初始化列表来进一步简化代码。 命名构造函数的优点包括: 允许同一类拥有多个不同的构造函数,适应不同的初始化需求。...2.1 常量构造函数的语法 常量构造函数的定义与普通构造函数相似,区别在于构造函数前加上了 const 关键字。...2.4 常量构造函数与 final 关键字的关系 在常量构造函数中,所有的字段必须是 final 类型,因为常量对象的状态在创建后不可改变。final 表示一旦赋值后,字段值不能被修改。

    1.1K20

    JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)

    一、动态原型模式 在面向对象学习六中的随笔中,了解到组合构造函数模式和原型模式创建的自定义类型可能最完善的!但是人无完人,代码亦是如此!...动态原型模式将所有的信息都封装在构造函数中(包括原型和实例属性),通过在构造函数中实例化原型(仅在必要的情况下)实现封装,又保持了同时使用构造函数和原型的优点。...,当前面的随笔中的模式都不适用的情况下,可以使用寄生构造函数模式。...然后分析其与工厂模式的区别: 1、寄生模式创建对象时使用了New关键字 2、寄生模式的外部包装函数是一个构造函数 除了上面这2个区别寄生模式和工厂模式几乎一样,构造函数在不返回值的情况下,默认返回对象的新实例...三、稳妥构造函数模式 道格拉斯 *  克罗克福德 发明了JavaScript中的稳妥对象这个概念.所谓稳妥对象,指的是没有公共属性,而且其方法也不引用this的对象。

    1.2K100

    JavaScript 模式》读书笔记(3)— 字面量和构造函数3

    这是字面量和构造函数的最后一篇内容,其中包括了JSON、正则表达式字面量,基本值类型包装器等知识点。也是十分重要的哦。 五、JSON JSON是指JavaScript对象表示以及数据传输格式。...它是一种轻量级数据交换格式,且可以很方便地用于多种语言,尤其是在JavaScript中。...中的正则表达式也是对象,可以用两种方法创建:     1、使用new RegExp()构造函数。     ...最后要说明的是,调用RegExp()时不使用new的行为与使用new的行为时相同的。 七、基本值类型包装器 JavaScript有五个基本的值类型:数字、字符串、布尔、null和undefined。...() }   错误构造函数以函数的形式调用(不带new)时,其表现行为与构造函数(带new)相同,并且返回同一个错误对象。

    71620

    《JavaScript 模式》读书笔记(3)— 字面量和构造函数1

    来自构造函数的对象 我们先来看一下,如何创建一个对象: // 第一种方法:使用字面量: var car = {goes:'far'}; // 另一种方法:使用内置构造函数-这是一个反模式,不要应用...与使用object构造函数相对,使用字面量的另一个原因在于它并没有作用域解析。...二、自定义构造函数 除了对象字面量模式和内置的构造函数以外,可以使用自己的构造函数来创建对象: var adam = new Person("Adam"); adam.say();   这里的Person...如果在构造函数中并不向this添加任何属性,将返回“空”对象(这里的空,指的是除了从构造函数的原型中所继承的成员以外)。   构造函数将隐式返回this,甚至于在函数中没有现实的加入return语句。...可以在构造函数中自由的返回任意对象,只要它是一个对象。

    65520

    《JavaScript 模式》读书笔记(3)— 字面量和构造函数1

    来自构造函数的对象 我们先来看一下,如何创建一个对象: // 第一种方法:使用字面量: var car = {goes:'far'}; // 另一种方法:使用内置构造函数-这是一个反模式,不要应用...与使用object构造函数相对,使用字面量的另一个原因在于它并没有作用域解析。...二、自定义构造函数 除了对象字面量模式和内置的构造函数以外,可以使用自己的构造函数来创建对象: var adam = new Person("Adam"); adam.say();   这里的Person...如果在构造函数中并不向this添加任何属性,将返回“空”对象(这里的空,指的是除了从构造函数的原型中所继承的成员以外)。   构造函数将隐式返回this,甚至于在函数中没有现实的加入return语句。...可以在构造函数中自由的返回任意对象,只要它是一个对象。

    29530

    《JavaScript 模式》读书笔记(3)— 字面量和构造函数3

    五、JSON JSON是指JavaScript对象表示以及数据传输格式。它是一种轻量级数据交换格式,且可以很方便地用于多种语言,尤其是在JavaScript中。...中的正则表达式也是对象,可以用两种方法创建:     1、使用new RegExp()构造函数。     ...也就是说,如果在一个循环中创建了相同的正则表达式,那么后面返回的对象与前面创建的对象相同,并且所有的属性都将被设置为第一次的值。这种行为已经在ES5中得到了改变,并且字面量会创建新的对象。   ...最后要说明的是,调用RegExp()时不使用new的行为与使用new的行为时相同的。 七、基本值类型包装器 JavaScript有五个基本的值类型:数字、字符串、布尔、null和undefined。...() }   错误构造函数以函数的形式调用(不带new)时,其表现行为与构造函数(带new)相同,并且返回同一个错误对象。

    59940

    JavaScript 模式》读书笔记(3)— 字面量和构造函数2

    上一篇啊,我们聊了聊字面量对象和自定义构造函数。这一篇,我们继续,来聊聊new和数组字面量。 三、强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用。...,构造函数中隐式的返回this,并且我们可以获取到原型链上的方法。...另一种用于检测实力对象的通用方法是将其与arguments.callee进行比较,而不是在代码中硬编码构造函数名称: if(!...四、数组字面量 JavaScript中的数组与语言中的绝大多数事物比较相似,即都是对象。当然,数组也同样可以通过内置的构造函数Array()来创建,但是极其不推荐这种做法。...为此,也没有必要通过引入构造函数以及使用new操作符使得事情变得复杂。 数组构造函数的特殊性 避开new Array()的另一个理由是用于避免构造函数中可能产生的陷阱。

    54930

    《JavaScript 模式》读书笔记(3)— 字面量和构造函数2

    三、强制使用new的模式 要知道,构造函数,只是一个普通的函数,只不过它却是以new的方式调用。如果在调用构造函数时忘记制定new操作符会发生什么?...,构造函数中隐式的返回this,并且我们可以获取到原型链上的方法。...另一种用于检测实力对象的通用方法是将其与arguments.callee进行比较,而不是在代码中硬编码构造函数名称: if(!...四、数组字面量 JavaScript中的数组与语言中的绝大多数事物比较相似,即都是对象。当然,数组也同样可以通过内置的构造函数Array()来创建,但是极其不推荐这种做法。...为此,也没有必要通过引入构造函数以及使用new操作符使得事情变得复杂。 数组构造函数的特殊性 避开new Array()的另一个理由是用于避免构造函数中可能产生的陷阱。

    36930
    领券