js对象篇

最新推荐文章于 2024-09-16 09:19:02 发布
最新推荐文章于 2024-09-16 09:19:02 发布
阅读量5.2k 收藏 25
点赞数 13
分类专栏： JS高级部分(从数组开始的!!!)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37805832/article/details/109524248
版权

课程目标:

1.掌握面向对象的基本操作.
2.·掌握构造函数的优化策略.
3.创建对象的方式.

1.创建对象的三种方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //创建对象的第一种方式
        /*let obj=new Object();
        obj.name="cyg";
        obj.age=20;
        obj.say=function()
        {
            console.log("666");
        }
        console.log(obj.name);
        console.log(o*/
        // 创建对象的第二种方式
        /*let obj={};
        obj.name="cyg";
        obj.age=20;
        obj.say=function()
        {
             console.log("777");
        }
         console.log(obj.name);
        console.log(obj.age);
        obj.say();*/
        // 创建对象的第三种方式
        let obj={
            name:"cyg",
            age:20,
            say:function()
            {
                console.log("888");
            }
        };
        console.log(obj.name);
        console.log(obj.age);
        obj.say();
    </script>
</body>
</html>

形式:

对象名.方法名=function()
{
//输出内容
}
let 对象名=new Object();
对象名.属性;
对象名.方法名();
//第二种方式：
let 对象名={};
对象名.属性名=属性;
对象名.方法名=function()
{
输出内容
}


//第三种方式:
let 对象名={
属性名:属性值,
方法名:function()
{
输出内容
}
};

总结：

1.记住,对象有属性&&方法才能叫做对象.

效果：

在这里插入图片描述

函数和方法区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function demo()
        {
            console.log(this);
        }
        window.demo();
        let obj={
            name:"cyg",
            test:function()
            {
                console.log(this);
            }
        };
        obj.test();
    </script>
</body>
</html>

总结：

1.函数与方法区别是:
函数是window调用的.
方法是对象调用的

效果：在这里插入图片描述

工厂函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function createPerson(myName, myAge)
        {
            let obj=new Object();
            obj.name=myName;
            obj.age=myAge;
            obj.say=function()
            {
                 console.log("hello world");
            }
            return obj;
        }
        let obj1=createPerson("cyg",20);
        let obj2=createPerson("liwen",20);
        console.log(obj1);
        console.log(obj2);
    </script>
</body>
</html>

总结:

工厂函数与构造函数的区别是:
1.构造函数是工厂函数的简化.
2.构造函数是通过new来调用.工厂函数是通过普通函数来调用的.

构造函数二重奏:

第一重:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function Person(myName, myAge) 
        {
            //let obj=new Object();
            //let this=obj;
            //以上两句系统自动添加
            this.name=myName;
            this.age=myAge;
            this.say=function()
            {
                 console.log("hello world");
            }
            //以下系统自动添加
            //return this;

        }
        let obj1=new Person("cyg",20);
        let obj2=new Person("liwen",20);
         console.log(obj1);
        console.log(obj2);
    </script>
</body>
</html>

总结：

1.构造函数执行完才能被称为创建对象完了.

效果：

在这里插入图片描述

第二重:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //功能:用案例讲述this的指向问题.
        function Person(myName, myAge)
        {
            this.name=myName;
            this.age=myAge;
            this.say=function()
            {
                console.log(this.name,this.age);
            }
        }
        let obj1=new Person("cyg",20);
        obj1.say();
        let obj2 = new Person("zs", 44);
        obj2.say();
        console.log(obj1.say===obj2.say);
        // 通过三个等号来判断两个函数名称, 表示判断两个函数是否都存储在同一块内存中
        //2:
        function demo()
        {
            console.log("demo");
        }
        console.log(demo===demo);
    </script>
</body>
</html>

总结：

构造函数与普通函数的区别:

1.在同一个构造函数创建出来的对象是不一样的（地址不一样）.,比如这里的obj1与obj2.
2.调用普通函数是一样的(内存地址.)

效果：

在这里插入图片描述

构造函数优化三重奏:

第一奏:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        function mySay()
        {
              console.log("hello world");
        }
        function Person(myName, myAge)
        {
            this.name = myName;
            this.age = myAge;
            this.say = mySay;
        }
         let obj1 = new Person("lnj", 34);
        let obj2 = new Person("zs", 44);
        console.log(obj1.say === obj2.say);
    </script>
</body>
</html>

总结：
优化为了什么？
为了使内存地址一样,不占用内存把.
1.调用了同一个普通函数.
在这里插入图片描述

在这里插入图片描述

效果：

在这里插入图片描述

第二奏:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*function mySay()
        {
            console.log("666");
        }*/
        //简化为:
          let fns={
            mySay:function()
            {
                 console.log("666");
            }
          };
          function Person(myName, myAge)
          {
            this.name=myName;
            this.age=myAge;
            this.say=fns.mySay;
          }
          let obj1=new Person("cyg",20);
          let obj2=new Person("liwen",20);
          console.log(obj1.say===obj2.say);
    </script>
</body>

</html>

总结：

在这里插入图片描述

在这里插入图片描述
1.调用对象是一样的，比如我爱你。他也爱你.是不是爱的是一个人啊。
2.调用构造函数是不一样的,为什么,因为他是类中的。类是一个整体不是个体啊.

效果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
           let fns = {
            test: function () {
                console.log("test");
            }
        }
        console.log(fns.test === fns.test);
    </script>
</body>

</html>

总结：

1.因为调用的是对象,不是构造函数啊，构造函数在类中啊

效果：

在这里插入图片描述

贵哥的编程之路(热爱分享)
关注
专栏目录
前端学习之JavaScript——内置对象
Jane_xxxxxy的博客
08-11 837
1. 内置对象 JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的 内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法） 内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象：Math、 Date 、Array、String等 2. 查文档 2.1 MDN 学习一个内置对象的使用，只要
关于JavaScript(JS)的基本对象
weixin_44126720的博客
01-17 2238
JS中的对象分为三类：①.内置对象(静态对象)：js本身已经写好的对象，可以直接使用不需要定义。常见的内置对象有Global、Math(它们也是本地对象，根据定义的每个内置对象都是本地对象)。②.本地对象(非静态对象)：必须实例化才能使用其方法和属性的就是本地对象。常见的本地对象有Object、Function、Date、Array、String、Boolean、Number、RegExp、Error等。
JS对象详解
Maybe_ss的博客
05-30 1万+
JS对象详解 js的对象是什么？js的对象类型有哪些？具体实例实例是什么？ ECMA-262对JS对象的定义： 属性的无序集合，每个属性存放一个原始值、对象或函数 对象是无特定顺序的值的数组 对象是一种特殊的数据类型，可以包含多个成员 对象成员：Object=Property+Method 属性（Property）：封装对象的数据，表示与对象有关的值；对象名、属性名 方法（Method）：封装对象的行为，表示对象可以执行的行为或可以完成的功能；对象名、方法名 JS的对象类型： 内部对象：原生对象/内置对象
JS基础之【对象详解 -- 对象的属性与方法、遍历对象与内置对象】
最新发布
共同学习，共同成长
09-16 1179
对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined等基本数据类型。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。本文分享对象的增删改查、对象的属性和方法以及常见的JS内置对象等等.....
详解JS中的对象
qq_60754128的博客
11-12 987
详细介绍了在JS中对象的相关属性，从语法、类型以及类的属性的各种操作和类的各种遍历，都有详细的介绍
初学JavaScript：js中的对象（对象+原型对象）
lalala_dxf的博客
04-03 6161
js中的对象
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
12-10
JavaScript作为一个基于对象(没有类的概念)的语言，从入门到精通到放弃一直会被对象这个问题围绕。 平时发的文章基本都是开发中遇到的问题和对最佳解决方案的探讨，终于忍不住要写一篇基础概念类的文章了。 本文探讨...
JS面向对象编程基础篇（一） 对象和构造函数实例详解
10-15
面向对象编程（OOP）是JavaScript中的核心编程范式之一，它通过对象和构造函数来实现。对象在JavaScript中扮演着重要角色，它们是数据和功能的集合体，能够封装属性（property）和方法（method），模拟现实世界中的...
Javascript入门学习第四篇 js对象和数组第1/2页
12-10
1 , for / in ： 一种遍历（枚举）对象属性的方法，可以循环我们呢事先不知道的属性。 它可以枚举处用户定义的所有属性，但却不能枚举出某些预定义的属性和方法。 不能枚举的属性通常是继承的属性 删除一个...
Javascript 学习笔记之 对象篇（二） : 原型对象
10-25
JavaScript中的原型对象（prototype）是实现继承的一种机制，与传统的类继承不同，它采用原型链的概念，使得对象能够共享属性和方法。JavaScript是唯一广泛使用原型继承的主要编程语言，因此理解这种模式至关重要。 ...
2021-06-17
weixin_57788469的博客
06-17 296
对象简介 什么是对象？ 对象是一种复合的数据类型，在对象中可以存储多个不同数据类型的属性。 对象分为三大类： 内建对象 宿主对象 自定义对象 什么是内建对象？ 内建对象由ES标准中定义的对象，在任何ES的实现中都可以使用。例如：Math、String、Number、Boolean....... 什么是宿主对象？ 宿主对象由JS的运行环境提供的对象、目前来讲主要指...
《小甲鱼零基础入门学习Python》自学笔记（五）—— 类和对象
weixin_45017439的博客
10-28 509
类和对象 一、类和对象的简单介绍 二、面向对象编程 三、继承 四、多重继承 五、组合 六、类、类对象和实例对象 七、绑定 八、一些相关的BIF
【JS对象】看这一篇就够！从实践到底层JS对象详解！
weixin_57208584的博客
09-06 1021
JS对象详解
JS的对象与内置对象详细介绍
热门推荐
吴小迪的博客
07-06 4万+
JS的对象就是Object，还有独立于宿主环境的ECMAScript实现提供的内置对象：Array,String,Date,Math。。。 首先我们来学习一下JS的对象： Object: JS里有一句话叫万物皆对象（除了基本数据类型）。但是new String(’’)或者new Number()这种不属于基本数据类型，属于引用类型。 对象就是属性的无序集合。数组是有序集合。 创建对象的方法： 直...
JS对象中常见的操作方法
qdwd888的博客
04-12 2117
利用关键字 delete const o = { p: 10, m: 20 } delete o.p console.log(o) // { m: 20 } // 删除对象的属性后，在访问返回 undefined console.log(o.p) // undefined 复制代码 五、作为函数参数 const displayPerson&nbsp
vue实现直播弹幕功能
2301_82242670的博客
03-29 594
前端校招精编面试解析大全点击这里即可获取完整版pdf查看实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）前端校招精编面试解析大全点击这里即可获取完整版pdf查看。
JS对象常用方法总结
qq_44741577的博客
01-31 1840
/ 使用构造函数console.log("汪汪");var dog3 = new Dog("大黄", 2);添加数据属性;// 1.添加一个数据属性writable: true, // 是否允许修改enumerable: true, // 是否允许枚举configurable: true, // 是否允许删除});// 101// 2.修改数据属性});//添加访问器属性},},});注意： 1.第一个参数必须为对象。
JS-对象详解
Java_young_man的博客
04-19 695
JS-对象 了解对象前先说说数据类型 数据类型可以分为两大类 1.基本数据类型2.引用数据类型 基本数据类型 String 字符串 Number 数值 Boolean 布尔 Null 空值 Undefined 未定义 引用数据类型 Object 对象 对象 对象属于一种符合的数据类型，在对象中可以保存多个不同数据类型的属性 对象的分类 1.内建对象 -由ES标准中定义的对象，在任何的ES的视线中都可以实现 -比如：Math String Number Boolean Function Object 2.宿主
JavaScript基础之对象
BradenHan的专栏
05-05 476
对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型。 什么是对象？简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。
JavaScript对象创建模式深度解析（下篇）
"深入理解JavaScript系列的第48篇文章，主要关注对象创建模式的下半部分，探讨如何通过各种技巧优化代码，减少错误，并提供简洁的实现。本文将介绍两种特定的模式：函数语法糖和对象常量。" 深入探讨JavaScript中的...
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

贵哥的编程之路(热爱分享)

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

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

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

打赏作者

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

抵扣说明：

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

余额充值