js入门(ES6)[四]---对象
代码哈士奇 132 2

推荐 菜鸟教程 https://www.runoob.com/w3cnote/es6-object.html 本文中也穿插讲了函数 如果不懂 移步 js入门(ES6)[五]---函数

什么是对象?

对象就是一个个体 比如人 属性有 耳朵 眼睛 鼻子 等等 人会动 会吃饭 会说话

定义对象

对象有属性 好比人有眼睛鼻子 对象有方法 好比人会说话吃饭

属性定义

代码中的方法都可以

  1. name:"属性值" 或者 "name":"属性值"
  2. 如果在外部定义了 比如var phone = 123456 那么 在内部直接写phone即可 因为它是具名参数
  3. 字符串拼接形式 [str1+str2] = "xxxxx" 比如str1="na" str2="me" 那么此处为name="xxxxx"
  4. 拓展运算符 传入数组全部参数 但是属性名会从0开始
  5. 对象 直接把另外一个对象传入使用
    var phone = 123456;
    var loves = ["eat","lashi"];
    var hate = {
     best: "eat shit",
     low: "eat myself"
    };
    var people = {
     name: "dmhsq",
     "smallName": "dog",
     ["ol" + "d"]: 18,
     phone,
     ...loves,
     hate
    }
    

console.log(people.name) console.log(people.smallName) console.log(people.old) console.log(people.phone) console.log(people) console.log(people.hate)


打印结果如下
![在这里插入图片描述](https://img-hello-world.oss-cn-beijing.aliyuncs.com/24acd37d5861ff8975255b3e05117886.png)
## 方法定义
方法名可以使用属性定义的那种写法 注意是属性名

方法其实也是 对象的属性 只不过可以执行

方法的定义也有很多种方法
1. 普通定义 类似于下面的say   say: function(){xxxx}
2. 引用外部方法 如下的look 在外部定义 引用时这样写 saliva:look 或者直接 look
3. 引用其它对象方法 引用时这样写 touchDog: dog.bark


```javascript
function look() {
    return "wow! beautiful girl !"
}
var dog = {
    bark: function() {
        return " Woof, woof, woof "
    }
}
var people = {
    name: "dmhsq",
    smallName: "dog",
    say: function() {
        return "I am a people my name is " + this.name
    },
    ["e" + "at"]: function() {
        return this.say() + "I eat you"
    },
    saliva: look,
    look,
    touchDog: dog.bark
}

console.log(people.name)
console.log(people.smallName)
console.log(people.say())
console.log(people.eat())
console.log(people.saliva())
console.log(people.look())
console.log(people.touchDog())

在这里插入图片描述

拓展(新增)属性

方法一

如下 定义了一个people只有一个name属性 我们增加一个old属性 且对比增加前后的people

var people = {
    name: "dmhsq"
}
console.log(people.name)
console.log(people.old)
console.log(people)
people.old = 18
console.log(people.old)
console.log(people)

在这里插入图片描述

方法二

浅拷贝 使用Object.assign()

Object.assign(本体,拓展1,拓展2......)

使用如下 Object.assign(people,{old:18}) 或者 一样可以引用外部属性 var old = 18; Object.assign(people,{old})

示例

var people = {
    name: "dmhsq"
}
console.log(people.name)
console.log(people.old)
console.log(people)
Object.assign(people, {
    old: 18
})
people.old = 18
console.log(people.old)
console.log(people)

在这里插入图片描述

拓展(新增方法)

和新增属性一样 毕竟大家都是属性 只是类型不同

方法一

people.say = function() {
    return "hello"
}
或者
function say() {
    return "hello"
}
people.say = say
var people = {
    name: "dmhsq"
}
console.log(people.name)
console.log(people)
people.say = function() {
    return "hello"
}
console.log(people.say())
console.log(people)

方法二

首先 我们不增加say这个方法 直接调用 会怎样?

var people = {
    name: "dmhsq"
}
console.log(people.name)
console.log(people.say())
console.log(people)

答案是 会报错

在这里插入图片描述

我们增加一个方法

浅拷贝 使用Object.assign()

Object.assign(本体,拓展1,拓展2......)

使用如下

Object.assign(people, {
    say: function() {
        return "hello"
    }
})

一样可以引用外部函数

function say() {
    return "hello"
}
Object.assign(people, {
    say
})

示例

var people = {
    name: "dmhsq"
}
console.log(people.name)
console.log(people)
Object.assign(people, {
    say: function() {
        return "hello"
    }
})
console.log(people.say())
console.log(people)

在这里插入图片描述

关于this

其实我们一直都省略了this 一般this指向window 因为在window这个对象中 this就是指window

var people = {
    name: "dmhsq"
}
var num1 = 1;


console.log(this.people)
console.log(this.num1)
console.log(this)
console.log(window)

在这里插入图片描述

但是在window下属的对象中 比如people

var people = {
    name: "dmhsq",
    say: function() {
        console.log(this)
    }
}
console.log(this)
console.log(window)
people.say()

在这里插入图片描述

预览图
评论区

索引目录