JavaScript对象详解及用法进阶

120 阅读2分钟

JavaScript对象是一种复合数据类型,它可以存储多个键值对。对象可以包含属性和方法,属性是对象的特征,方法是对象的行为。

对象可以通过字面量构造函数Object.create()方法创建。

1. 创建对象

1.1 字面量方式

使用花括号{}创建一个对象,可以在花括号中添加属性和方法。

var person = { 
    name: "Tom", 
    age: 20, 
    sayHello: function() { 
        console.log("Hello, my name is " + this.name); 
    } 
}; 

1.2 构造函数方式

使用构造函数创建对象,可以使用new关键字创建一个新的对象。

function Person(name, age) { 
    this.name = name; 
    this.age = age; 
    this.sayHello = function() { 
        console.log("Hello, my name is " + this.name); 
    } 
} 
var person = new Person("Tom", 20); 

1.3 Object.create()方式

使用Object.create()方法创建一个新的对象,可以指定原型对象。

var person = Object.create(null); 
person.name = "Tom"; 
person.age = 20; 
person.sayHello = function() { 
    console.log("Hello, my name is " + this.name); 
}; 

2. 访问对象属性和方法

可以使用点号方括号访问对象的属性和方法。

var person = { 
    name: "Tom", 
    age: 20, 
    sayHello: function() { 
        console.log("Hello, my name is " + this.name); 
    } 
}; 
console.log(person.name); // Tom 
console.log(person["age"]); // 20 
person.sayHello(); // Hello, my name is Tom 

3. 修改对象属性和方法

可以直接修改对象的属性和方法。

var person = { 
    name: "Tom", 
    age: 20, 
    sayHello: function() { 
        console.log("Hello, my name is " + this.name); 
    } 
}; 
person.name = "Jerry"; 
person.age = 30; 
person.sayHello = function() { 
    console.log("Hi, my name is " + this.name); 
}; 

4. 删除对象属性和方法

可以使用delete关键字删除对象的属性和方法。

var person = { 
    name: "Tom", 
    age: 20, 
    sayHello: function() { 
        console.log("Hello, my name is " + this.name); 
    } 
}; 
delete person.age; 
delete person.sayHello; 
  1. 枚举对象属性和方法

可以使用for...in循环枚举对象的属性和方法。

var person = { 
    name: "Tom", 
    age: 20, 
    sayHello: function() { 
        console.log("Hello, my name is " + this.name); 
    } 
}; 
for (var key in person) { 
    console.log(key + ": " + person[key]); 
} 
  1. 对象的原型

每个对象都有一个原型对象,可以通过__proto__属性访问。

var person = { 
    name: "Tom", 
    age: 20, 
    sayHello: function() { 
        console.log("Hello, my name is " + this.name); 
    } 
}; 
console.log(person.__proto__); // Object {} 
  1. 继承

可以使用原型链实现继承。

function Person(name, age) { 
    this.name = name; 
    this.age = age; 
} 

Person.prototype.sayHello = function() { 
    console.log("Hello, my name is " + this.name); 
}; 

function Student(name, age, grade) { 
    Person.call(this, name, age); 
    this.grade = grade; 
} 

Student.prototype = Object.create(Person.prototype); 
Student.prototype.constructor = Student; 
Student.prototype.sayHello = function() { 
    console.log("Hi, my name is " + this.name + ", I'm in grade " + this.grade); 
}; 
var student = new Student("Tom", 20, 3); 
student.sayHello(); // Hi, my name is Tom, I'm in grade 3 

8. 对象展开

对象展开是一种方便地将一个对象的属性展开到另一个对象中的方法。它可以将一个对象的属性展开到另一个对象中,从而方便地合并两个对象。

const obj1 = { 
    name: 'Alice', 
    age: 20 
};

const obj2 = { 
    gender: 'female' 
}; 

const obj3 = { 
    ...obj1, 
    ...obj2 
}; 

console.log(obj3); // { name: 'Alice', age: 20, gender: 'female' }