【JS】js创建Object对象和构造函数的多种方法（综合示例）

最新推荐文章于 2022-09-17 23:14:45 发布
最新推荐文章于 2022-09-17 23:14:45 发布
阅读量702 收藏
点赞数
分类专栏： 6.【jquery】 3.【javascript】 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxnn520/article/details/122315840
版权

一、第1种

      var dog={name:"淘淘",color:"黄色",price:"1200元"};
      document.write(dog.name);

二、第2种

      var dog = new Object();
      dog.name="淘淘";
      dog.color="黄色";
      dog.price="100元";
      document.write(dog.name);

三、Object对象与函数的结合示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />

  </head>
  <style></style>

  <body>
    <div>js</div>
  </body>

  <script type="text/javascript">

    function dog(name,color,price)
    {
      var obj={name:name,color:color,price:price};
      console.log(obj);
      return obj;
    }

    var dog1=dog("淘淘","黄色","100元").color;
    document.write(dog1);

    var dog2=dog("淘淘","黄色","100元");
    document.write(dog2.name);


  </script>
</html>

四、在Object对象中插入函数及调用示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style></style>

  <body>
    <div>js1</div>
  </body>

  <script type="text/javascript">
    function price() {
      document.write("调用对象中的函数   | ");
      return "对象中的函数！"
    }

    var obj = { name: "ssss", color: "dddd", price: price()};
    document.write(obj.price);  /* 调用对象中的函数 */

  </script>
</html>

五、构造函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style></style>

  <body>
    <div>js1</div>
  </body>

  <script type="text/javascript">
    function price(name,old,sex) {
      this.name = name;
      this.old = old;
      this.sex = sex;
    }

    var m_price1 = new price("张飞",28,"男");
    var m_price2 = new price("孙尚香",18,"女");

    document.write(m_price1.name); /* 调用对象中的函数 */
    document.write(m_price2.name); /* 调用对象中的函数 */
  </script>
</html>

敦厚的曹操
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript工厂模式和构造函数模式创建对象方法解析
11-28
构造函数是一种特殊类型的函数，主要用于创建和初始化新对象。在示例中，`Person`函数就是一个构造函数： ```javascript function Person(name, age, job){ this.name = name; this.age = age; this.job = job; ...
详解JavaScript创建对象——构造函数模式
林木木的博客
07-26 2331
JavaScript面向对象篇——构造函数
JavaScript创建对象——构造函数
呜呜呜，好难好难
03-13 1220
JavaScript创建对象的三种方式： 利用字面量创建，对象字面量为{} 利用 new Object 创建 利用构造函数，初始化对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
javaScript对象
小戴_博客
12-30 658
目录 对象概述 创建对象的三种方式 对象字面量创建对象 对象的调用 变量、属性、函数、方法总结 利用new Object创建对象 构造函数方式创建对象 new关键字 遍历对象属性 小结 对象概述 什么是对象？ 现实生活中：万物皆对象，对象是一个具体的事物，看得见，摸得着的实物。例如：一本书、一辆汽车、一个人。一本书可以是“对象”，一个数据库、一张网页也可以是“对象”。 在javaScript中，对象是一组无序的相关属性和方法的集合。 对象是由属性和方法组成的。 属性：事物的特
javascript创建对象的方法--构造函数模式
weixin_33889245的博客
05-03 164
javascript创建对象的方法--构造函数模式 一、总结 构造函数模式作用和不足 1、作用：解决工厂模式不是用new关键字来创建对象的弊端 2、作用：解决工厂模式创建的实例和模型没有内在联系的问题 3、不足：无法解决工厂模式不同实例对应于不同内存的问题（内存浪费），这个用原型模式可以解决   二、javascript创建对象的方法--构造函数模式（需仔细看） 构造函数模式 ...
js的Object对象中如何使用函数的方法
CShouziwangDN的博客
09-25 974
javascript的Object对象中创建function函数的方法，其实非常的简单，首先我们用对象字面量的方法创建一个Object对象。 var obj1={ func:function(a,b){ console.log(a); alert(b); } }; obj1.func(1,2); //控制台成功输出1 页面成功弹出2 知识补充 1.如何删除对象中的属性呢？使用delete var obj2={ name:'小哦', func:function(a,b){ consol
JS自定义对象创建与简单使用方法示例
11-28
构造函数用于创建具有相同属性和方法的对象，而原型链则允许对象共享属性和方法，减少了内存消耗。 ### 示例代码运行环境 在HTML文件中，`<script>`标签用于包含JavaScript代码。在本例中，JavaScript代码位于`...
javascript 构造函数方式定义对象
12-11
总的来说，JavaScript提供了多种方式来创建和操作对象，包括构造函数、对象字面量、动态添加属性、数组排序以及函数作为对象等。这些特性使得JavaScript在处理复杂的数据结构和业务逻辑时具有很大的灵活性。
JavaScript 创建对象和构造类实现代码
10-29
**构造函数示例：** ```javascript function NewClass() { this.firstName = "Frank"; } NewClass.prototype.sayName = function() { alert(this.firstName); }; var nc = new NewClass(); nc.sayName(); // ...
JavaScript-Object对象-创建对象及构造函数
廖若星辰-LTY
05-27 1307
JavaScript也是一门面向对象的编程语言，所以对象也是很重要的，下面我们来看一下JS中对象的三种创建方法： 对象：是一组无序的相关属性和方法的集合，万物皆对象但对象是一个具体的事物。对象是由属性和方法组成的；属性：事物的特征，在对象中用属性来表示方法：事物的行为，在对象中用方法来表示 JS中的对象有三种创建方法： 第一种方法：利用对象字面量创建对象 { } <script> // 1.利用对象字面量创建对象 {} var obj = {
obj文件解析以及构造obj文件
09-30
此压缩包内为带纹理的obj文件，用win10自带3D查看器便可打开，解析见：https://blog.csdn.net/qq_41102371/article/details/108880797
JavaScript中Function函数与Object对象的关系
11-22
Function是javascript里最常用的一个概念，javascript里的function是最容易入手的一个功能，但它也是javascript最难理解最难掌握的一个概念。 今天我们来尝试理解Function和Object.因为这个里面有些人前期可能会搞糊涂.他们之间到底是什么关系.当然也不除外当初的我. 注意:官方定义: 在Javascript中,每一个函数实际上都是一个函数对象. 我们先来看最简单的两个代码,也是最容易理解的. function fn(){} var obj = {} console.log(fn instanceof Function)//true conso
JS构造函数的执行过程
01-08
什么是构造函数 通过new操作符调用的函数为构造函数，会构造出一个类的实例 一个函数直接调用则为普通函数调用方式，用new调用则为构造函数调用方式 function Fn(name,age){ let n = 5; this.name=name; this.age=age; } Fn(a,10); //-->普通调用函数方式 let b = new Fn(b,18); // -->构造函数调用方式 普通函数的执行过程 形成私有作用域（栈内存） 形参赋值 变量提升 代码执行 栈内存释放（或不释放） 构造函数的执行过程 1. 形成私有作用域 2. 形参赋值 3. 变量提升
JS中构造函数、实例对象和原型对象三者之间的关系
热门推荐
qq_39247835的博客
09-16 1万+
1、首先需要明白一个知识点：一个需要共享并且通过实例对象调用的方法，是在构造函数的原型对象中的。（实例对象原型__proto__指向构造函数的原型，即prototype）      通过查看join方法得到，join是在构造函数的原型对象中的。 2、进入正题，开始解释： （1）实例对象通过构造函数进行创建，原型对象是有了构造函数就会产生的。 （2）构造函数中的属性通过结构（dir）查...
js构造函数创建对象
weixin_47392167的博客
07-17 486
<script> // 创建对象 function Student(room, group, name, age, address, teacher, course) { this.room = room; this.group = group; this.name = name; this.age = age; this.course = course; this.teach
JavaScript
qq_41943011的博客
08-02 510
JavaScript zzj 一、JS的声明和引用 1.1 引用方式一 <script type="text/javascript"> /*网页中的弹框*/ alert("js 的学习课程"); //控制台打印 console.log('你好'); </script> 注意：这种方式既可以写在标签中，也可以写在标签的最后。 1.2 引用方式二 <script type="text/javascript" src="js/test.js" charset
js中创建对象的5种方法
最新发布
jiangjunyuan168的博客
09-17 1万+
与object构造函数模式类似，通过自定义一个构造函数，再进行new操作创建对象需要创建多个类型确定的对象。每个对象都有相同的数据，浪费内存。
JavaScript中的构造函数、原型和实例
weixin_45803990的博客
08-11 1612
1.原型模式： 每个函数都会创建一个prototype属性，这个属性是一个对象，包含应该由特定引用类型的实例共享的属性和方法。实际上，这个对象就是通过构造函数创建的对象的原型。 使用原型对象的好处是，在它上面定义的的属性和方法可以被对象实例共享。原来在构造函数中直接赋给对象实例的值，可以直接赋值给它们的原型，如下所示： function Person(){} // 原型上创建的属性和方法，可以被对象实例共享 Person.prototype.name='maria
JS中的构造函数
weixin_47267628的博客
09-09 1万+
查找关系：先从当前对象查找，如果当前对象有，则以当前对象为主，如果没有，则继续向原型中查找 ，如果在原型中有，则以原型中的为主，如果当前原型还没有，则继续向原型中原型中查找，有则以为主。以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。
JavaScript面向对象详解：对象与构造函数
以下是一个简单的构造函数示例： ```javascript function Vehicle() { this.color = "unknown"; this.wheels = 4; } // 使用构造函数创建对象实例 var car = new Vehicle(); var bike = new Vehicle(); car....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敦厚的曹操

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值