JS对象基础-怎么理解对象

目录

一.了解对象

二.创建对象的三种方式

1.利用字面量创建对象

2.利用new Object()创建对象

3.构造函数创建对象

 4.简单了解new关键字执行过程

---

一.了解对象

对象是什么？

好吧，不要想的太远了，我说的此对象非彼对象

当我们想要保存一个值的时候，我们立马会想到使用一个变量开拓一块空间来存储这个值

当我们想要保存多个值的时候，我们立马会想到使用数组来开拓一块空间来存储多个值

那我们想要保存一个完整的人或者一个物体的时候，我们应该想到对象这个概念，我们可以使用对象来存储一个对象的所有信息

简单的一个对象演示：

const obj = {
    name:'小蜗',
    age:22,
    hobby:[
        '篮球',
        '打代码',
        '睡觉'
    ],
    say:()=>{
        console.log('Hello JSObj')
    }
}

---

二.创建对象的三种方式

1.利用字面量创建对象

const obj = {
    name:'小蜗',
    say:()=>{
        console.log('Hello JSObj')
    }
}

obj.say()
//Hello JSObj

除了obj.say()这样的调用函数的方法

我们还可以使用console.log(obj['name'])来获取到obj对象中的name属性

或者console.log(obj.name)

2.利用new Object()创建对象

const obj = new Object()
obj.name = '小蜗'
obj.age = 22
obj.hobby = ['吃','喝','玩','乐']
obj.say = function(){
    console.log('Hello JSObj')
}

也就是将对象实例化给obj了，然后通过挂载自定义属性来实现对象属性的添加

3.构造函数创建对象

构造函数常用程度不亚于上面的俩种方法，因为他有自己的优点

当我们创建对象使用时，如果项目较大，每个对象其中大部分属性和方法都是相同的，如果复制的话，不仅增大了文件体积，也不利于后期的维护，所以，构造函数就显得极为重要了

我们可以把很多对象里面一些相同的属性和方法抽象出来封装到函数里，那个对象需要这些属性就调用该封装函数就可以了

function Test(){
    this.name = '小蜗',
    this.say = ()=>{
    console.log('你好')
}
}

//调用
new Test()

因为会有this的指向问题，所以我们不使用箭头函数来封装

tips：构造函数首字母应该大写

小例子：

封装一个构造函数对象，可以通过调用函数来将对应的信息传入对象中：

function Test(username,userage,userhobby){
    this.name = username
    this.age = userage
    this.hobby = userhobby
}

//构造函数不需要return
const user = new Test('小蜗',22,['玩','吃'])

console.log(user)

 我们不难看出，得到的user是一个对象

tips：

调用构造函数必须使用new关键词

每当我们new Xxx()调用函数时，就会创建一个对象

属性和方法前必须添加hthis指向，所以构造函数创建对象不要使用箭头函数语法糖

 4.简单了解new关键字执行过程

首先会在内存中创建一个新的空对象，this会指向这个空对象

其次执行构造函数中的代码，给新对象添加属性或者方法

最后返回新对象

经历这三步，当前new的任务就完成了