JavaScript对象的四种创建方法

目录
  • 前言
  • 1. 基于对象字面量
  • 2. 利用new Object方式创建对象
  • 3. 基于构造函数
  • 4. 基于工厂方法

前言

今天我们来学习一下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对象创建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • js中对象与对象创建方法的各种方法

    前言 不管是哪门语言,千变万化不离其宗,深入理解其本质,方能应用自如.对应到js,闭包,原型,函数,对象等是需要花费大功夫思考.理解的. 这一次我们来说一说在JavaScript中经常会用到的一个复杂基本类型,对象,先从对象的属性讲起,再讲对象的创建方法,基本涵盖了创建对象的各种方法,大家一起学习呀~ 一.对象 要掌握对象的使用及继承,首先当然需要先理解它,接下来,将会对对象的属性类型进行一个整理     1.什么是对象 对象其实是无序属性的集合,其属性可以包含基本值,对象或者函数,比如像下面这

  • JavaScript 对象创建的3种方法

    目录 1.对象字面量 2.new 关键字创建对象 3.使用 Object.create() 创建对象 4. 使用扩展操作符:... 5.使用Object.assign()方法 6.简写属性 7.简写方法 前言: 在 JavaScript中,对象是一组有属性名和属性值组成的无序集合,对象的创建可以通过对象字面量.new 关键字 和Object.create()函数来创建. 1.对象字面量 let obj = {} // 空对象 let obj2 = {a:1, b:2} let obj3 = {"

  • 详解js创建对象的几种方法及继承

    详解js创建对象的几种方法及继承

    创建对象 通过Object构造函数或对象字面量创建单个对象 这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,出现了工厂模式. 工厂模式 考虑在ES中无法创建类(ES6前),开发人员发明了一种函数,用函数来封装以特定接口创建对象的细节.(实现起来是在一个函数内创建好对象,然后把对象返回). function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.j

  • JavaScript中 创建动态 QML 对象的方法

    一.动态创建对象 有两种方法可以从 JavaScript 动态创建对象: 调用 Qt.createComponent() 动态创建 Component 对象 使用 Qt.createQmlObject() 从 QML 字符串创建对象 虽然动态创建的对象可以与其他对象一样使用,但它们在 QML 中没有 id. 1.1.动态创建组件 可以调用它的 createObject() 方法来创建该组件的一个实例.这个函数可以接受两个参数: 第一个是新对象的父对象.父对象可以是图形对象(即 Item 类型)或

  • JS使用new操作符创建对象的方法分析

    JS使用new操作符创建对象的方法分析

    本文实例讲述了JS使用new操作符创建对象的方法.分享给大家供大家参考,具体如下: 在编写js代码时,我们有时会需要使用函数来模拟java中的类,并用它来产生对象,在定义了一个构造函数之后我们需要使用new操作符来调用调用函数才能得到我们想要的对象.例如: <script> function Constructor(name){ this.name = name } var person1 = Constructor("张三");//undefined var person

  • JS创建自定义对象的六种方法总结

    JS创建自定义对象的六种方法总结

    1.创建一个 Object 实例 var person = new Object(); person.name = "rose"; person.age = 18; person.job = "actor"; person.sayName = function () { console.log(this.name); }; console.log(person); 2.对象字面量 var person = { name: "rose", age:

  • JavaScript对象的四种创建方法

    JavaScript对象的四种创建方法

    目录 前言 1. 基于对象字面量 2. 利用new Object方式创建对象 3. 基于构造函数 4. 基于工厂方法 前言 今天我们来学习一下JavaScript中关于对象的四种创建方法. 首先,我们来确定一个对象的属性和方法.比如说,我们想要我们定义一个girlFriend的对象,希望她有名字name.年龄age的属性,希望有一个getName方法,来获取名字:最后属性是一个稍微复杂的对象属性address,它具有两个属性值,所在地name和邮政编码code. 接下来,我们来通过本篇内容,来看

  • Python之字典对象的几种创建方法

    第一种方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 说明:{}为创建一个空的字典对象 第二种方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #value使用默认的None,也可以指定value值 说明:fromkeys()是dict类的一个staticmeth

  • 比较JavaScript对象的四种方式

    目录 前言 引用比较 手动比较 浅层比较 深层比较 总结 前言 比较JavaScript中的原始值非常简单.只需使用任何一种可用的相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化数据,所以比较起来比较困难.在本文中,你将学习如何正确比较JavaScript中的对象. 引用比较 JavaScript 提供了 3 种对值进行比较的方法: 严格相等运算符=== 宽松相等运算符== Object.is()

  • JavaScript 对象的四种方式比较详解

    目录 前言 1. 引用比较 2. 手动比较 3. 浅层比较 4. 深层比较 5. 总结 前言 比较 JavaScript 中的值非常简单,只需用相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化的数据,所以比较起来比较困难.在本文中,你将学习如何正确比较 JavaScript 中的对象. 1. 引用比较 JavaScript 提供了 3 种方法来对值进行比较: 严格相等运算符 === 宽松相等运算符

  • javaScript对象和属性的创建方法

    复制代码 代码如下: 1.创建一个空对象:var o =new object(); 2.创建对象直接量:    var cricle={x:0,y:0,radius:2}    var homer={                         name:"Homer Simpson",                         age:34,                         married:true,                         emai

  • JavaScript对象封装的简单实现方法(3种方法)

    本文实例讲述了JavaScript对象封装的简单实现方法.分享给大家供大家参考,具体如下: Javascript在HTML中变得越来越强大,富客户端,HTML5中的WebGL等.但是我们书写Javascript的时候往往很随意,使用对象的封装是极好的.这里介绍Javascipt三种创建对象的方法. 1. 使用关键字new创建对象 function Person(name, age) { this.name = name; this.age = age; } var p = new Person(

  • Java完全二叉树的创建与四种遍历方法分析

    Java完全二叉树的创建与四种遍历方法分析

    本文实例讲述了Java完全二叉树的创建与四种遍历方法.分享给大家供大家参考,具体如下: 有如下的一颗完全二叉树: 先序遍历结果应该为:1  2  4  5  3  6  7 中序遍历结果应该为:4  2  5  1  6  3  7 后序遍历结果应该为:4  5  2  6  7  3  1 层序遍历结果应该为:1  2  3  4  5  6  7 二叉树的先序遍历.中序遍历.后序遍历其实都是一样的,都是执行递归操作. 我这记录一下层次遍历吧:层次遍历需要用到队列,先入队在出队,每次出队的元素

  • Javascript 函数的四种调用模式

    Javascript 函数的四种调用模式 1  函数模式 最普通的函数调用 // 声明式函数 function fn1 () { console.log(this); } // 函数表达式函数 var fn2 = function() { console.log(this); }; // 调用 函数中this表示全局对象,在浏览器中就是指window fn1(); //window fn2(); //window 2 方法模式 函数依附于一个对象,是对象的一个属性,我们再调用这个函数.这种模式就

  • 浅谈JavaScript函数的四种存在形态

    函数的四种存在形态: 1.函数形态 2.方法形态 将函数赋值给某一个对象的成员,那么就称为方法 3.构造器形态 4.上下文形态 1.函数形态: var foo = function() { alert(this); //this是window }; 2.方法形态: o = {}; o.foo = foo; //将函数foo赋值给对象o的foo属性 o.foo(); //弹出的是object,此时的this表示object var lib = { test:function() { alert(t

  • JavaScript创建对象的四种常用模式实例分析

    本文实例讲述了JavaScript创建对象的四种常用模式.分享给大家供大家参考,具体如下: 这里介绍了javascript中创建对象常用的几种模式,包括:工厂模式,构造函数模式,原型模式,组合构造函数与原型的模式,动态原型模式. 一.工厂模式 看如下代码: function getMySon(name,sex){ var o={}; o.name=name; o.sex=sex; o.sayName = function(){ alert(this.name); } return o; } so

随机推荐