⭐️ 有关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 />