返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript有哪些创建对象的方式
  • 700
分享到

JavaScript有哪些创建对象的方式

2024-04-02 19:04:59 700人浏览 安东尼
摘要

这篇文章主要为大家展示了“javascript有哪些创建对象的方式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript有哪些创建对象的方式”这篇文

这篇文章主要为大家展示了“javascript有哪些创建对象的方式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript有哪些创建对象的方式”这篇文章吧。

1 创建对象

1.1 一般方法

使用Object或者采用对象字面量的方法。

var o = {a: 1};
var o2=new Object();
o2.a=1;

缺点:使用同一个接口创建很多对象,会产生大量重复的代码。

1.2工厂模式

function parent(name,age){
  var Child = new Object();
  Child.name=name;
  Child.age=age;
  Child.sayHi=function(){
    console.log("Hi");
  }
  return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

函数parent能够根据接受的参数来构建一个包含所有必要信息的child对象。可以无限次调用这个函数,都会返回一个包含两个属性和一个方法的对象。

解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。

1.3构造函数模式

对于构造函数这个名字,学过java或者c++的同学应该都是知道的,在js里也是差不多的。

用构造函数将上面的例子重写如下:

function Parent(name,age){
  this.name=name;
  this.age=age;
  this.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

对于构造函数,我们需要在调用的时候加关键字 new。要注意的是,构造函数始终是以一个大写字母开头,而非构造函数始终是以一个小写字母开头。

与工厂模式相比,主要有以下几个不同之处:

  • 没有显示地创建对象;

  • 直接将属性和方法赋给了this对象;

  • 没有return语句。

缺点:使用构造函数的缺点就是每个方法都需要在每个实例上重新创建一遍。

1.4原型模式

我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性与方法。使用原型对象的好处是可以让所有的对象实例共享其包含的属性与方法。

function Parent(name,age){
  Parent.prototype.name=name;
  Parent.prototype.age=age;
  Parent.prototype.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

缺点:优点就是其缺点,方法属性都可以共享。具体可以看下面这个例子

function Parent(name,age){
  Parent.prototype.name=name;
  Parent.prototype.age=age;
  Parent.prototype.arr=["123","we"];
  Parent.prototype.sayHi=function(){
    console.log("Hi");
  };
}
var x = new Parent("Tom",12);
var y = new Parent("Tom1",12);
x.arr.push("x");
y.arr.push("y");
console.log(x.arr);//["123", "we", "x", "y"]
console.log(y.arr);//["123", "we", "x", "y"]

对象x修改自己的属性,竟然会影响到y对象;同理,对y也一样。这个明显就很不合理啊,太可怕了!

1.5组合使用构造函数模式和原型模式

function Parent(name,age){
  //只把属性留在这里定义,方法放在原型对象中
  this.name=name;
  this.age=age;
}
//第一种方式
Parent.prototype.sayHi=function(){
  console.log("Hi");
};
//第二种方式
//由于采用对象字面量,因此必须修正其constructor属性;
Parent.prototype={
  constructor:Parent,
  sayHi:function(){
    console.log("Hi");
  }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

在这个例子中,实例属性都是在构造函数中定义的,而由所有实例共享的属性constructor和方法则是在原型中定义的。

是目前使用最广泛、认同度最高的一种创建自定义类型的方法。

--------------------------感觉后面几种方法有些变态了--------------------------------

1.6 动态原型模式

function Parent(name,age){
  this.name=name;
  this.age=age;
  if( typeof this.sayHi !="function"){
    Parent.prototype.sayHi=function(){
      console.log("Hi");
    };
  }
}
var x = new Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

先检查某个应该存在方法是否有效再来决定是否需要初始化原型。

1.7寄生构造函数模式

当前面几种都不适用的情况下,可以使用寄生构造函数模式。这种函数的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象。

function parent(name,age){
  var Child = new Object();
  Child.name=name;
  Child.age=age;
  Child.sayHi=function(){
    console.log("Hi");
  }
  return Child;
};
var x = Parent("Tom",12);
console.log(x.name); //Tom
x.sayHi(); //Hi

但是其实就是和工厂模式一模一样,你TM在逗我吗?????

1.8稳妥构造函数模式

稳妥构造函数遵循与寄生构造函数模式类似的模式,但有两点不同:一是新创建对象的实例方法不引用this; 二是不使用new操作调用构造函数。

function Parent(name,age){
  var o=new Object();
   //私有变量或者方法
  var name=name,
    age=age;
  o.sayName=function(){
     //name前面没有this
    console.log(name+" "+age)
  }
  return o;
}
var x = Parent("Tom",12);
x.sayName(); //Tom 12

变量x中保存的是一个稳妥对象,而除了调用sayName()方法外,没有别的方式可以访问其数据成员。

以上是“JavaScript有哪些创建对象的方式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: JavaScript有哪些创建对象的方式

本文链接: https://lsjlt.com/news/72767.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript创建对象方式有哪些
    这篇文章主要讲解了“JavaScript创建对象方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript创建对象方式有哪些”吧!1. 工...
    99+
    2024-04-02
  • JavaScript有哪些创建对象的方式
    这篇文章主要为大家展示了“JavaScript有哪些创建对象的方式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript有哪些创建对象的方式”这篇文...
    99+
    2024-04-02
  • JavaScript创建对象的方式有哪些
    小编给大家分享一下JavaScript创建对象的方式有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式...
    99+
    2024-04-02
  • 创建JavaScript对象的方式有哪些
    这篇文章主要介绍“创建JavaScript对象的方式有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“创建JavaScript对象的方式有哪些”文章能帮助大家解决...
    99+
    2024-04-02
  • javascript中有哪些创建对象方式
    这篇文章主要为大家展示了“javascript中有哪些创建对象方式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“javascript中有哪些创建对象方式”这篇文...
    99+
    2024-04-02
  • 在JavaScript中创建对象的方式有哪些
    这篇文章主要介绍了在JavaScript中创建对象的方式有哪些,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:JavaScript的特点1.JavaScript主要用来向HTML页面添加交...
    99+
    2023-06-06
  • javascript有哪些创建对象的方法
    javascript有哪些创建对象的方法?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。方法是:1、使用内置对象,JavaScript语言原生对象或运行期的宿主对...
    99+
    2023-06-15
  • java创建对象的方式有哪些
    在Java中创建对象的方式有以下几种:1. 使用 `new` 关键字:通过使用 `new` 关键字,可以实例化一个类,并在内存中分配...
    99+
    2023-09-13
    java
  • c++创建对象的方式有哪些
    在C++中,创建对象的方式有以下几种:1. 使用new关键字创建对象,这将在堆上分配内存空间。```MyClass* obj = n...
    99+
    2023-08-16
    c++
  • JS创建对象的方法有哪些
    这篇文章将为大家详细讲解有关JS创建对象的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。第一种:Object构造函数创建var Person ...
    99+
    2024-04-02
  • Java创建对象的方法有哪些
    本篇内容介绍了“Java创建对象的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1 简介Java...
    99+
    2024-04-02
  • java创建对象方法有哪些
    java中创建对象方法有:1.使用new关键字创建;2.使用Class类创建;3.使用构造函数创建;4.使用反序列化创建;java中创建对象方法有以下几种使用new关键字创建public class Test {public static ...
    99+
    2024-04-02
  • java创建对象的方式有哪几种
    在Java中,可以通过以下几种方式创建对象:1. 使用new关键字:通过使用new关键字,可以调用类的构造方法实例化一个对象。例如:...
    99+
    2023-10-10
    java
  • javascript中有哪几种创建对象的方法
    本篇内容介绍了“javascript中有哪几种创建对象的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!...
    99+
    2024-04-02
  • JavaScript创建数组的方式有哪些
    JavaScript中创建数组的方式有:1.通过字面量创建;2.通过构造函数创建;JavaScript中创建数组的方式有以下几种通过字面量创建数组1)创建一个空数组let array = [];2)创建一个指定数据的数组let array ...
    99+
    2024-04-02
  • JavaScript创建对象的方法
    这篇文章主要讲解了“JavaScript创建对象的方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript创建对象的方法”吧! 通过 Jav...
    99+
    2024-04-02
  • Java中创建String 对象的方法有哪些
    这篇文章将为大家详细讲解有关Java中创建String 对象的方法有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。创建 String 对象有三种方法String s1="我是字...
    99+
    2023-05-31
    java string ava
  • JavaScript创建对象的方式举例分析
    这篇文章主要介绍“JavaScript创建对象的方式举例分析”,在日常操作中,相信很多人在JavaScript创建对象的方式举例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript创建对象的...
    99+
    2023-06-17
  • Javascript有哪些对象
    小编给大家分享一下Javascript有哪些对象,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript 对象Java...
    99+
    2024-04-02
  • javascript file对象有哪些方法
    这篇文章主要介绍“javascript file对象有哪些方法”,在日常操作中,相信很多人在javascript file对象有哪些方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作