JS对象详解
脑图
1 创建模式
1.1 字面量
使用{}创建对象，并指定属性和方法
const person = {
name:"Jerry",
age:18
}
- 对象内部的数据是确定的，但是要创建多个对象的话，有重复 代码
1.2 构造函数模式
使用Object()构造函数
const person = new Object() // 相当于 const person = {}
person.name = "Jerry"
person.age = 18
person.sayName = function(){
console.log(this.name)
}
- 对象内部的数据是不确定的，并且需要使用大量的语句
1.3 工厂模式
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.sayName = function(){
console.log(this.name)
}
const person = new Person("Jerry",18)
console.log(person)
- 注意这里的方法是在原型上面
2 对象的使用
数组和对象的使用其实是差不多的，只是所存储的类型不同
2.1 属性的读取
2.1.1 通用方式
object[属性名字符串]
属性名的本质就是字符串
const person = {
name : "Jerry",
"age":18
}
console.log(person["name"]) // Jerry
2.1.2 简写方式
在简写方式中，我们使用.运算符来对对象进行读取的操作
const person = {
name : "Jerry",
"age":18
}
console.log(person.name) // Jerry
2.1.3 两种方式的选择
- 通用方式可以在任何条件下使用
- 简写方式的使用会有限制
在以下条件中，必须使用通用方式
- 属性名包含特殊的字符：
-、空格 - 属性名不确定
const person = {
}
/* person.content-type = 'text/json'
console.log(person.content-type) 报错*/
person['content-type'] = 'text/json'
console.log(person['content-type']) // text/json
2.2 属性的添加和删除
添加
object.属性名 = 属性值
删除
可以使用delete关键字
delete object.属性名
const person = {
name:"Jerry",
age:18,
}
/* 添加 */
person.gender = 'male'
console.log(person)
/* 删除 */
delete person.gender
console.log(person)
输出
delete只对本对象的属性删除有作用，如果原型链上有相同的属性，则无效
3 对象的继承
- 使用构造函数创建对象，构造函数与构造函数间的继承
- 在这里总结了三种继承的方式：原型链继承、构造函数继承、原型链和构造函数的组合继承
3.1 原型链继承
主要用来继承方法
过程
- 将需要被继承的方法添加到父类的原型对象中
- 子类的原型为父类的一个实例
- 修改
constructor属性
例子
/* 父类 */
function Parent(){
this.name = 'parent'
}
/* 将需要继承的方法添加到原型中 */
Parent.prototype.sayName = function(){
console.log(this.name)
}
/* 子类 */
function Child(){
this.name = 'child'
}
/* 子类的原形指向父类的实例 */
Child.prototype = new Parent()
/* 修改constructor指针 */
Child.prototype.constructor = Child
让我们看看子类的实例能不能调用父类的方法
const child = new Child()
child.sayName() // child
我们发现他是完全可以的
3.2 构造函数继承
主要用来继承属性
过程
- 在子类中使用
call绑定this对象为父类
例子
function Parent(name,age){
this.name = name
this.age = age
}
function Child(name,age,gender){
/* 继承父类中的属性:相当于调用普通函数，给this赋值 */
Parent.call(this,name,age)
this.gender = gender
}
const child = new Child("Jerry",18,"male")
console.log(child)
输出
3.3 组合继承
使用构造函数继承属性，使用原型链继承方法
实例
function Parent(name,age){
this.name = name
this.age = age
}
Parent.prototype.sayName = function(){
console.log(this.name)
}
/* 继承属性 */
function Child(name,age,gender){
/* 继承父类中的属性:相当于调用普通函数，给this赋值 */
Parent.call(this,name,age)
this.gender = gender
}
/* 继承方法 */
Child.prototype = new Parent()
Child.prototype.constructor = Child
/* 验证 */
const child = new Child("Jerry",18,"male")
console.log(child)
child.sayName()
输出
4 对象使用的方法
4.1 监测
4.1.1 in
用来监测一个属性是否在对象中（包括原型链）详情点击，返回布尔值
语法
属性名字符串 in 对象
实例
const person = {
name:"Jerry"
}
/* 设置原型对象中的属性 */
person.__proto__.age = 18
console.log("name" in person)// true
console.log("age" in person)// ture
4.1.2 hasOwnProperty
用来判断对象本身是否拥有某个属性（排除原型链）详情点击，返回布尔值
语法
object.hasOwnProperty(属性名字符串)
实例
const person = {
name:"Jerry"
}
/* 设置原型对象中的属性 */
person.__proto__.age = 18
console.log(person.hasOwnProperty("name"))// true
console.log(person.hasOwnProperty("age")) //false
4.2 遍历
for...in
对于数组和对象的属性进行枚举，详情点击
语法
for (变量 in 对象){
在此执行代码
}
实例
const person = {
name:"Jerry",
age:18,
gender:"male",
address:"JiaLiDun"
}
for( x in person){
console.log(x)
}
for( x in person){
console.log(person[x])
}
输出
