JavaScript - 基础③ - 無.Flac's Blog

⭐️ 有关JavaScript的学习总结

面向对象

>面向对象编程(OOP)

1. 程序是干嘛的？
 - 程序就是对现实世界的抽象（照片就是对人的抽象）

2. 对象是干嘛的？
 - 一个事物抽象到程序中后就变成了对象
 - 在程序的世界中，一切皆对象

例如：（ ）
心仪的女人：王老五
  - 一个事物通常由两部分组成：数据和功能
  - 一个对象由两部分组成：属性和方法
  - 事物的数据到了对象中，体现为属性
  - 事物的功能到了对象中，体现为方法

  - 数据：
        姓名
        年龄
        身高
        体重

  - 功能：
        睡
        吃  

const five = {
    //添加属性
    name:"王老五",
    age:48,
    height:180,
    weight:100,

    //添加方法
    eat(){
      console.log(this.name + "吃饭了")
    },
    
    sleep(){
      console.log(this.name + "睡觉了")
    }
    
}

3. 面向对象的编程
 - 面向对象的编程指，程序中的所有操作都是通过对象来完成
 - 做任何事情之前都需要先找到它的对象，然后通过对象来完成各种操作

>类

使用object创建的问题

无法区分不同类型的对象
不方便批量创建对象

- 在JS中可以通过类(class)来解决这个问题

    1. 类是对象模板，可以将对象中的属性和方法直接定义在类中，
       定义后，就可以直接通过类来创建对象

    2. 通过同一个类创建的对象，我们称为同类对象
       可以使用instanceof来检查一个对象是否是由某个类创建
       如果某个对象是由某个类所创建，则我们称该对象是这个类的实例

    语法：
        class 类名 {} // 类名要使用大驼峰命名
        const 类名 = class {}  
                    
    通过类创建对象
        new 类()

    // const Person = class {}

    // Person类专门用来创建人的对象
    class Person{

    }

    // Dog类式专门用来创建狗的对象
    class Dog{

    }

    const p1 = new Person()  // 调用构造函数创建对象
    const p2 = new Person()

    const d1 = new Dog()
    const d2 = new Dog()

    console.log(p1 instanceof Person) // true
    console.log(d1 instanceof Person) // false

    const five = {
        // 添加属性
        name: "王老五",
        age: 48,
        height: 180,
        weight: 100,

        // 添加方法
        sleep() {
            console.log(this.name + "睡觉了~")
        },

        eat() {
            console.log(this.name + "吃饭了~")
        },
    }

    const yellow = {
        name: "大黄",
        age: 3,
        sleep() {
            console.log(this.name + "睡觉了~")
        },

        eat() {
            console.log(this.name + "吃饭了~")
        },
    }

>属性

类是创建对象的模板，要创建第一件事就是定义类

class Person{
    /* 
        类的代码块，默认就是严格模式，
        类的代码块是用来设置对象的属性的，不是什么代码都能写
    */
    name = "孙悟空" // Person的实例属性name p1.name
    age = 18       // 实例属性只能通过实例访问 p1.age

    static test = "test静态属性" // 使用static声明的属性，是静态属性（类属性） Person.test
    static hh = "静态属性"   // 静态属性只能通过类去访问 Person.hh
}

const p1 = new Person()
const p2 = new Person()

console.log(p1)
console.log(p2)

>方法

class person {
    name = "孙悟空"

     sayHello == function(){

     }  添加方法的一种方式

    sayHello(){
        console.log(‘大家好，我是’ + this.name)
    } // 添加方法(实例方法)，实例方法中的this就是当前实例！ 谁调用了就是谁的this，例如P1调用，则this指向P1

    static test(){
      console.log('我是静态方法'，this)
    } // 静态方法（类方法）通过类来调用，静态方法中this 指向的是当前类，例如Person.test调用，则指向Person
} 

const p1 = new Person()

//console.log(P1)

Person.test() //静态方法的调用方式

>构造函数

// class Person{
//     name="孙悟空" // 当我们在类中直接指定实例属性的值时，
//                 // 意味着我们创建的所有对象的属性都是这个值
//     age=18
//     gender="男"

//     sayHello(){
//         console.log(this.name)
//     }
// }

// 创建一个Person的实例
// const p1 = new Person("孙悟空", 18, "男")
// const p2 = new Person("猪八戒", 28, "男")
// const p3 = new Person("沙和尚", 38, "男")

// console.log(p1)
// console.log(p2)
// console.log(p3)

class Person{
            
    // 在类中可以添加一个特殊的方法constructor
    // 该方法我们称为构造函数（构造方法）
    // 构造函数会在我们调用类创建对象时执行

    constructor(name, age, gender){

        // console.log("构造函数执行了~", name, age, gender)
        // 可以在构造函数中，为实例属性进行赋值
        // 在构造函数中，this表示当前所创建的对象

        this.name = name
        this.age = age
        this.gender = gender
    }
}

const p1 = new Person("孙悟空", 18, "男")
const p2 = new Person("猪八戒", 28, "男")
const p3 = new Person("沙和尚", 38, "男")

console.log(p1)
console.log(p2)
console.log(p3)

>封装

面向对象的特点：封装、继承、多态。

/* 

1、封装
  - 对象就是一个用来存储不同属性的容器
  - 对象不仅负责存储属性，还要负责数据的安全 例如 P1.name = -11 / haha 数据被修改，不安全
  - 直接添加到对象中的属性并不安全，因为它们可以被任意的修改

  - 如何确保数据的安全？
    ① 私有化数据 :  将需要保护的数据设置为私有，只能在类内部使用
    ② 提供 setter 和 getter 方法来开放对数据的操作 
       - 属性设置私有，通过 getter 和 setter 方法操作属性带来的好处？
         ？可以控制属性的读写权限
         ？可以在方法中对我们的属性值进行验证

  封装为了保护数据的安全，实现封装的方式：！私有化，！getter 及 setter 方法！
  
  get 属性名(){
    return this.#属性
  }
  
  set 属性名(参数){
    可以添加验证逻辑...
    this.#属性 = 参数
  
  }

*/ 

class Person{ 

   // #address = ”花果山“ //实例使用#开头就变成了私有属性，私有属性只能在类内部访问

  #name
  #age
  #gender //私有化属性必须要先声明

  constructor(name,age,gender){
    this.name = name 
    this.age = age 
    this.gender = gender
  } 

  sayHello(){
    console.log(this.#name)
  }
/*
  //getter方法用来读取属性
  getName(){
    return this.#name
  }

  //setter方法用来设置属性
  setName(name){
    this.#name = name
  }

  getAge {
    return this.#age
  }

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

  //对属性进行验证
  setAge(age){
    if(age >= 0){
        this.#age = age
    }
  }
*/

  // js中的标准写法，使用属性来调用
  get gender(){
    console.log('getter执行了')
    return this.#gender
  }
  
  set gender(gender){
    this.#gender = gender 
  } // 此处调用则需要p1.gender = "女"
}
  
const p1 = new Person("孙悟空"，18，”男“)

// p1.name = "hello"

// p1.getName()
p1.setAge(-11) // p1.age = 11 // p1.age
p1.setName('猪八戒')

console.log(p1.gender)

無.Flac's Blog

JavaScript - 基础③

面向对象

>面向对象编程(OOP)

>类

>属性

>方法

>构造函数

>封装

评论