51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

JavaScript - 基础③

⭐️ 有关JavaScript的学习总结



面向对象 {#%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1}

>面向对象编程(OOP) {#%3E%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B(oop)}

1. 程序是干嘛的?
 - 程序就是对现实世界的抽象(照片就是对人的抽象)



2. 对象是干嘛的?






* 一个事物抽象到程序中后就变成了对象


* 在程序的世界中,一切皆对象




例如:( )
心仪的女人:王老五




* 
  一个事物通常由两部分组成:数据和功能





* 
  一个对象由两部分组成:属性和方法





* 
  事物的数据到了对象中,体现为属性





* 
  事物的功能到了对象中,体现为方法





* 
  数据:
  姓名
  年龄
  身高
  体重





* 
  功能:
  睡
  吃







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


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

    sleep(){
      console.log(this.name + "睡觉了")
    }




}




3. 面向对象的编程


`
`
* 面向对象的编程指,程序中的所有操作都是通过对象来完成


* `做任何事情之前都需要先找到它的对象,然后通过对象来完成各种操作`

>类 {#%3E%E7%B1%BB}

使用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 + "吃饭了~")
        },
    }</code></pre>



  
#### \>属性 {#%3E%E5%B1%9E%E6%80%A7}


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

  
```javascript
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)`

```


<br />



  
#### \>方法 {#%3E%E6%96%B9%E6%B3%95}


  
```javascript
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() //静态方法的调用方式`

```


<br />



  
#### \>构造函数 {#%3E%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0}


  
```javascript
// 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)`

```


<br />



  
#### \>封装 {#%3E%E5%B0%81%E8%A3%85}


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

  
```javascript
/* 

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)`

```


<br />



 


赞(0)
未经允许不得转载:工具盒子 » JavaScript - 基础③