面向对象编程

真的想不出名儿

已于 2023-07-16 08:50:54 修改

阅读量178

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言

于 2023-07-15 18:30:54 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/131741131

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

面向过程编程

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个依次调用就可以了
面向过程：就是按照我么分析好的步骤，按照步骤解决问题

蛋炒饭

准备米饭
炒鸡蛋（倒入鸡蛋翻炒）
炒胡萝卜、香肠
把米饭、鸡蛋、胡萝卜一起翻炒

优点：
性能高，适合跟硬件联系比较紧密的东西，比如单片机，采用面向过程编程

缺点：
不灵活，复用性差

面向对象编程

把事务分解成为一个个对象，对象之间分工合作
在这里插入图片描述
优点：
易维护，易复用，易拓展，由于面向对象有封装，继承，多态的特性，设计的系统更加灵活，易于维护

缺点：
性能低

面向对象的特性

封装性
继承性
多态性

构造函数

封装时面向对象思想中比较重要的一部分，js面向对象可以通过构造函数来实现封装
把公共的属性和方法抽取封装到构造函数里面来实现数据的共享，这样创建的实例对象就可以使用这些属性和方法

        // 构造函数实现封装
        function Person(name, age) {
            this.name = name
            this.age = age
            this.sayHi = function () {
                console.log("HI~")
            }
        }

        const zs = new Person('张三', 18)
        const ls = new Person('李四', 19)
        console.log(zs)
        console.log(ls)
        console.log(zs === ls)  //false

        /* 
        总结：
        构造函数体现了面向对象的封装特性
        构造函数实例创建的对象彼此独立，互不影响
        */

        // 构造函数实现封装有个问题   存在浪费内存的问题  （构造函数中函数会多次创建，占用内存）
        console.log(zs.sayHi === ls.sayHi)  //false  两个函数不一样

原型对象

js规定，每一个构造函数都有一个prototype属性，指向另一个对象，我们称为原型对象
使用场景
可以解决：构造函数封装时函数（方法）会多次创建，占用内存的问题
原型对象可以挂载函数，对象实例化不会多次创建原型对象里的函数，节约内存

    实例对象可以直接访问原型对象中的函数
    执行过程：先找实例对象的属性或函数，找不到会再找原型对象中属性或函数

        // 构造函数实现封装
        function Person(name, age) {
            this.name = name
            this.age = age
            // this.sayHi=function(){
            //     console.log("HI~")
            // }
        }
        // console.log(Person.prototype)
        Person.prototype.sayHi = function () {
            console.log("HI~")
        }
        console.log(Person.prototype)
        const zs = new Person('张三', 18)
        const ls = new Person('李四', 19)
        zs.sayHi()
        ls.sayHi()
        console.log(zs.name)
        console.log(zs.sayHi === ls.sayHi)  //true

        // 实例对象可以直接访问原型对象中的函数
        // 执行过程：先找实例对象的属性或函数，找不到会再找原型对象中属性或函数

        const arr = new Array()
        console.log(Array.prototype)//原型对象
        // arr.filter()

原型对象-this指向

构造函数和原型对象中this都指向 实例化的对象

        // 构造函数this指向  实例对象
        function Person(name, age) {
            this.name = name
        }

        // 原型对象this指向
        Person.prototype.sayHi = function () {
            console.log('~HI')
            console.log(this)  //指向实例对象张三
        }
        const zs = new Person("zs", 18)
        zs.sayHi()
        /*
         注意：
         箭头函数不能做构造函数，因为箭头函数里没有this
         原型对象里面的函数如果需要用到this，也不要用箭头函数 
        */

constructor属性

每个原型对象里面都有个constructor属性(constructor构造函数)

作用:该属性指向该原型对象的构造函数

使用场景:

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值

但是这样会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了

此时我们可以再修改后的原型对象中，添加一个constructor指向原来的构造函数

        function Person(name) {
            this.name = name
        }

        // constructor属性在原型对象里面
        console.log(Person.prototype)

        // constructor属性指向原型对象的构造函数
        console.log(Person.prototype.constructor === Person)  //true

        // 使用场景
        // Person.prototype.sing= function(){
        //     console.log("我会唱歌")
        // }
        // Person.prototype.dance= function(){
        //     console.log("我会跳舞")
        // }
        Person.prototype = {
            // 手动设置constructor 指向Person
            constructor: Person,
            sing() {
                console.log("我会唱歌")
            },
            dance() {
                console.log("我会跳舞")
            }
        }
        console.log(Person.prototype)

proto属性

对象都会有一个属性__proto__指向构造函数的prototype原型对象

之所以我们对象可以使用构造函数prototype原型对象的方法，就是因为对象有__proto__的存在

        function Person(name) {
            this.name = name
        }

        // 实例对象里有__proto__属性
        const zs = new Person('zs')
        console.log(zs)

        // __proto__ 指向原型对象
        console.log(zs.__proto__ === Person.prototype)//true


        // 注意
        // prototype 原型对象  __proto__ 原型
        // __proto__ 非标准属性  尽量不要去修改它 否则影响性能

原型、原型对象和实例对象之间的关系

在这里插入图片描述

案例

    // const arr = new Array()
    // arr.filter

    // 给数组扩展求最大值方法 和求和方法

    const arr = [1, 2, 3];
    arr.reverse()
    // console.log(arr)  //[3, 2, 1]

    // 需要扩展
    // arr.max()  //3
    // arr.sum()   //6

    // 数组扩展求最大值/最小值
    Array.prototype.max = function () {
      // this  原型对象里的this指向实例对象
      return Math.max(...this)
    }

    console.log(arr.max())
    console.log([3, 6, 7].max())
    console.log([22, 55, 44].max())

    // 数组扩展求和方法
    const arr2 = [1, 2, 3]
    Array.prototype.sum = function () {
      // 求和
      return this.reduce((prev, current) => prev + current, 0)
    }

    console.log(arr2.sum())
    console.log([3, 5, 6].sum())

原型链

proto属性链状结构称为原型链
原型链为对象成员的查找机制提供了一个方向，或者是一条路线

查找机制

当访问一个对象成员(属性/方法)时，首先查找这个对象自身有没有该成员(属性/方法)
如果没有就查找它的原型对象(也就是proto指向的prototype原型对象)
如果还没有就查找原型对象的原型对象(Object的原型对象)
依次类推一直找到Object为止(null)

在这里插入图片描述

// __proto__属性链状结构称为原型链

function Person(name) {
	this.name = name
}

// 实例对象
const zs = new Person('张三');
// zs.sayHi= function(){
//     console.log("实例对象的方法")
// }
// zs.sayHi()
// Person原型对象
// Person.prototype.sayHi=function(){
//     console.log("Person原型对象的方法")
// }
// zs.sayHi()
// Object原型对象
// Object.prototype.sayHi=function(){
//     console.log("Object原型对象的方法")
// }
// zs.sayHi()
// null
console.log(zs.sayHi)  //undefined
// zs.sayHi()  //zs.sayHi is not a function

instanceof运算符

作用：用来检测构造函数.prototype是否存在于实例对象的原型链上

实例对象.instanceof 构造函数

原型继承

继承是面向对象编程的另一个特性，龙生龙，凤生凤老鼠的儿子会打洞描述的正是继承的含义

有些公共的属性和方法可以写到父级身上，子级通过继承也可以使用这些属性和方法

js中大多是借助原型对象实现继承的特性

const person ={
	eyes: 2,
	eat:function(){
		console.log("我会吃饭")
	}
}

function Man(){
            
}


function Woman(){
          
}

// 封装  抽取公共部分
// 把男人和女人公共的部分抽取出来放到person对象里面
// 继承 通过原型对象实现继承
// 把男人 女人原型对象赋值为person对象
Man.prototype =person
const zs = new Man()
console.log(zs)
Woman.prototype = person
const xl = new Woman()
console.log(xl)
// 3.使用字面量对象实现继承会有问题
// 女人会生孩子
// 男人和女人同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响
Woman.prototype.baby =function(){
	console.log("我会生孩子")
}
console.log(xl)
console.log(zs)

解决

构造函数实例化对象继承，new每次都会创建一个新的对象

// 解决  男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法
//  使用  构造函数实例化对象继承，new每次都会创建一个新的对象
        
function Person (){
	this.eyes=2
}
Person.prototype.eat = function(){
	console.log("我会吃饭")
}

console.log(new Person()===new Person())  //false
function Man(){

}

Man.prototype = new Person()
Man.prototype.constructor = Man


function Woman(){
          
}
Woman.prototype = new Person()
Woman.prototype.constructor  =Woman

const zs = new Man()

const xl = new Woman()

Woman.prototype.baby =function(){
	console.log("我会生孩子")
}
console.log(xl)
console.log(zs)

模态框封装案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .modal {
            width: 400px;
            height: 100px;
            border: 1px solid #333;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .modal .header {
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

        .modal .body {
            text-align: center;
        }
    </style>
</head>

<body>
    <button class="del">删除</button>
    <button class="login">登录</button>
    <!-- <div class="modal">
          <div class="header"><span>温馨提示</span><i>x</i></div>
          <div class="body">你没有删除权限操作</div>
    </div> -->
    <script>
        // 面向对象写插件   模态框
        // 构造函数  把模态框封装一个构造函数Model 每次new都会产出一个模态框  所以点击不同的按钮 就是在做new模态框实例化
        // 模态框有什么功能   显示   关闭    构造函数Model的原型对象上

        //  1.Modal构造函数
        // 公共属性  标题title   提示信息内容message  可以设置默认参数
        function Modal(title = "", message = "") {
            //   创建modal模态框盒子
            // 创建div标签  modal
            // modal盒子内部填充2个div标签并且修改文字内容
            this.modalBox = document.createElement('div')
            this.modalBox.className = 'modal'
            this.modalBox.innerHTML = `
            <div class="header"><span>${title}</span><i>x</i></div>
            <div class="body">${message}</div>
            `
            console.log(this.modalBox)
        }


        // new Modal("温馨提示","你没有删除权限操作")
        // new Modal("友情提示","你还没有登录")

        // open
        //   写到构造函数的原型对象上
        // 把刚才创建的modalBox添加到页面body标签中
        // open打开的本质就是 把创建的标签添加到页面中
        // 点击按钮 实例化对象，传入对应的参数 执行open方法
        Modal.prototype.open = function () {
            // 注意不能用箭头函数
            // 把刚才创建的modalBox添加到页面body标签中
            // bug: 判断页面中有没有modal 有就移除 没有就添加
            const box = document.querySelector('.modal')
            box && box.remove()
            document.body.append(this.modalBox)
            // 要等到盒子显示出来 就可以绑定点击事件
            this.modalBox.querySelector('i').addEventListener('click', () => {
                console.log(1)
                // 这个地方要用到箭头函数  this指向实例对象
                this.close()
            })

        }

        document.querySelector('.del').addEventListener('click', function () {
            const del = new Modal("温馨提示", "你没有删除权限操作")
            del.open()
        })


        document.querySelector('.login').addEventListener('click', function () {
            const login = new Modal("友情提示", "你还没有登录")
            login.open()
        })

        // close
        // 写到构造函数的原型对象上
        // 把刚才创建的modalBox 从页面body标签中删除
        // 需要注意x关闭按钮在模态框里面
        // 页面显示这个模态框就要绑定事件
        // 页面显示模态框在open里面   绑定关闭事件也要写到open方法里面
        Modal.prototype.close = function () {
            this.modalBox.remove()
        }
    </script>
</body>

</html>

函数递归

递归：递归就是一种函数调用自身的操作（函数内部自己调用自己–递归–这个函数就是递归函数）

递归函数的作用和循环效果类似

递归一定要有退出条件return，没有就会出现 ‘栈溢出’

function fn(){
   fn()
}

案例

// 函数内部自己调用自己  ---递归

// 使用函数递归打印3句话
let i = 1;
function fn() {
	console.log(`我是第${i}句话`)
	if (i >= 3) return
	i++
	fn()  //递归
}
// 10递归.html:16 Uncaught RangeError: Maximum call stack size exceeded
// fn() 

// 练习：利用递归函数实现setTimeout 模拟setInterval效果
// 页面每隔一秒输出当前的时间 
// 输出当前时间可以使用new Date().toLocalString()

function timer() {
	const time = new Date().toLocaleString()
	console.log(time)
	setTimeout(timer, 1000)
}

timer()

// 1+2+3+4+5+....+n

function fn1(n) {
	if (n === 1) {
	return 1
	}
	return n + fn1(n - 1)
}

fn1(6)