📜  JavaScript-对象概述(1)

📅  最后修改于: 2023-12-03 15:01:47.230000             🧑  作者: Mango

JavaScript-对象概述

JavaScript是一种面向对象的编程语言,对象是JavaScript编程的核心。对象是JavaScript中最重要的数据类型之一,也是一种复合数据类型。

对象的创建

对象可以通过对象字面量创建、通过new操作符以及构造函数创建、以及通过Object.create()方法创建。

1. 对象字面量

对象字面量是定义对象最常用的方式,用一对大括号{}包含一组键值对来定义一个对象,其中每个键值对表示该对象的一个属性和属性值。

let person = {
  name: 'Alice',
  age: 28,
  hobbies: ['reading', 'traveling']
};
2. 使用new操作符和构造函数创建对象

使用new操作符调用构造函数来创建对象,构造函数是一个普通的函数,但是按照惯例使用大写字母首字母来命名,构造函数中使用this关键字来引用新创建的对象。

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

let person = new Person('Alice', 28, ['reading', 'traveling']);
3. 使用Object.create()方法创建对象

使用Object.create()方法创建一个新对象,以一个现有的对象作为新对象的原型。

let person = Object.create({
  name: 'Alice',
  age: 28,
  hobbies: ['reading', 'traveling']
});
对象属性

对象属性可以通过两种方式访问:.点表示法和[]括号表示法。

let person = {
  name: 'Alice',
  age: 28,
  hobbies: ['reading', 'traveling']
};

console.log(person.name); // 'Alice'
console.log(person['age']); // 28
对象方法

对象的方法是存储在对象属性中的函数,可以通过对象本身进行调用。

let person = {
  name: 'Alice',
  age: 28,
  hobbies: ['reading', 'traveling'],
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

person.sayHello(); // 'Hello, my name is Alice'
对象遍历
1. for...in循环

可以使用for...in循环遍历对象的属性。

let person = {
  name: 'Alice',
  age: 28,
  hobbies: ['reading', 'traveling']
};

for (let prop in person) {
  console.log(prop + ': ' + person[prop]);
}
2. Object.keys()方法

使用Object.keys()方法可以遍历对象的所有属性名。

let person = {
  name: 'Alice',
  age: 28,
  hobbies: ['reading', 'traveling']
};

Object.keys(person).forEach(function(prop) {
  console.log(prop + ': ' + person[prop]);
});
对象继承

JavaScript中的继承是基于原型的面向对象模型,每个对象都有一个原型对象,原型对象又有自己的原型对象,最终形成一个原型链。

1. 原型继承

可以使用原型继承实现对象间的继承关系,子类的原型对象可以通过Object.create()方法继承父类的原型对象。

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, major) {
  Person.call(this, name, age);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

let alice = new Student('Alice', 20, 'Math');
alice.sayHello(); // 'Hello, my name is Alice'
2. class继承

ES6引入了class关键字,可以更方便的实现继承关系。

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

  sayHello() {
    console.log('Hello, my name is ' + this.name);
  }
}

class Student extends Person {
  constructor(name, age, major) {
    super(name, age);
    this.major = major;
  }
}

let alice = new Student('Alice', 20, 'Math');
alice.sayHello(); // 'Hello, my name is Alice'