JavaScript - 对象

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）

1. 控制台调用

使用单独的Javascript程序需要使用的网页端口的控制台，键入相关命令

Windows点击F12，MAC的打开方法是打开浏览器，同时键入option+command+I

使用console使用控制台

2. 创建对象

2.1 基础创建

const peron={}
//创建一个对象

const person={
    name:['Bob','Louis'],
    age:[18,20],
    color:'Red'
};

Javascript对象的创建有点像python字典的创建

如上述代码所示，对象中包含name，age以及color等元素

2.2 使用方法进行对象的创建

引入了类（class）的语法来创建对象，它是构造函数的一种语法糖，使得创建对象和继承变得更加直观。

class person=
{
    name;
    age;
    constructor(name,age)
    {
        this.name = name;
        this.age = age;
    };
    
    great()
    {
        console.log('Hello');
    };
}

创建对象

const A = new person('name',16);

 2.3 构造函数

使用构造函数一次性创建多个对象

funtion create(name)
{
    const obj = {};
    obj.name = name;
    obj.introduce = function()
    {
        console.log(`my name is ${this.name}`);
    };    
};

let a = create('Bob');
console.log(a.name);
a.introduce();

3. 对象元素的调用

//调用对象中的元素
person.name[0];
console.log(person.color);

const person =
{
    name:'Bob',
    showname(){console.log(`我的名字是${this.name}`);};

};

对象内函数创建也可以使用

const person =
{
    showname:function()
{
};
};

对象内元素查看的不同方式：

//JavaScript提供了多种方式，以下是最常见的几种
person.name[0];
person['name'][0];

也可以直接针对元素进行添加或改变值

4. 对象原型

在JavaScript中，所有的对象都有一个内置属性，称为它的 prototype（原型）。它本身是一个对象，故原型对象也会有它自己的原型，逐渐构成了原型链。原型链终止于拥有 null 作为其原型的对象上。

类似于继承，子类具有父类的特点，可以调用父类中的属性以及方法

4.1 设置原型

使用现有的对象作为新创建对象的原型，继承原型的方法与属性

const personPrototype = {
  greet() {
    console.log("hello!");
  },
};

const carl = Object.create(personPrototype);
carl.greet(); // hello!

5. 继承

继承允许一个类（子类）继承另一个类（父类）的属性和方法。

使用class构造器进行继承

class a={
    constructor(name) = {
        this.name = name;
};
    introduce = function(){console.log('Hello!');};
};

class b = extends a{
    bark = function()
{
    
};
};

const dog = new b('Bob');
dog.bark();
dog.introduce();

6. 多态

当一个方法拥有相同的函数名，但是在不同的类中可以具有不同的实现时，我们称这一特性为多态。多态使用子类重写的方法进行实现

class Animal {
    speak() {
        console.log('Animal speaks');
    }
}

class Dog extends Animal {
    speak() {
        console.log('Dog barks');
    }
}

class Cat extends Animal {
    speak() {
        console.log('Cat meows');
    }
}

const animals = [new Dog(), new Cat()];

animals.forEach(animal => {
    animal.speak(); // 输出: Dog barks 和 Cat meows
});

6.1 重写

在Javascript中，无需声明其他，重写直接针对相同函数名进行代码填充即可

class Animal {
    speak() {
        console.log('Animal speaks');
    }
}

class Dog extends Animal {
    speak() {
        console.log('Dog barks');
    }
}

const myDog = new Dog();
myDog.speak(); // 输出: Dog barks

7. 封装

封装是面向对象编程的一个重要特性，它使得对象的内部状态对外部隐藏，提供了清晰的接口来操作对象的数据。

可以通过相应的借口获取对象的信息，并且保证原有对象不会被破坏

7.1 传统封装

通过构造函数实现

class Person {
    constructor(name, age) {
        this._name = name; // 约定为私有属性
        this._age = age;   // 约定为私有属性
    }

    getName() {
        return this._name;
    }

    setName(newName) {
        this._name = newName;
    }

    getAge() {
        return this._age;
    }

    setAge(newAge) {
        this._age = newAge;
    }
}

const person = new Person('John', 30);
console.log(person._name); // 输出: John (虽然约定为私有，但仍然可以访问)

7.2 类（class）语法

使得封装变得更加直观。可以使用 # 语法来定义私有字段，外部无法直接修改访问

class Person {
    #name; // 私有属性
    #age;  // 私有属性

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

    getName() {
        return this.#name;
    }

    setName(newName) {
        this.#name = newName;
    }

    getAge() {
        return this.#age;
    }

    setAge(newAge) {
        this.#age = newAge;
    }
}

const person = new Person('John', 30);
console.log(person.getName()); // 输出: John
person.setName('Jane');
console.log(person.getName()); // 输出: Jane