js中常见的4种创建对象方式与优缺点

目录
  • 前言
  • 1、工厂模式
  • 2、构造函数模式
  • 3、原型模式
  • 4、Object.create()
  • 其他模式
  • 总结

前言

说起创建对象，最容易想到的便是通过对象字面量方式直接定义一个对象吧，但这种方式只能创建少量，单独且相互间无联系的对象。若要批量创建对象，该如何？

1、工厂模式

实现：

function fn(a,b){
    let obj = new Object()
    obj.a=a
    obj.b=b
    return obj
}

const test = fn(1,2)

优点：解决了创建多个类似对象的问题

缺点：没解决对象标识问题（即新建对象是什么类型）

2、构造函数模式

实现：

function Fn(a,b){
    this.a=a
    this.b=b
    this.c=function(){
          console.log(this.a)
    }
}

const test1 = new Fn(1,2)
const test2 = new Fn(1,2)
console.log(test1.c === test2.c)// false

优点：new隐式创建对象，写法简洁

缺点：构造函数定义的方法会在每个实例上都要创建一遍（除非该方法声明提到全局）

3、原型模式

实现：

function Fn(a,b){
    Fn.prototype.a=a
    Fn.prototype.b=b
    Fn.prototype.c=function(){
          console.log(a)
    }
}

const test = new Fn(1,2)

优点：构造函数中定义的属性和方法都可以被对象实例共享

缺点：原型上的属性值如果是引用值，该值会在创建后的实例之间被污染，如下

function Fn(){
    Fn.prototype.a=[1,2]
}

const test1 = new Fn()
const test2 = new Fn()
test1.a.push(3)
console.log(test1.b, test2.b)// [1,2,3] [1,2,3]
const test3 = new Fn()// 原型上属性会重新赋值
console.log(test1.b, test2.b,test3.b)// [1,2] [1,2] [1,2]

4、Object.create()

实现：

const obj = { a:1 , b:2 }

const test = Object.create(obj)
console.log(test.a)// 1

优点：通过一个对象构造另一个对象

缺点：构造过程是浅克隆，共享的引用值依旧存在被污染问题

其他模式

除了以上几种常见的模式外，批量创建对象的方式还有

  • 动态原型模式：仅在第一次调用构造函数时，将方法赋给原型对象的相应属性，其他示例的处理方式同构造函数模式
  • 寄生构造函数模式：仅仅封装创建对象的代码，然后再返回新创建的对象，仍使用new操作符调用
  • 稳妥构造函数模式：没有公共属性，只有私有变量和方法，以及一些get/set方法，用以处理私有变量。

总结

到此这篇关于js中常见的4种创建对象方式与优缺点的文章就介绍到这了,更多相关js常见创建对象方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解JavaScript对象转原始值

    目录 Object.prototype.valueOf() Object.prototype.toString() Symbol.toPrimitive 对象转换原始值 1. 预期被转换成字符串类型 2. 预期被转换成数字类型 3. 预期被转换成默认类型(其他) 三种方法触发的顺序 总结 Object.prototype.valueOf() 对象的valueOf旨在返回对象的原始值,会在需要将对象转换成原始值的地方自动执行.详细点这里. Object.prototype.toString() t

  • JavaScript 对象不变性介绍

    目录 1. 基本概念 2. Object.freeze() 3. Object.seal() 4. const关键字? 5. 总结 1. 基本概念 对象不变性在任何编程语言中都是一个重要的概念.它会限制对象修改并防止不需要的更改.简而言之,对象的不变性就是将它的状态变为只读的,下面就来看看在 JavaScript 中的对象不变性.​ 在JavaScript中,一个对象可以有一个或多个属性.每个属性都是一个键值对, 下面是一个对象: const user = {     name: 'CUGGZ'

  • JavaScript内置对象介绍

    JavaScript内置对象介绍

    目录 一.内置对象 二.Math对象 1.Math对象的使用 2.生成指定范围的随机数 三.日期对象 1.Date()方法的使用 2.日期对象的使用 3.获取时间戳 四.数组对象 1.数组对象的创建 2.检测是否为数组 3.添加删除数组元素的方法 4.数组排序 5. 数组索引方法 6.数组转换为字符串 五.字符串对象 1.根据字符返回位置 2. 根据位置返回字符 3. 字符串操作方法 4.split()方法 一.内置对象 内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一

  • js中常见的4种创建对象方式与优缺点

    目录 前言 1.工厂模式 2.构造函数模式 3.原型模式 4.Object.create() 其他模式 总结 前言 说起创建对象,最容易想到的便是通过对象字面量方式直接定义一个对象吧,但这种方式只能创建少量,单独且相互间无联系的对象.若要批量创建对象,该如何? 1.工厂模式 实现: function fn(a,b){ let obj = new Object() obj.a=a obj.b=b return obj } const test = fn(1,2) 优点:解决了创建多个类似对象的问题

  • js中常见的6种继承方式总结

    目录 前言 1.原型继承 2.盗用构造函数 3.组合继承 4.原型式继承 5.寄生式继承 6.寄生式组合继承 总结 前言 js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 温馨提示:本文中Super函数都是指父类,Sub函数都是代表子类.同时文中会涉及到“构造函数模式”和“工厂模式”,如果不熟悉的小伙伴,可以先看看这篇介绍 js常见的4种创建对象方式. 1.原型继承 实现: fu

  • JavaScript中常见的几种继承方式

    JavaScript中常见的几种继承方式

    目录 原型继承 内存图 分析 盗用构造函数继承 分析 组合继承 原型链继承 寄生式继承 寄生组合式继承 原型继承 function Parent(name) { this.name = name } Parent.prototype.getName = function(){ return 'parentPrototype' + ' ' + this.name; } function Son() { } Son.prototype = new Parent(); console.log(new

  • 浅谈js中的三种继承方式及其优缺点

    第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = 'yellow'; this.view = function(){ return this.hair + ',' + this.eye + ',' + this.skin; } } //子类 function man(){ this.feature = ['beard','strong']; } man.pr

  • JS中常见编码及加密方式解析

    JS中常见编码及加密方式解析

    目录 base64 Md5 AES AES的三要素 AES工作模式区别 AES的加密流程 JS-AES.base64.SHA256.RSA等加解密库 AES的特点.特征 Ascii码 DES base64 #特征:结尾可能有"=="号 #编码 # 想将字符串转编码成base64,要先将字符串转换成二进制数据 url = "https://www.cnblogs.com/songzhixue/" bytes_url = url.encode("utf-8&q

  • Node.js中参数传递的两种方式详解

    目录 参数传递方式 GET方式 POST方式 动态网页 参数传递方式 在Node.js中,参数传递常见的共两种方式: GET方式:通过地址栏键=值的方式进行传递. POST方式:通过表单的方式传递请求数据. GET方式 GET方式通常是在请求地址中以[?参数1=值1&参数2=值2]的格式进行传递,在Node.js中可以通过获取url然后进行获取参数,如下所示: //1.引入http模块 var http = require('http'); //2.创建服务 var server = http.

  • appium中常见的几种点击方式

    目录 1.最常见的点击方式click()方法 2.手指轻敲屏幕操作tap()方法 3.手指按下操作press()方法 4.模拟手指长按操作long_press()方法 首先从appium库里面导入webdriver,然后webdriver.Remote()声明driver对象.想要使用TouchAction,必须要创建TouchAction对象,通过对象调用想要执行的手势,通过perform()执行动作. #导入TouchAction from appium.webdriver.common.t

  • js中常见切割截取字符串的几种方法小结

    目录 1. split() 方法用于把一个 字符串 分割成 字符串数组 : 2. slice() 可提取字符串的某个部分,并以新的字符串返回被提取的部分: 3.substring() 提取字符串中介于两个指定下标之间的字符 4.join() 把数组中的所有元素转换一个字符串 5. charAt() 返回指定位置的字符 总结 切割截取字符串的几种方法 1. split() 方法用于把一个 字符串 分割成 字符串数组 : stringObject.split(str,length) var str

  • 基于Python中单例模式的几种实现方式及优化详解

    单例模式 单例模式(Singleton Pattern)是一种常用的软件设计模式,该模式的主要目的是确保某一个类只有一个实例存在.当你希望在整个系统中,某个类只能出现一个实例时,单例对象就能派上用场. 比如,某个服务器程序的配置信息存放在一个文件中,客户端通过一个 AppConfig 的类来读取配置文件的信息.如果在程序运行期间,有很多地方都需要使用配置文件的内容,也就是说,很多地方都需要创建 AppConfig 对象的实例,这就导致系统中存在多个 AppConfig 的实例对象,而这样会严重浪

  • JS高级ES6的6种继承方式

    JS高级ES6的6种继承方式

    目录 1.原型链继承 2.借助构造函数继承 3.组合式继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承 前言: 继承是面向对象中老生常谈的一个内容,在ECMAScript6之前,JavaScript中的继承可谓是非常的繁琐的,有各种各样的继承,本质上所有的继承都是离不开原型链的,ES6新增的extends关键字也是通过原型链实现的继承,但是语法相对来说就简单了很多. 关于原型链的内容,可以参考上篇文章两张图搞懂原型链 本篇文章就来介绍一下在ECMAScript6之前是怎么实现继承的. 1

随机推荐