面向对象编程

面向过程编程
解决问题的过程按步骤进行，第一步做什么，第二步做什么
面向对象编程
解决问题的话找能解决问题的我对象，让对象的方法解决问题，如果没有这个对象，就创建这个对象

创建对象方式

简单方式new obj
字面量方式
工厂函数
构造函数
- 函数名就是对象类型名（首字母大写）
- 构造函数中，通过this关键字定义属性和方法
- 通过new语句调用构造函数对象

<script>
//简单方式
    let personpObj=new Object()
    personpObj.name='jack';
    personpObj.age=20
    personpObj.playGame=function(){
        console.log('打游戏');
    }
    personpObj.playGame()
//结果打游戏

//字面量方式
    let person1={
        name:'jack',
        age:20,
        playGame:function(){
            console.log('打游戏')
        }
    }
    person1.playGame()
//结果打游戏

//工厂函数
    function person3(name,age){
       return{
                name,
                age,
                playGame:function(){
                    console.log(this.name+'打游戏');
                }
       }   
                

    }
    let person3_1=person3('jack',20)
    person3_1.playGame()
//结果jack打游戏

//构造函数
    function Person4(name,age){
        this.name=name;
        this.age=age;
        this.playGame=function(){
            console.log(this.name+'打游戏');
        }
    }
    let person4_1=new Person4('jack',20)
    person4_1.playGame()
//结果jack打游戏

构造函数特点

构造函数也是函数，任何函数只要使用new操作符调用就是构造函数。而不使用new操作符调用的函数就是普通函数

function Person(name){
        this.name=name
        this.say=function(){
            console.log(this.name,'说话');
        }
    }
    let person1=new Person('rose')
    person1.say()
//结果rose说话

    Person('rose')
    window.say()
//结果rose说话

注：如果函数没有用new操作符，那么属性和方法会自动添加到window对象上
2. 构造函数的问题
构造函数定义的问题会在每个实例上都创建一遍，也就是
this.say=new function('console.log(this.name)')
要解决这个问题可以把函数定义到构造函数外部，但这样会导致全局作用域被搞乱，这里的函数只是一个指向外部的指针

<script>
    function Person(name){
        this.name=name
        this.say=say
    }
//这里在函数体外部
    function say(){
            console.log(this.name,'说话');
        }
    let person1=new Person('jack')
    person1.say()
//结果jack说话
</script>

检查对象类型

instanceof关键字判定数据类型对象
方法：对象 instanceof 数据类型

<script>
    let arr=[1,2]
    console.log(arr instanceof Array);
//结果true

    function Person(name){
        this.name=name
        this.say=say
    }
    function say(){
            console.log(this.name,'说话');
        }
    function Substance(name) {
        this.name=name
    }
    
    let person1=new Person('jack')
    console.log(person1 instanceof Person);
//结果true
    console.log(person1 instanceof Substance );
//结果false
</script>

原型对象

实例对象的公共属性和方法，提取出来定义到一个独立的对象，节约内存空间
JS规定，每个构造函数都有一个prototype指向它的原型
在原型对象上定义的属性和方法可以被所有构造函数实例对象访问
注：为何实例对象能访问原型对象的公共属性和方法？
每个对象都有一个隐藏原型对象__proto__指向原型对象
对象查找时，先查找构造函数中方法，没有再查找原型对象中的方法

请添加图片描述

实例：做个选项卡