JavaScript对象的四种创建方法

 更新时间:2022年08月25日 11:01:32   作者:沈麽鬼​​​​​​​  
这篇文章主要介绍了JavaScript对象的四种创建方法,首先我们通过确定一个对象的属性和方法展开主题相关内容,需要的小伙伴可以参考一下

前言

今天我们来学习一下JavaScript中关于对象的四种创建方法。 首先,我们来确定一个对象的属性和方法。比如说,我们想要我们定义一个girlFriend的对象,希望她有名字name、年龄age的属性,希望有一个getName方法,来获取名字;最后属性是一个稍微复杂的对象属性address,它具有两个属性值,所在地name和邮政编码code。 接下来,我们来通过本篇内容,来看一下在JavaScript中可以有多少种方法创建一个这样的对象。

1. 基于对象字面量

基于对象字面量的方法,就是直接创建对象的属性及方法,也是最常用的创建对象的方法,它的优点是简单、方便,但无法进行相同对象的量产。

 /* 1.基于对象字面量 */
 let girlFriend = {
     name: "萝莉",
     age: 18,
     getName: function() {
         return this.name
     },
     address: {
         name: '北京市',
         code: '10000'
     }
 }

2. 利用new Object方式创建对象

利用Object方式创建对象,就是我们最常说的使用new Object来实现:

 // 2. 利用new Object方式创建对象
 function GirlFriend(name, age, address) {
     this.name = name
     this.age = age
     this.address = address
     this.setName = function() {
         return (this.name)
     }
 }
 //利用new 来创建对象
 var girlFriend1 = new GirlFriend("萝莉", 18, {
     name: '北京市',
     code: '10000'
 })

通过调试台运行girlFriend得出下面输出:

3. 基于构造函数

使用构造函数可以量产对象,注意第一个GirlFriend字母要大写,然后通过new GirlFriend 来实例化对象:

 // 3. 基于构造函数
 function GirlFriend(name, age, address) {
     this.name = name
     this.age = age
     this.address = address
     this.setName = function() {
         return (this.name)
     }
 }
 //利用new 来创建对象
 var girlFriend1 = new GirlFriend("萝莉", 18, {
     name: '北京市',
     code: '10000'
 })

4. 基于工厂方法

工厂方法是一种设计模式,通过封装函数来创建指定的对象,重点是抽象出创建对象时属性、函数的赋值过程,然后只对外暴露重新设置的属性值,工厂方法可以快速进行相同类型对象的量产:

 // 4.基于工厂方法
 function createGirlFriend(name, age, address) {
     let o = new Object();
     o.name = name;
     o.age = age;
     o.address = address;
     o.setName = function() {
         return this.name
     }
     return o;
 }
 let girlFriend = createGirlFriend('萝莉', 18, {
     name: '北京市',
     code: '10000'
 })

这里定义了一个createGirlFriend的工厂方法,通过参数将属性传递给内部的o对象,最后返回o。然后实例化girlFriend,获得的结果与第一种方法一样:

到此这篇关于JavaScript对象的四种创建方法的文章就介绍到这了,更多相关JavaScript对象创建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 原生js实现移动小球(碰撞检测)

    原生js实现移动小球(碰撞检测)

    这篇文章主要介绍了原生js实现会动的小球,碰撞检测功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 原生javascript实现隔行换色

    原生javascript实现隔行换色

    这篇文章主要介绍了原生javascript实现隔行换色,需要的朋友可以参考下
    2015-01-01
  • 利用uniapp开发APP时的调试/安卓打包等详解

    利用uniapp开发APP时的调试/安卓打包等详解

    uni-app​​是一个使用​​Vue.js开发所有前端应用的框架,开发者编写一套代码,下面这篇文章主要给大家介绍了关于利用uniapp开发APP时的调试/安卓打包等的相关资料,需要的朋友可以参考下
    2022-12-12
  • javascript继承机制实例详解

    javascript继承机制实例详解

    这篇文章主要介绍了javascript继承机制,以实例形式详细分析了javascript继承的原理与基于原型链的继承实现方法,具有不错的参考借鉴价值,需要的朋友可以参考下
    2014-11-11
  • Json文件格式化方法详解

    Json文件格式化方法详解

    JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器,这篇文章主要介绍了Json文件格式化方法,需要的朋友可以参考下
    2023-05-05
  • JavaScript打开客户端exe文件的代码

    JavaScript打开客户端exe文件的代码

    可以运行客户端exe文件的代码
    2008-10-10
  • 使用canvas及js简单生成验证码方法

    使用canvas及js简单生成验证码方法

    在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证码
    2017-04-04
  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    下面小编就为大家带来一篇浅谈JavaScript中面向对象的的深拷贝和浅拷贝。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js数组高阶函数之includes()方法总结

    js数组高阶函数之includes()方法总结

    JS的数组是一种特殊的对象,其特点是在值的列表中按照顺序存放值,在 JS中,数组是由中括号 [] 括起来的数值序列,本篇文章给大家介绍js数组高阶函数——includes()方法,感兴趣的朋友一起看看吧
    2023-12-12
  • 漂亮! js实现颜色渐变效果

    漂亮! js实现颜色渐变效果

    很神奇!js实现颜色渐变效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论