07-面向对象

07-面向对象

---

1.面向对象

-面向对象（OOP）
1．程序是干嘛的?
-程序就是对现实世界的抽象（照片就是对人的抽象)
2．对象是干嘛的?
-一个事物抽象到程序中后就变成了对象
-在程序的世界中，一切皆对象
3．面向对象的编程：
-面向对象的编程指，程序中的所有操作都是通过对象来完成
-做任何事情之前都需要先找到它的对象，然后通过对象来完成各种操作

-一个事物通常由两部分组成:数据和功能
-一个对象由两部分组成:属性和方法
-事物的数据到了对象中，体现为属性
-事物的功能到了对象中，体现为方法

---

2.类的简介

使用Object创建对象的问题:
1．无法区分出不同类型的对象
2．不方便批量创建对象
在JS中可以通过类(class）来解决这个问题:
1．类是对象模板，可以将对象中的属性和方法直接定义在类中，定义后就可以直接通过类来创建对象
2．通过同一个类创建的对象，我们称为同类对象，可以使用instanceof来检查一个对象是否是由某个类创建
如果某个对象是由某个类所创建，则我们称该对象是这个类的实例

语法:
 class类名 {}//类名要使用大驼峰命名
 const类名= class {}

通过类创建对象
	new类()

//创建一个人的类
class Person {

}
const p1 = new Person();//调用构造函数创建对象
console.log(p1);
console.log(p1 instanceof Person);

---

3.属性和方法、构造函数

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

1).定义属性：

class Person{
/* 
类的代码块，默认就是严格模式，
类的代码块是用来设置对象的属性的，不是什么代码都能写
*/
 name="孙悟空"		//Person的实例属性name
 age=18      	//实力属性只能通过实例访问
 static test="test静态属性"	//使用static声明的属性，是静态属性（类属性） Person.tset
 //静态属性只能通过类访问
}
const p1=new Person()
const p2=new Person()
console.log(p1);
console.log(p2);

2).定义方法：

class Person{
 name="孙悟空"
 /* sayHello=function(){
         }//添加方法的一种方式 */
 sayHello(){
     console.log("haha"+this.name)
 }//添加方法（实例方法）实例方法中this就是当前实例
 static test(){
     console.log("我是静态方法",this)
 }//静态方法（类方法）通过类来调用 静态方法中this指向的是当前类
}
const p1=new Person()
p1.sayHello()

3).构造函数：

a.原旧写法：

class Person{
 name="孙悟空"
 age=18
 gender="男"
 sayHello(){
     console.log("haha"+this.name )
 }
}
const p1=new Person()
const p2=new Person()
const p3=new Person() 

b.构造函数写法：

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

class Person{
 constructor(name,age,gender){
     //console.log("构造函数执行了~")
     //可以在构造函数中，为实例属性进行赋值
     //在构造函数中，this表示当前所创建的对象
     this.name=name
     this.age=age
     this.gender=gender
 }
}
const p1=new Person("孙悟空",18,"男")
console.log(p1)

---

4.面向对象的特点

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

1).封装

a.对象就是一个用来存储不同属性的容器
b.对象不仅存储属性，还要负责数据的安全
c.直接添加到对象中的属性，并不安全，因为它们可以被任意的修改
d.如何确保数据的安全:
①.私有化数据
-将需要保护的数据设置为私有，只能在类内部使用
②.提供setter和getter方法来开放对数据的操作
-属性设置私有，通过getter setter方法操作属性带来的好处
Ⅰ.可以控制属性的读写权限
Ⅱ.可以在方法中对属性的值讲行验证
-封装主要用来保证数据的安全
-实现封装的方式:
1.属性私有化加#
2.通过 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("haha")
 }

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

 //setter方法，用来设置属性
 setName(name){
     this.#name=name
 }
 setAge(age){
     if(age>=0){
         this.#age=age
     }
 }

 get gender(){
     return this.#gender
 }
 set gender(gender){
     this.#gender=gender
 }
}
const p1=new Person("孙悟空",18,"男")
console.log(p1);
p1.getName()
p1.setName("猪八戒")

2).多态

a.在JS中不会检查参数的类型，所以这就意味着任何数据都可以作为参数传递
b.要调用某个函数，无需指定的类型，只要对象满足某些条件即可
-如果一个东西走路像鸭子，叫起来像鸭子，那么它就是鸭子
c.多态为我们提供了灵活性

class Person{
 constructor(name){
     this.name=name
 }
}
class Dog{
 constructor(name){
     this.name=name
 }
}
const person=new Person('孙悟空')
const dog=new Dog('旺财')
// console.log(person)
// console.log(dog)

//定义一个函数，这个函数将接收一个对象作为参数，他可以输出hello并打印对象的name属性
function sayHello(obj){
 console.log("hello,"+obj.name)
}
sayHello(person)		//hello 孙悟空

3).继承

a.可以通过extends关键来完成继承
b.当一个类继承另一个类时，就相当于将另一个类中的代码复制到了当前类中（简单理解)
c.继承发生时，被继承的类称为父类（超类)，继承的类称为子类
d.通过继承可以减少重复的代码，并且可以在不修改一个类的前提对其进行扩展
e.通过继承可以在不修改一个类的情况下对其进行扩展
f.OCP 开闭原则:
-程序应该对修改关闭，对扩展开放

class Animal{
    constructor(name){
        this.name=name
    }
    sayHello(){
        console.log("动物在叫")
    }
}
class Dog extends Animal{
    //在子类中，可以通过创建同名方法来重写父类的方法
    sayHello(){
        console.log("汪汪汪")
    }
}
class Cat extends Animal{
    //重写构造函数
    constructor(name,age){
        //重写父类的构造函数时，构造函数的第一行代码必须为SUPER（）
        super(name)//调用父类的构造函数
        this.age=age
    }
    sayHello(){
        //调用父类的sayHello
        super.sayHello()//在方法中可以使用super来引用父类的方法
        console.log("喵喵喵")
    }
}
const dog=new Dog("旺财")
const cat=new Cat("汤姆",3)
console.log(dog)
console.log(cat)
cat.sayHello()

---

5.对象的结构

对象中存储属性的区域实际有两个:
1)．对象自身
a.直接通过对象所添加的属性，位于对象自身中
b.在类中通过x = y 的形式添加的属性，位于对象自身中
2)．原型对象（prototype)
a.对象中还有一些内容，会存储到其他的对象里（原型对象)
b.在对象中会有一个属性用来存储原型对象，这个属性叫做proto
c.原型对象也负责为对象存储属性，当我们访问对象中的属性时，会优先访问对象自身的属性，
对象自身不包含该属性时，才会去原型对象中寻找
d.会添加到原型对象中的情况:
①．在类中通过xxx(){}方式添加的方法，位于原型中
②．主动向原型中添加的属性或方法

class Person{
name="孙悟空"
age=18
constructor(){
this.gender="男"
}
sayHello(){
console.log("Hello,我是"+this.name)
}
}
const p1=new Person()
p1.address="花果山"
p1.sayHello="hello"
console.log(p1)

1).原型对象prototype

a.我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象
b.如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性
指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
c.原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
d.我们可以将对象中共有的内容，统一设置到原型对象中。
e.当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
如果没有则会去原型对象中寻找，如果找到则直接使用
f.创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

访问一个对象的原型对象：

对象.__proto__ ——容易造成问题（不要使用=）
Object.getPrototypeOf(对象)——官方推荐

原型对象中的数据:

1．对象中的数据（属性、方法等)
2. constructor(对象的构造函数)

class Person{
    name="孙悟空"
    age=18
    sayHello(){
        console.log("Hello,我是"+this.name)
    }
}
const p=new Person()
console.log(p)
console.log(p.__proto__)
console.log(Object.getPrototypeOf(p))
console.log(Object.getPrototypeOf(p) == p.__proto__)

class MyClass{}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";
var mc = new MyClass();
mc.age = 18;
console.log(mc.name);	//我是原型中的名字
//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
console.log("name" in mc);		//true
//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性，使用该方法只有当对象自身中属性才会返回true
console.log(mc.hasOwnProperty("age"));		//true
console.log(mc.hasOwnProperty("hasOwnProperty"));		//false

注意:
原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同

p对象的原型链:p对象-->原型-->原型--> null
obj对象的原型链: obj对象-->原型--> null

原型链:
-读取使用对象属性时，会优先在对象自身寻找属性，如果对象中有，则使用，没有则去对象的原型中寻找
如果原型中有，则使用，没有则去原型的原型中寻找，直到找到0bject对象的原型（Object的原型没有原型（为null) )
如果依然没有找到，则返回undefined
-作用域链，是找变量的链，找不到会报错
-原型链，是找属性的链，找不到会返回undefined

console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));

2).原型的作用

-原型就相当于是一个公共的区域，可以被所有该类实例访问，
可以将该类实例中所有的公共属性（方法）统一存储到原型中，这样只需要创建一个属性，即可被所有实例访问
-JS中继承就是通过原型来实现的，当继承时，子类的原型就是一个父类的实例
-在对象中有些值是对象独有的，像属性（name，age，gender)每个对象都应该有自己值，
但是有些值对于每个对象来说都是一样的，像各种方法，对于一样的值没必要重复的创建

class Person{
    name="孙悟空"
    age=18
    sayHello(){
        console.log("Hello,我是"+this.name)
    }
}
const p=new Person()
const p1=new Person()
console.log(p)
console.log(p1)
//所有的同类型对象它们的原型对象是同一个,也就意味着，同类型对象的原型链是一样的
console.log(p===p1)		//false
console.log(p.__proto__===p1.__proto__)		//true

class Animal{}
class Cat extends Animal{}
const cat=new Cat()
//cat --> Animal实例 --> Object -->  Object原型 --> null
console.log(cat)
console.log(cat.__proto__)
console.log(cat.__proto__.__proto__)

3).修改原型

大部分情况下，我们是不需要修改原型对象的

注意:千万不要通过类的实例去修改原型
1．通过一个对象影响所有同类对象，这么做不合适
2．修改原型先得创建实例，麻烦
3．危险

除了通过proto能访问对象的原型外，还可以通过类的prototype属性，来访问实例的原型

修改原型时，最好通过通过类去修改：
好处:
1．一修改就是修改所有实例的原型
2．无需创建实例即可完成对类的修改
原则:
1．原型尽量不要手动改
2．要改也不要通过实例对象去改
3．通过 类.prototype 属性去修改
4．最好不要直接给prototype去赋值（类.prototype={}）

class Person{
    name="孙悟空"
    age=18
    sayHello(){
        console.log("Hello,我是"+this.name)
    }
}
Person.prototype.fly=()=>{
    console.log("我在飞！")
}
class Dog{}
const p=new Person()
const p1=new Person()
//通过对象修改原型，向原型中添加方法，修改后所有同类实例都能访问该方法
p.__proto__.run=()=>{
    console.log("我在跑~")
}
//p.__proto__=new Dog()//直接为对象赋值一个新的原型 不建议这么做
p.run()
p1.run()
console.log(Person.prototype)
console.log(Person.prototype===p.__proto__)

---

6.instanceof和hasOwn

1)instanceof:

a.instanceof用来检查一个对象是否是一个类的实例
b.instanceof检查的是对象的原型链上是否有该类实例，只要原型链上有该类实例，就会返回true
dog -> Animal的实例-> Object实例-> Object原型
c.Object是所有对象的原型，所以任何和对象和Object进行instanceof运算都会返回true

class Animal{}
class Dog extends Animal{}
const dog=new Dog()
console.log(dog instanceof Dog)		//true
console.log(dog instanceof Animal)		//true
console.log(dog instanceof Object)		//true

2)hasOwn

in
-使用in运算符检查属性时，无论属性在对象自身还是在原型中，都会返回true
对象.hasOwnProperty(属性名) //不推荐使用
-用来检查一个对象的自身是否含有某个属性
Object.hasOwn(对象,“属性名”)
-用来检查一个对象是否含有某个属性

class Person{
 name="孙悟空"
 age=18
 sayHello(){
     console.log("Hello,我是"+this.name)
 }
}
const p=new Person()
console.log("sayHello" in p)		//true
console.log(p.hasOwnProperty("name"))		//true
console.log(p.hasOwnProperty("sayHello"))		//false
console.log(Object.hasOwn(p,"name"))		//true
console.log(Object.hasOwn(p,"sayHello"))		//false 

---

7.旧类

早期JS中，直接通过函数来定义类
一个函数如果直接调用xxx()那么这个函数就是一个普通函数
一个函数如果通过new调用new xxx(）那么这个函数就是一个构造函数

var Person = (function () {
 //等价于：class Person{}
 function Person(name, age) {
     //在构造函数中，this表示新建的对象
     this.name = name
     this.age = age
 }
 //向原型对象中添加属性（方法）
 Person.prototype.sayHello = function () {
     console.log(this.name)
 }
 //静态属性
 Person.staticProperty = "xxx"
 //静态方法
 Person.staticMethod = function () { }

 return Person
})()
const p = new Person("孙悟空", 18)
//console.log(p)
/* 
         继承
     */
var Animal=(function(){
 function Animal(){}
 return Animal
})()
var Cat=(function(){
 function Cat(){}
 //继承Animal
 Cat.prototype=new Animal()
 return Cat
})()
var cat=new Cat()
console.log(cat);

---

8.new运算符

a.new运算符是创建对象时要使用的运算符
b.使用new时，到底发生了哪些事情:（详情）
使用new调用函数时，将会发生这些事:
①．创建一个普通的JS对象（Object对象{}），为了方便，称其为新对象
②．将构造函数的prototype属性设置为新对象的原型
③．使用实参来执行构造函数，并且将新对象设置为函数中的this
④．如果构造函数返回的是一个非原始值，则该值会作为new运算的返回值返回（千万不要这么做)
-如果构造函数的返回值是一个原始值或者没有指定返回值，则新的对象将会作为返回值返回，通常不会为构造函数指定返回值
c.当使用new去调用一个函数时，这个函数将会作为构造函数调用，

function MyClass(){
 //return 1
}
var mc=new MyClass()
console.log(mc);

---

9.对象总结

面向对象本质就是，编写代码时所有的操作都是通过对象来进行的。
                面向对象的编程的步骤:
                    1．找对象
                    2．搞对象
                
                学习对象:
                    1．明确这个对象代表什么，有什么用
                    2．如何获取到这个对象
                    3．如何使用这个对象（对象中的属性和方法)

                对象的分类:
                    内建对象
                        -由ES标准所定义的对象
                        -比如 Object Function String Number .. ..

                    宿主对象
                        -由浏览器提供的对象
                        - BOM、DOM

                    自定义对象
                        -由开发人员自己创建的对象

`