对象

什么是对象

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

对象是由属性和方法组成的

属性:事物的特征,在对象中用属性来表述(常用名词)

方法:事物的行为,在对象中用方法来表示(常用动词)

创建对象的三种方式

第一种:利用对象字面量创建对象

var 对象名={

key:value,

key:value }

a.里面的书写或者方法我们采取键值对的形式,键/属性名:值/属性值

b.多个属性或者方法中间用逗号隔开

c.方法冒号后面跟的是一个匿名函数

var obj={
 name:'张桑',
 age:18,
 sayHi:function(){
    console.log('hi~')/* 这是方法 */
 }
}

使用对象的方法以及对象的增删改查

换句话说, 就是对内部的属性的操作

分为两种方式

1.点语法

2.中括号语法(数组语法)

一般来说, 大部分场景使用点语法更简单, 有一些特殊场景只能使用中括号语法

var obj = {
    a: 1,
    b: 'qwe',
    c: true
}
console.log('原始对象: ', obj)

// 1. 点语法---查询:    获取到 对象内部 某一个属性对应的属性值
// console.log(obj.a)  // 1
// console.log(obj.b)  // 'qwe'

// 2. 点语法---新增:    向对象内部新增一个属性
// obj.q = 'QF001'
// obj.w = 'QF666'
// console.log('最新的对象: ', obj)

// 3. 点语法---修改:        修改对象内部某一个属性对应的属性值
// obj.c = false
// obj.b = 'QF001'
// console.log('修改属性后的对象: ', obj)

// 4. 点语法---删除:        删除对象内部的某一个属性
// delete obj.a
// console.log('删除属性后的 obj: ', obj)

// 5. 中括号语法---查询
// console.log(obj['a'])   // 1
// console.log(obj['c'])   // true

// 6. 中括号语法---新增 
// obj['r = 123']
// obj['r'] = 123
// obj['w'] = 456
// console.log('新增后的 obj: ', obj)

// 7. 中括号语法---修改
// obj['b'] = 'QF001'
// obj['c'] = false
// console.log('修改后的 obj: ', obj)

// 8. 中括号语法的删除
// delete obj['a']
// console.log('删除属性后的 obj: ', obj)

使用对象必须使用中括号的方法

一般大部分情况下, 点语法与中括号语法, 作用相同, 怎么选择都可以

特殊情况下我们需要使用中括号语法

1.对象的属性名, 有纯数字或者特殊符号, 这个时候, 就只能使用中括号语法

2.如果涉及变量相关的时候, 也需要使用中括号

// 特殊情况1
var obj = {
  100: '我的属性名是 纯数字 100',
  '!': '我的属性名是 特殊符号 !',
  '@': '我的属性名是 特殊符号 @'
}
//  此时不能使用点语法, 可以使用中括号语法
console.log(obj.100)
console.log(obj.!)
console.log(obj.@)
console.log(obj[100])
console.log(obj['100'])
console.log(obj[!]) // 有问题, 需要将 特殊符号用引号包裹
console.log(obj['!'])
console.log(obj['@'])
// 特殊情况2
var obj = {
   a: 1,
   b: 2,
   name: 'QF001'
}
var myName = 'name'

console.log(obj.myName)
/*
obj.myName我们猜想他这个 myName 是一个变量, 所以实际的应该是 o'name',所以应该打印 obj的name属性,但实际的输出结果是 undefined 
原因:因为 对象的 点语法, 会将 点 后边的 字符 当成一个 字符串去使用, 而成变量
拿 obj.myName 举例
他会将 myName 当成一个 字符串 去 对象中查找, 有没有一个叫做 myName,找完之后 发现对象中没有这个属性名, 所以打印的值 为 undefined
*/
console.log(obj[myName])    // 'QF001'
/*
中括号语法, 内部书写的字符, 如果不加引号, 会把它当成变量去使用, 所以找到实际的值之后, myName 这个变量对应的值为 'name'
所以 obj[myName]  相当于 写了 obj['name']
所以会去 对象 obj 中 找一个 叫做 name 的属性名, 找到之后 打印在页面
*/

3.调用对象的方法

对象名.方法名()

obj.sayHi()

变量/属性/方法的区别

变量:单独声明赋值,单独存在

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

函数:单独存在,通过'函数名()'的方式就可以调用

方法:对象里面的函数称为方法,方法不需要声明,使用'对象.方法名()'的方式就可以调用,方法用来描述该对象的行为和功能

第二种利用new object创建对象

var obj=new object()
obj.name='张三';
obj.age=18;
obj.sex='男';
obj.sayHi=function(){
   console.log('Hi~')
}
console.log(obj.name)
obj.sayHi()

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

(2)每个属性和方法之间用分号结束

第三种:利用构造函数创建对象

1.因为我们一次创建一个对象,里面很多的属性和方法是大量相同的,我们只能复制

2.因此我们可以利用函数的方法重复这些相同的代码,我们就把这个函数称为构造函数

3.又因为这个函数不一样,里面封装的不是普通代码,而是对象

4.构造函数,就是把我们对象里面的一些相同的属性和方法抽象出来封装到函数里面

一.构造函数的语法格式:

function 构造函数名(){ this.属性=值; this.方法=function(){} }

new 构造函数名();

function Star(uname,age,sex){
  this.name = uname;
  this.age =a ge;
  this.sex = sex;
  this.sing = function(song){
     console.log(song)
  }
}
var ldh = new Star('刘德华',18,'男')
console.log(ldh.name)//刘德华
console.log(ldh.['sex'])//男
ldh.sing('冰雨')
var zxy=new Star('张学友',19,'男')
console.log(zxy.name)//张学友
console.log(zxy.age)//18
zxy.sing('李香兰')
//案列2
 function Hero(name, type, blood,) {
     this.name = name;
     this.type = type;
     this.blood = blood;
     this.attack = function (attacked) {
         console.log(attacked);
     }
 }
 var lp = new Hero('廉颇', '力量型', '500血量')
 console.log(lp.name);
 lp.attack('近战')
 var hy = new Hero('后羿', '射手型', '100血量')
 console.log(hy.name);
 hy.attack('远程')

注意点:

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

(2).构造函数不需要return就可以返回结构

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

(4).我们只要new Star()调用函数创建一个对象ldh()

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

二.对象是一个具体的事物

三.我们利用构造函数创建对象的过程我们称为对象的实例化

new关键字

1.new关键字执行过程:

(1)new构造函数可以在内存中创建一个空的对象

(2)this就会指向创建的空对象

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

(4)返回这个对象(所以构造函数里面不需要return)

遍历对象属性

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

1.语法格式:

for(变量 in 对象){

}

var obj = {
  name:'老师';
  age:18;
  sex:'男'
}
for(var k in obj){
  console.log(k);//K 变量输出 得到的是我们属性名
  console.log(obj[k]);//obj[k]得到的属性值
}

注意点:

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

小结

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

2.对象复杂数据类型object.

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

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

5.对象实例特指一个事物,比如这个苹果,正在给你们讲课的xx老师等

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

JavaScript的对象

对象