js入门(ES6)[四]---对象

2021-10-25 11:30:05 浏览数 (1)

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

对象

  • 什么是对象？
  • 定义对象
  • ​
    • 属性定义
    • 方法定义
    • 拓展(新增)属性
    • ​
      • 方法一
      • 方法二
    • 拓展(新增方法)
    • ​
      • 方法一
      • 方法二
  • 关于this

什么是对象？

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

定义对象

对象有属性 好比人有眼睛鼻子

对象有方法 好比人会说话吃饭

属性定义

代码中的方法都可以

  1. name:“属性值” 或者 “name”:“属性值”
  2. 如果在外部定义了 比如var phone = 123456 那么 在内部直接写phone即可 因为它是具名参数
  3. 字符串拼接形式 str1 str2 = “xxxxx” 比如str1=“na” str2=“me” 那么此处为name=“xxxxx”
  4. 拓展运算符 传入数组全部参数 但是属性名会从0开始
  5. 对象 直接把另外一个对象传入使用
代码语言：javascript复制
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)

打印结果如下

方法定义

方法名可以使用属性定义的那种写法 注意是属性名

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

方法的定义也有很多种方法

  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

代码语言：javascript复制
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})

示例

代码语言：javascript复制
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)

拓展(新增方法)

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

方法一

代码语言：javascript复制
people.say = function() {
	return "hello"
}
或者
function say() {
	return "hello"
}
people.say = say
代码语言：javascript复制
var people = {
	name: "dmhsq"
}
console.log(people.name)
console.log(people)
people.say = function() {
	return "hello"
}
console.log(people.say())
console.log(people)

方法二

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

代码语言：javascript复制
var people = {
	name: "dmhsq"
}
console.log(people.name)
console.log(people.say())
console.log(people)

答案是 会报错

我们增加一个方法

浅拷贝

使用Object.assign()

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

使用如下

代码语言：javascript复制
Object.assign(people, {
	say: function() {
		return "hello"
	}
})

一样可以引用外部函数

代码语言：javascript复制
function say() {
	return "hello"
}
Object.assign(people, {
	say
})

示例

代码语言：javascript复制
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

代码语言：javascript复制
var people = {
	name: "dmhsq"
}
var num1 = 1;


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

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

代码语言：javascript复制
var people = {
	name: "dmhsq",
	say: function() {
		console.log(this)
	}
}
console.log(this)
console.log(window)
people.say()
actionscript javascript

0 人点赞