JavaScript面向对象编程的奥秘揭秘:掌握核心概念与设计模式

​🌈个人主页:前端青山
🔥系列专栏:JavaScript篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript-面向对象

目录

什么是面向对象?

类与对象的主要区别

创建对象的方式

调用系统内置的构造函数创建对象

字面量的方式创建一个对象

使用工厂函数的方式创建对象

使用自定义构造函数创建对象

构造函数详解

构造函数的基本使用

使用构造函数创建一个对象

原型

prototype

__proto__

原型链

一个对象所属的构造函数

constructor

链状结构

原型链的访问原则

对象的赋值

总结

面向对象改写案例 - 选项卡

什么是面向对象?

把数据及对数据的操作方法放在一起,作为一个相互依存的整体——对象。对同类对象抽象出其共性,形成类。类中的大多数数据,只能用本类的方法进行处理。

  • 首先,我们要明确,面向对象不是语法,是一个思想,是一种 编程模式

  • 面向: 面(脸),向(朝着)

  • 面向过程: 脸朝着过程 =》 关注着过程的编程模式

  • 面向对象: 脸朝着对象 =》 关注着对象的编程模式

  • 实现一个效果

    • 在面向过程的时候,我们要关注每一个元素,每一个元素之间的关系,顺序,。。。

    • 在面向对象的时候,我们要关注的就是找到一个对象来帮我做这个事情,我等待结果

  • 例子 🌰: 我要吃面条

    • 面向过程

      • 用多少面粉

      • 用多少水

      • 怎么和面

      • 怎么切面条

      • 做开水

      • 煮面

      • 吃面

    • 面向对象

      • 找到一个面馆

      • 叫一碗面

      • 等着吃

    • 面向对象就是对面向过程的封装

  • 我们以前的编程思想是,每一个功能,都按照需求一步一步的逐步完成

  • 我们以后的编程思想是,每一个功能,都先创造一个 面馆,这个 面馆 能帮我们作出一个 面(完成这个功能的对象),然后用 面馆 创造出一个 ,我们只要等到结果就好了

类与对象的主要区别

对象:对象是类的一个实例(对象不是找个女朋友),有状态和行为。例如,一条狗是一个对象,它的状态有:颜色、名字、品种;行为有:摇尾巴、叫、吃等。

:类是一个模板,它描述一类对象的行为和状态。

创建对象的方式

  • 因为面向对象就是一个找到对象的过程

  • 所以我们先要了解如何创建一个对象

调用系统内置的构造函数创建对象

  • js 给我们内置了一个 Object 构造函数

  • 这个构造函数就是用来创造对象的

  • 当 构造函数 和 new 关键字连用的时候,就可以为我们创造出一个对象

  • 因为 js 是一个动态的语言,那么我们就可以动态的向对象中添加成员了

    // 就能得到一个空对象
    var o1 = new Object() 
    ​
    // 正常操作对象
    o1.name = 'Jack'
    o1.age = 18
    o1.gender = '男'

字面量的方式创建一个对象

  • 直接使用字面量的形式,也就是直接写 {}

  • 可以在写的时候就添加好成员,也可以动态的添加

    // 字面量方式创建对象
    var o1 = {name: 'Jack',age: 18,gender: '男'
    }
    ​
    // 再来一个
    var o2 = {}
    o2.name = 'Rose'
    o2.age = 20
    o2.gender = '女'

使用工厂函数的方式创建对象

  • 先书写一个工厂函数

  • 这个工厂函数里面可以创造出一个对象,并且给对象添加一些属性,还能把对象返回

  • 使用这个工厂函数创造对象

    // 1. 先创建一个工厂函数
    function createObj() {// 手动创建一个对象var obj = new Object()
    ​// 手动的向对象中添加成员obj.name = 'Jack'obj.age = 18obj.gender = '男'
    ​// 手动返回一个对象return obj
    }
    ​
    // 2. 使用这个工厂函数创建对象
    var o1 = createObj()
    var o2 = createObj()

使用自定义构造函数创建对象

  • 工厂函数需要经历三个步骤

    • 手动创建对象

    • 手动添加成员

    • 手动返回对象

  • 构造函数会比工厂函数简单一下

    • 自动创建对象

    • 手动添加成员

    • 自动返回对象

  • 先书写一个构造函数

  • 在构造函数内向对象添加一些成员

  • 使用这个构造函数创造一个对象(和 new 连用)

  • 构造函数可以创建对象,并且创建一个带有属性和方法的对象

  • 面向对象就是要想办法找到一个有属性和方法的对象

  • 面向对象就是我们自己制造 构造函数 的过程

    // 1. 先创造一个构造函数
    function Person(name, gender) {this.age = 18this.name = namethis.gender = gender
    }
    ​
    // 2. 使用构造函数创建对象
    var p1 = new Person('Jack', 'man')
    var p2 = new Person('Rose', 'woman')

构造函数详解

  • 我们了解了对象的创建方式

  • 我们的面向对象就是要么能直接得到一个对象

  • 要么就弄出一个能创造对象的东西,我们自己创造对象

  • 我们的构造函数就能创造对象,所以接下来我们就详细聊聊 构造函数

构造函数的基本使用

  • 和普通函数一样,只不过 调用的时候要和 new 连用,不然就是一个普通函数调用

    function Person() {}
    var o1 = new Person()  // 能得到一个空对象
    var o2 = Person()      // 什么也得不到,这个就是普通函数调用
    • 注意: 不写 new 的时候就是普通函数调用,没有创造对象的能力

  • 首字母大写

    function person() {}
    var o1 = new person() // 能得到一个对象
    ​
    function Person() {}
    var o2 = new Person() // 能得到一个对象
    • 注意: 首字母不大写,只要和 new 连用,就有创造对象的能力

  • 当调用的时候如果不需要传递参数可以不写 (),建议都写上

    function Person() {}
    var o1 = new Person()  // 能得到一个空对象
    var o2 = new Person    // 能得到一个空对象 
    • 注意: 如果不需要传递参数,那么可以不写 (),如果传递参数就必须写

  • 构造函数内部的 this,由于和 new 连用的关系,是指向当前实例对象的

    function Person() {console.log(this)
    }
    var o1 = new Person()  // 本次调用的时候,this => o1
    var o2 = new Person()  // 本次调用的时候,this => o2
    • 注意: 每次 new 的时候,函数内部的 this 都是指向当前这次的实例化对象

  • 因为构造函数会自动返回一个对象,所以构造函数内部不要写 return

    • 你如果 return 一个基本数据类型,那么写了没有意义

    • 如果你 return 一个引用数据类型,那么构造函数本身的意义就没有了

使用构造函数创建一个对象

  • 我们在使用构造函数的时候,可以通过一些代码和内容来向当前的对象中添加一些内容

    function Person() {this.name = 'Jack'this.age = 18
    }
    ​
    var o1 = new Person()
    var o2 = new Person()
    • 我们得到的两个对象里面都有自己的成员 nameage

  • 我们在写构造函数的时候,是不是也可以添加一些方法进去呢?

    function Person() {this.name = 'Jack'this.age = 18this.sayHi = function () {console.log('hello constructor')}
    }
    ​
    var o1 = new Person()
    var o2 = new Person()
    • 显然是可以的,我们的到的两个对象中都有 sayHi 这个函数

    • 也都可以正常调用

  • 但是这样好不好呢?缺点在哪里?

    function Person() {this.name = 'Jack'this.age = 18this.sayHi = function () {console.log('hello constructor')}
    }
    ​
    // 第一次 new 的时候, Person 这个函数要执行一遍
    // 执行一遍就会创造一个新的函数,并且把函数地址赋值给 this.sayHi
    var o1 = new Person()
    ​
    // 第二次 new 的时候, Person 这个函数要执行一遍
    // 执行一遍就会创造一个新的函数,并且把函数地址赋值给 this.sayHi
    var o2 = new Person()
    • 这样的话,那么我们两个对象内的 sayHi 函数就是一个代码一摸一样,功能一摸一样

    • 但是是两个空间函数,占用两个内存空间

    • 也就是说 o1.sayHi 是一个地址,o2.sayHi 是一个地址

    • 所以我们执行 console.log(o1 === o2.sayHi) 的到的结果是 false

    • 缺点: 一摸一样的函数出现了两次,占用了两个空间地址

  • 怎么解决这个问题呢?

    • 就需要用到一个东西,叫做 原型

原型

  • 原型的出现,就是为了解决 构造函数的缺点

  • 也就是给我们提供了一个给对象添加函数的方法

  • 不然构造函数只能给对象添加属性,不能合理的添加函数就太 LOW 了

prototype

  • 每一个函数天生自带一个成员,叫做 prototype,是一个对象空间

  • 即然每一个函数都有,构造函数也是函数,构造函数也有这个对象空间

  • 这个 prototype 对象空间可以由函数名来访问

    function Person() {}
    ​
    console.log(Person.prototype) // 是一个对象
    • 即然是个对象,那么我们就可以向里面放入一些东西

    function Person() {}
    ​
    Person.prototype.name = 'prototype'
    Person.prototype.sayHi = function () {}
  • 我们发现了一个叫做 prototype 的空间是和函数有关联的

  • 并且可以向里面存储一些东西

  • 重点: 在函数的 prototype 里面存储的内容,不是给函数使用的,是给函数的每一个实例化对象使用的

  • 那实例化对象怎么使用能?

__proto__

  • 每一个对象都天生自带一个成员,叫做 __proto__,是一个对象空间

  • 即然每一个对象都有,实例化对象也是对象,那么每一个实例化对象也有这个成员

  • 这个 __proto__ 对象空间是给每一个对象使用的

  • 当你访问一个对象中的成员的时候

    • 如果这个对象自己本身有这个成员,那么就会直接给你结果

    • 如果没有,就会去 __proto__ 这个对象空间里面找,里面有的话就给你结果

    • 未完待续。。。

  • 那么这个 __proto__ 又指向哪里呢?

    • 这个对象是由哪个构造函数 new 出来的

    • 那么这个对象的 __proto__ 就指向这个构造函数的 prototype

    function Person() {}
    ​
    var p1 = new Person()
    ​
    console.log(p1.__proto__ === Person.prototype) // true
    • 我们发现实例化对象的 __proto__ 和所属的构造函数的 prototype 是一个对象空间

    • 我们可以通过构造函数名称来向 prototype 中添加成员

    • 对象在访问的时候自己没有,可以自动去自己的 __proto__ 中查找

    • 那么,我们之前构造函数的缺点就可以解决了

      • 我们可以把函数放在构造函数的 prototype

      • 实例化对象访问的时候,自己没有,就会自动去 __proto__ 中找

      • 那么也可以使用了

    function Person() {}
    ​
    Person.prototype.sayHi = function () {console.log('hello Person')
    }
    ​
    var p1 = new Person()
    p1.sayHi()
    • p1 自己没有 sayHi 方法,就会去自己的 __proto__ 中查找

    • p1.__proto__ 就是 Person.prototype

    • 我们又向 Person.prototype 中添加了 sayHi 方法

    • 所以 p1.sayHi 就可以执行了

  • 到这里,当我们实例化多个对象的时候,每个对象里面都没有方法

    • 都是去所属的构造函数的 protottype 中查找

    • 那么每一个对象使用的函数,其实都是同一个函数

    • 那么就解决了我们构造函数的缺点

    function Person() {}
    ​
    Person.prototype.sayHi = function () {console.log('hello')
    }
    ​
    var p1 = new Person()
    var p2 = new Person()
    ​
    console.log(p1.sayHi === p2.sayHi)
    • p1Person 的一个实例

    • p2Person 的一个实例

    • 也就是说 p1.__proto__p2.__proto__ 指向的都是 Person.prototype

    • p1 去调用 sayHi 方法的时候是去 Person.prototype 中找

    • p2 去调用 sayHi 方法的时候是去 Person.prototype 中找

    • 那么两个实例化对象就是找到的一个方法,也是执行的一个方法

  • 结论

    • 当我们写构造函数的时候

    • 属性我们直接写在构造函数体内

    • 方法我们写在原型上

原型链

  • 我们刚才聊过构造函数了,也聊了原型

  • 那么问题出现了,我们说构造函数的 prototype 是一个对象

  • 又说了每一个对象都天生自带一个 __proto__ 属性

  • 那么 构造函数的 prototype 里面的 __proto__ 属性又指向哪里呢?

一个对象所属的构造函数

  • 每一个对象都有一个自己所属的构造函数

  • 比如: 数组

    • ​
      // 数组本身也是一个对象
      var arr = []
      var arr2 = new Array()​

      以上两种方式都是创造一个数组

    • 我们就说数组所属的构造函数就是 Array

  • 比如: 函数

    // 函数本身也是一个对象
    var fn = function () {}
    var fun = new Function()
    • 以上两种方式都是创造一个函数

    • 我们就说函数所属的构造函数就是 Function

constructor

  • 对象的 __proto__ 里面也有一个成员叫做 constructor

  • 这个属性就是指向当前这个对象所属的构造函数

链状结构

  • 当一个对象我们不知道准确的是谁构造的时候,我们呢就把它看成 Object 的实例化对象

  • 也就是说,我们的 构造函数 的 prototype 的 __proto__ 指向的是 Object.prototype

  • 那么 Object.prototype 也是个对象,那么它的 __proto__ 又指向谁呢?

  • 因为 Object 的 js 中的顶级构造函数,我们有一句话叫 万物皆对象

  • 所以 Object.prototype 就到顶了,Object.prototype__proto__ 就是 null

原型链的访问原则

  • 我们之前说过,访问一个对象的成员的时候,自己没有就会去 __proto__ 中找

  • 接下来就是,如果 __proto__ 里面没有就再去 __proto__ 里面找

  • 一直找到 Object.prototype 里面都没有,那么就会返回 undefiend

对象的赋值

  • 到这里,我们就会觉得,如果是赋值的话,那么也会按照原型链的规则来

  • 但是: 并不是!并不是!并不是! 重要的事情说三遍

  • 赋值的时候,就是直接给对象自己本身赋值

    • 如果原先有就是修改

    • 原先没有就是添加

    • 不会和 __proto__ 有关系

总结

  • 到了这里,我们就发现了面向对象的思想模式了

    • 当我想完成一个功能的时候

    • 先看看内置构造函数有没有能给我提供一个完成功能对象的能力

    • 如果没有,我们就自己写一个构造函数,能创造出一个完成功能的对象

    • 然后在用我们写的构造函数 new 一个对象出来,帮助我们完成功能就行了

  • 比如: tab选项卡

    • 我们要一个对象

    • 对象包含一个属性:是每一个点击的按钮

    • 对象包含一个属性:是每一个切换的盒子

    • 对象包含一个方法:是点击按钮能切换盒子的能力

    • 那么我们就需要自己写一个构造函数,要求 new 出来的对象有这些内容就好了

    • 然后在用构造函数 new 一个对象就行了

面向对象改写案例 - 选项卡

<div id="box"><ul><li class="active">1</li><li>2</li><li>3</li></ul><ol><li class="active">1</li><li>2</li><li>3</li></ol>
</div>
*{padding: 0;margin: 0;
}
#box{width: 500px;height: 320px;display: flex;flex-direction: column;margin: 50px auto;border: 3px solid #333;
}
#box>ul{height: 60px;display: flex;
}
#box > ul > li {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 30px;color: #fff;background-color: skyblue;cursor: pointer;
}
#box > ul > li.active{background-color: orange;
}
#box > ol {flex: 1;position: relative;
}
#box > ol > li {width: 100%;height: 100%;background-color: purple;font-size: 50px;color: #fff;position: absolute;left: 0;top: 0;display: none;
}
#box > ol > li.active {display: block;
}
//创建自定义构造函数
function Tab(){//tab选项this.tab = document.querySelectorAll('ul>li');//内容选项this.content = document.querySelectorAll('ol>li');//添加事件this.addEvent();
}
//添加原型方法
Tab.prototype.addEvent = function(){//遍历添加事件for(let i = 0,len = this.tab.length;i < len;i ++){this.tab[i].onclick = function(){//将所有的选项移除类名for(let j = 0;j < this.tab.length;j ++){this.tab[j].classList.remove('active');this.content[j].classList.remove('active');}//给当前选项添加类名this.tab[i].classList.add('active');this.content[i].classList.add('active');}.bind(this);}
}
//创建对象
new Tab();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/203786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ambari 开启hdfs回收站机制

hdfs回收站类似于我们常用的windows中的回收站&#xff0c;被删除的文件会被暂时存储于此&#xff0c;和回收站相关的参数有两个&#xff1a; fs.trash.interval&#xff1a;默认值为0 代表禁用回收站&#xff0c;其他值为回收站保存文件时间&#xff0c;单位为分钟 fs.trash…

Java Spring boot 中使用国产达梦数据库

POM.xml配置 <dependency><groupId>com.dameng</groupId><artifactId>DmJdbcDriver18</artifactId><version>8.1.2.192</version></dependency> Appication.yml配置 spring:datasource:url: jdbc:dm://127.0.0.1:5236userna…

与时代共进退

还记得当初自己为什么选择计算机&#xff1f; 当初你问我为什么选择计算机&#xff0c;我笑着回答&#xff1a;“因为我梦想成为神奇的码农&#xff01;我想像编织魔法一样编写程序&#xff0c;创造出炫酷的虚拟世界&#xff01;”谁知道&#xff0c;我刚入门的那天&#xff0…

【Vue第2章】Vue组件化编程

目录 2.1 模块与组件、模块化与组件化 2.1.1 模块 2.1.2 组件 2.1.3 模块化 2.1.4 组件化 2.2 非单文件组件 2.3.1 代码 2.3.1.1 基本使用 2.3.1.2 几个注意点 2.3.1.3 组件的嵌套 2.3.1.4 VueComponent 2.3.1.5 一个重要的内置关系 2.3 单文件组件 2.3.1 一个.v…

前端数据加密相关问题

什么是数据加密&#xff1f; 数据加密是一种安全性技术&#xff0c;通过使用算法将明文转换为密文&#xff0c;以保护数据的保密性和完整性。数据加密通常用于保护机密信息&#xff0c;例如个人身份、财务信息、企业机密等。在数据传输过程中&#xff0c;数据可以被拦截或窃听…

Android studio新版本aar包导入项目中配置

目录 1、so、aar导入在项目build.gradle中配置 2、新版本迁移到setting.grade配置 1、so、aar导入在项目build.gradle中配置 repositories {flatDir {dirs libs} }2、新版本迁移到setting.grade配置 flatDir {dirs libs } 如下图所示 pluginManagement {repositories {gra…

基于Spring、SpringMVC、MyBatis和微信小程序的点餐系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring、SpringMVC、MyBatis和微信小…

MyBatis-xml版本

MyBatis 是一款优秀的持久层框架 MyBatis中文网https://mybatis.net.cn/ 添加依赖 <dependencies><!--mysql驱动--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.47<…

2024年网络安全行业前景和技术自学

很多人不知道网络安全发展前景好吗&#xff1f;学习网络安全能做什么&#xff1f;今天为大家解答下 先说结论&#xff0c;网络安全的前景必然是超级好的 作为一个有丰富Web安全攻防、渗透领域老工程师&#xff0c;之前也写了不少网络安全技术相关的文章&#xff0c;不少读者朋…

Spring Boot 快速入门

Spring Boot 快速入门 什么是Spring Boot Spring Boot是一个用于简化Spring应用开发的框架&#xff0c;它基于Spring框架&#xff0c;提供了自动配置、快速开发等特性&#xff0c;使得开发者可以更加便捷地构建独立的、生产级别的Spring应用。 开始使用Spring Boot 步骤一&a…

基于Java OpenCV实现图像透视变换,图片自动摆正

如题&#xff0c;效果图如下&#xff1a; 稍后上源码。

【MATLAB源码-第96期】基于simulink的光伏逆变器仿真,光伏,boost,逆变器(IGBT)。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 1. 光伏单元&#xff08;PV Cell&#xff09; 工作原理&#xff1a;光伏单元通过光电效应将太阳光转换为直流电。它们的输出取决于光照强度、单元温度和负载条件。Simulink建模&#xff1a;在Simulink中&#xff0c;光伏单元…

字符函数和字符串函数

✨ 猪巴戒&#xff1a;个人主页✨ 所属专栏&#xff1a;《C语言进阶》 &#x1f388;跟着猪巴戒&#xff0c;一起学习C语言&#x1f388; 前言 C语言中对字符和字符串的处理很是频繁&#xff0c;但是C语言本身是没有字符串类型的&#xff0c;字符串通常放在常量字符串中或者字…

httpd和dns

目录 DNS 域名解析 HTML文档的结构 网页基本标签格式 动态页面与静态页面区别 http协议版本 http请求方法 HTTP协议报文格式 状态码 DNS 域名解析 域名结构 主机名.子域[.二级域].顶级域. (根域) DNS 解析过程 客户端 -> 本地缓存域名服务器 -> 根域服务器 ->…

实战演练 | 在 Navicat 中格式化日期和时间

Navicat 支持团队收到来自用户常问的一个问题是&#xff0c;如何将网格和表单视图中的日期和时间进行格式化。其实这个很简单。今天&#xff0c;我们将介绍在 Navicat Premium 中进行全局修改日期和时间格式的步骤。 如果你想边学边用&#xff0c;欢迎点击 这里 下载免费全功能…

C# 图解教程 第5版 —— 第16章 接口

文章目录 16.1 什么是接口16.2 声明接口16.3 实现接口16.4 接口是引用类型16.5 接口和 as 运算符16.6 实现多个接口16.7 实现具有重复成员的接口16.8 多个接口的引用&#xff08;*&#xff09;16.9 派生成员作为实现&#xff08;*&#xff09;16.10 显示接口成员实现16.11 接口…

浅谈基于泛在电力物联网的综合能源管控平台设计及硬件选型

贾丽丽 安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;城区内一般都具有错综复杂的能源系统&#xff0c;且大部分能耗都集中于城区的各企、事业单位中。基于泛在电力物联网的综合能源管控平台将城区内从能源产生到能源消耗的整体流动情况采用大屏清晰展示&#xff…

小航助学题库白名单竞赛考级蓝桥杯等考scratch(15级)(含题库教师学生账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09; 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;

串口程序(1)-接收多个字节程序设计

数据寄存器 关键的标志位 通过该宏定义可以开启对应的串口中断&#xff0c;之前用该宏定义代替标准库函数USART_ITConfig(USART1, USART_IT_RXNE, ENABLE); //使能接收中断 HAL库程序 1.串口发送程序 HAL库串口发送一个/一组数据是很简单的&#xff0c;可以直接调用HAL_UART…

MySQL和Java通用加密解密方式

加密方式使用 AES 加密&#xff0c;再转成 Base64。 SQL -- 加密 update your_table set your_columnto_base64(aes_encrypt(your_column, "password"));-- 解密 select aes_decrypt(from_base64(your_column) ,"password") from your_table; 使用原生 …