超详细的JavaScript对象分享,看完就会了

<=> 朋友你好,这里是小毅的前端日记, 分享代码日常 !
<=>本文目标:JavaScript对象详解
<=>卑微的大三前端仔持续输出前端知识,欢迎批评指正 !
<=> 愿你永远青春激昂,风华永驻 !

一、初识对象

1、什么是对象(不是你想的那个对象哦)

​ 对象:
     现实生活中:现实具体的一个东西,比如 moyi 、Tom 是一个对象,但是 人 就不是一个对象。

     ​ 程序中: 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串,数组 函数 数值等等。

​ 对象属性:事务的特征,常用名词来表达,如手机的大小 颜色 尺寸

​ 对象方法:事务的行为,常用动词来表达,如手机可以打电话 发短信

2、我的第一个对象

哦对了,差点忘说,最近刷题的时候有小伙伴在问,有没有好用并且成体系的的刷题资源,
那今天就为大家推荐一款我正在用的、超nice的神器点击访问牛客网
里面的互联网大厂面试真题刷到手软,从基础到进阶,只有你想不到,没有他做不到,赶紧卷起来吧!助你成为offer收割机!

利用字面量大括号 {}创建我的第一个对象(突然,没对象的竖起了中指,哈哈哈)

    var obj = {}  //创建一个空对象
    var obj = {
        // 三个属性
        name: '莫子',
        sex: 'man',
        height: 170,
        // 一个方法sayHi
        sayHi: function () {
            console.log('我是一个对象的方法hello world');
           }
       }

3、如何调用对象

现在我们已经有一个自己的对象啦,那么该如何调用它呢?

通常调用对象的属性有两种方法:

​ a. 调用属性

​         对象名.属性名,例如obj.name

​         对象名[‘属性名’], 例如obj[‘sex’]

​ b. 调用方法 对象名.方法名()

但是,在调用属性的时候,我们具体该选择哪一种方法呢?像我这么良心的博主,肯定会为大家找好解决办法滴。

接下来请看以下三点:

​ 1.点【 . 】方法后面跟的必须是一个指定的属性名称,而中括号【[ ]】方法里面可以是变量,即用中括号的是属性名不确定的,例如下列程序只能用中括号

 var a = 'aaa';
 var b = 'bbb';
 obj[a] = b;
 console.log(obj[a]);

​ 2.中括号【[ ]】方法里面的属性名可以包含特殊字符 如 - 空格,而点【 . 】方法后面的属性名不可以是特殊字符

 // 利用[ ]添加一个set-age属性
    obj['set-age'] = 22;
    console.log(obj['set-age']);

​ 3.当动态为对象添加属性时,必须使用 中括号【[ ]】,如obj[shuxing],不可用 点【 . 】方法

二、创建对象的5种方式及其利弊

第一种: 对象字面量模式

步骤: 使用{}创建对象, 同时指定属性/方法

适用场景: 起始时对象内部数据是确定的,适用于只创建一个对象的场景

问题: 如果创建多个对象, 有重复代码

创建一个对象p, 包含属性name, age, 方法setName

    var p = {
      name: 'momo',
      age: 15,
      setName: function (name) {
        this.name = name;
        console.log('我是函数的名字:' + name)
      }
    }
    p.setName('DJ')
    console.log(p.age, p.name);

请添加图片描述

创建一个对象p2, 包含属性name, age, 方法setName

  var p2 = {
      name: 'yiyi',
      age: 33,
      setName: function (name) {
        this.name = name;
        console.log('我是函数的名字:' + name)
      }
    }
    p2.setName('莫莫3号')
    console.log(p2);
    console.log(p2.age, p2.name);

请添加图片描述

第二种: 利用new Object 创建对象

步骤: 先创建空Object对象, 再动态添加属性/方法

适用场景: 起始时不确定对象内部数据

问题: 语句太多,有点繁杂

    var obj = new Object();
    obj.age = 14;
    obj.name = 'momo';
    obj.setAge = function (age) {
      this.age = age;
      console.log('我是函数的年龄:' + age)
    }
    obj.setAge(12)
    console.log(obj, obj.age, obj.name);

请添加图片描述

第三种: 工厂模式

步骤: 通过工厂函数动态创建对象并返回

适用场景: 需要创建多个对象

问题: 对象没有一个具体的类型, 都是Object类型

    // 工厂函数:返回一个对象的函数
    function creatPerson(name, age) {
      var obj = {
        name: name,
        age: age,
        setName: function (name) {
          this.name = name;
        },
        setAge: function (age) {
          this.age = age;
        }
      }
      return obj;
    }
    //然后就可以创建多个对象了
    var p1 = creatPerson('momo', 18);
    var p2 = creatPerson('yiyi',19);
    console.log(p1, p2, p1.age)

请添加图片描述

第四种:自定义构造函数模式

​ 可以增加代码的复用性

​ 构造函数里面封装的不是普通代码,而是对象

​ 构造函数语法规范如下:

  1. 构造函数名首字母大写
  2.构造函数不需要return就可以返回结果
 	function 构造函数名() {
      	this.属性 =;
      	this.属性 =;
      	this.方法 = function () {
     	}
  	 }

​ 调用构造函数,即对象的实例化,即:new 构造函数名(),也就是我们平时说的new一个对象,没有对象,咱就new一个,想有多少就有多少,哈哈哈

步骤: 自定义构造函数, 通过new创建对象

适用场景: 需要创建多个类型确定的对象

问题: 每个对象都有相同的数据, 浪费内存,所以可以考虑把函数放在原型里面,即第五种方法

  function Person(name, age) {
      this.name = name;
      this.age = age;
      this.setName = function (name) {
        this.name = name;
      };
      this.setAge = function (age) {
        this.age = age;
      }
    }
    var p1 = new Person('momo', 14);//实例化一个Person对象
    console.log(p1);
    console.log(p1 instanceof Person);// true,p1是Person类型

请添加图片描述

在下面的程序中,定义了一个Student构造函数,在最后两行,我们分别判断p1, s1的类型,可知p1不是Student类型,而s1是student类型

 function Student(name, age) {
      this.name = name;
      this.age = age;
      this.setName = function (name) {
        this.name = name;
      };
      this.setAge = function (age) {
        this.age = age;
      }
    }
    var s1 = new Student('yiyi', 22);
    console.log(s1);

    console.log(s1 instanceof Student);//true, s1是student类型的对象
    console.log(p1 instanceof Student);//false,代表p1不是Student类型对象

请添加图片描述

第五种:构造函数+原型的组合模式

步骤: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上

适用场景: 需要创建多个类型确定的对象

这个跟构造函数差不多,只不过是把构造函数里面的原来的方法添加到了对象的原型上面去

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }
    Person.prototype.setName = function (name) {
      this.name = name;
    };
    Person.prototype.setAge = function (age) {
      this.age = age;
    }
    var p1 = new Person('momo', 14);
    var p2 = new Person('sdf', 678);
    console.log(p1, p2);
    console.log(p1 instanceof Person);//p1是Person类型

请添加图片描述

三、结尾

​ 今天的分享到这里就结束了,如果觉得有收获,左下角有个大拇指哦,关于本文有什么好滴建议也可以分享到评论区哦,博主才疏学浅,还请各位读者老爷们批评指正

  • 31
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值