JS中创建对象：三种方式（pink）

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

（1）利用字面量创建对象

（2）利用new Object创建对象

（3）利用构造函数创建对象

👉一、利用字面量创建对象

（1）对象字面量：就是{ }里面包含了表达这个具体事物（对象）的属性和方法。

ps:( )是运算符，[ ]数组，{ }对象

//利用字面量创建对象{}
//var obj={};//创建空的对象
var obj={
    name;'李四',
    age:18,
    say:function(){
        console.log('我会说话');
    }
}
//(1)里面的属性或者方法必须以键值对的形式创建 键 属性名：值 属性值
//(2)多个属性或者方法中间用逗号隔开的
//(3)方法冒号后面跟的是一个匿名函数

（2）使用对象

1. 调用对象的属性 我们采取 对象名.属性名，其中.这个小点我们可以理解为“的”

console.log(obj.name)//李四
console.log(obj.age)//18

2. 调用属性还有另一种方法 对象名['属性名']

console.log(obj[name])//李四
console.log(obj[age])//18

3. 调用对象的方法 say 对象名.方法名（）

obj.say()//我会说话    ps：注意一定不要漏掉小括号

💻练习：请按照要求写出对象

请用对象字面量的形式创建一个名字为可可的狗对象。

具体信息如下：

• 姓名：可可

• 类型（type）：拉布拉多

• 年龄：2岁

• 技能：汪汪汪（bark），演电影（showFilm）

var dog={
 name:'可可'，
 type:'拉布拉多'，
 age:'2岁'，
 bark:function(){
 console.log('汪汪')
}
 showFile:function(){
 console.log('演电影')
}
}

变量、属性、函数、方法的区别

（1）变量和属性：

相同点：变量和属性的相同的 他们都是用来存储数据的

var num=10; //变量
var obj={//属性
    age:18
    bark:function(){
        console.log('我是属性')
    }
}
console.log(obj.age)//18
console.log(age)//报错
function fn(){
    console.log('我是方法')
}

不同点：（1）变量 单独声明并赋值 ，使用的时候直接写变量名，单独存在

（2）属性 在对象里面的不需要声明，使用的时候必须是 对象.属性名

（2）函数和方法：

相同点：都是实现某种功能，用来做某事的

不同点：（1）函数是单独声明并且调用： 函数名（） 单独存在并且可以函数提升

（2）方法 在对象里面 调用：对象.方法（） 与对象共存

变量、属性、函数、方法总结

变量：单独声明赋值，单独存在

属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

函数：单独存在的，通过==“函数名()”==的方式就可以调用

方法：对象里面的函数称为方法，方法不需要声明，使用==“对象.方法名()”==的方式就可以调用，方法用来描述该对象的行为和功能。

👉二、利用 new Object( )创建对象

跟我们前面学的 new A()原理一致

var obj=new Object();//创建了一个空的对象
//假设其中有name,age属性,bark方法
obj.name='张三'；
obj.age=18;
obj.bark=function(){

}

(1)我们利用 等号 = 赋值的方法添加对象的属性和方法

（2）每个属性和方法之间用分号;结束

调用与上相同；

💻练习：请按照要求写出对象

请用new Object形式创建一个汽车对象

具体信息如下：

• 名称：法拉利

• 价格：400w

• 功能:跑（run）

var car=new Object();
car.name='法拉利';
car.price='400w';
car.run=function(){
    console.log('开着车跑，咕噜咕噜~')
}

👉三、利用构造函数创建对象

问题：我们为什么需要使用构造函数

答：因为我们前面两种创建对象的方式一次只能创建一个对象。我们一次创建一个对象，里面很多属性和方法是大量相同的，我们只能复制。因此我们可以利用函数的方法重复这些相同的代码，我们就把这个函数称为构造函数。又因为这个函数不一样，里面封装的不是普通代码，而是对象。

（1）构造函数定义：把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，他总与new运算符一起使用。

//我们需要创建四大天王的对象
//相同的属性 名字，年龄，性别，   都会唱歌
//构造函数的语法格式
function 构造函数名（）{
    this.属性=值;
    this.方法=function(){
    }
}
new 构造函数名();

function Star(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.sing=function(sang){
    console.log(sang);
    }
}
var ldh=new Star('刘德华',28,'男')//调用函数返回的是一个对象
//console.log(typeof ldh)//Object
console.log(ldh.name)//调用
ldh.sing('北京欢迎你')
//1.构造函数名字首字母要大写
//2.我们构造函数不需要return 就可以返回结果
//3.我们调用构造函数必须使用new
var zxy=new Star('张学友',38,'男')
console.log(zxy.name)//张学友
console.log(zxy['age'])//18
zxy.sing('白兰花')

1.构造函数名字首字母要大写

2.我们构造函数不需要return 就可以返回结果

3.我们调用构造函数必须使用new

4.我们只要new Star（）调用函数就创建一个对象ldh{ }

5.我们属性和方法前面必须添加this

💻练习：请按照要求创建对象

利用构造函数创建两个英雄对象。函数中的公共部分包括：姓名属性（name）,血量属性（blood）和攻击方式（attack）。

英雄对象的信息如下：

• 廉颇 500血量 攻击：近战

• 后羿 100血量 攻击：远程

function YingXiong(name,blood,attack){
    this.name=name;
    this.blood=blood;
    this.attack=function(attack){
    console(attack)
}
var hy=new YingXiong('后羿'，'100血量');
var lp=new YingXiong('廉颇'，'500血量');
hy.attack('远程')
lp.attack('近程')

构造函数和对象

（1）构造函数：泛指的某一大类，抽象了对象的公共部分，封装到了函数里面，它类似于java语言中的类（class）

（2）对象 特指 是一个具体的事物 刘德华

（3）我们利用构造函数创建对象的过程我们也称为对象的实例化

new关键字

1. new关键字执行过程会做四件事情：

（1）new构造函数可以在内存中传建了一个空的对象

（2）this就会指向刚才创建的对象

（3）执行构造函数里面的代码，给这个空对象添加属性和方法

（4）返回这个对象（所以构造函数中不需要return）

New和构造函数确认眼神：

（1）他们俩生个了宝宝

（2）这个宝宝必须是亲生的this指向

（3）教孩子读书一肚子墨水

（4）长大挣钱回报父母

👉四、如何遍历对象

1、for...in语句用于对数组或者对象的属性进行循环操作

//遍历对象
var obj={
    name;'笑笑',
    age;'88',
    sex;'女'
    fn:function(){}
}
//for...in便利我们的对象
for(k in obj){
    console.log(k）;//k变量 输出 得到的是 属性名
    console.log(obj[k]);//obj[k]得到的是属性值
}

基本格式：

for（变量 in 对象){

}

k变量 输出 得到的是 属性名；

obj[k]得到的是属性值；

我们使用for..in里面的变量我们喜欢写k或者key

五、小结

1. 对象可以让代码结构更清晰。

2. 对象复杂数据类型Object。

3. 本质：对象就是一组无序的相关属性和方法的集合。

4. 构造函数泛指某一大类，比如苹果，不管是红苹果还是绿苹果，都统称苹果。

5. 对象实例特指一个事物，比如说这个苹果。

6. for...in语句用于对对象的属性进行循环操作。