面向对象
面向对象
面向对象是一种编程思想（oop），他是将对应的过程替换成对应的对象，而不做去追求对应的过程实现，而通过去找对象的方式实现。综合思想：找有这个功能的对象，做这个事情。（面向对象同时具备一个点 万物皆对象（所有的内容都可以被充当为对象））。行为是在过程中产生的，这种思想被称为面向过程编程。
综合一下，面向过程就是从过程中产生行为，面向对象是从行为中找对象（找合适合适的事情）
一、构建对象
1、使用new关键词 来实例化对象
（1）利用类里面的构造器来构建对象（es6的）类组件
class Person{
constructor(age){ //构造器 其实就是一个构造函数
this.age = age
}
}
//new 关键词来构建
var person = new Person(18)（2）使用构造函数来构建 （es3的） 函数组件
function Person(age){
this.age = age
}
//new关键词来构建
var person = new Person(18)构建函数构建的步骤
- 自动构建对象
- 手动添加属性
- 自动返回对象
2、使用工厂模式来构建对象
function factory(age){
//声明一个对象
var obj = new Object()
obj.age = age
return obj
}
var person = factroy(18)工厂模式构建对象的步骤
- 手动初始化一个对象
- 手动给这个对象添加属性
- 手动将这个对象返回
工厂模式构建对象的不足
- 不能很好的去将细节补充
- 可以构建任何对象
- instanceof 返回的值只能是Object
// 1、利用类里面的构造器来构造对象
class Person{
constructor(age){//构造器 其实就是一个构造函数
this.age = age
}
}
// new关键词来构建
var person =new Person(18)
console.log(person);
// 2、使用构造函数来构造（es3）（兼容更好）
function Person1(age){
this.age = age
}
// new关键词来构建
var person =new Person1(18)
// 当前这个类的类型是否是object
console.log(person instanceof Object);//true
console.log(person instanceof Person1);//true
// 构造函数构造函数的步骤
// 1、自动构造对象
// 2、手动添加属性
// 3、自动返回对象
// 使用工厂模式来构建对象
function factory(age){
// 声明一个对象
var obj = new Object()
// 给对象加属性
obj.age = age
return obj
}
var person = factory(18)
// 当前这个类的类型是否是object
console.log(person instanceof Object);//true
console.log(person instanceof Person1);//false- instanceOf这个表示的是当前这个对象是通过哪个实例构建的
二、抽取对象
主要思想
- 不会动的（名词）抽为属性
- 会动的的 （动词）抽成方法
示例
人年纪18会走会跳会跑性别男上周考试成绩15分
属性：年纪，成绩，性别
方法：走，跳，跑
示例 tab栏切换（面向对象）
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
border: 1px solid red;
/* position: relative; */
}
ul{
width: 501px;
height: 22px;
}
ul>li {
list-style: none;
float: left;
width: 70px;
text-align: center;
}
div>div {
height: 300px;
/* position: absolute;
top: 22px;
left: 0; */
}
#lbox{
display: none;
}
.selected {
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li id="first" class="selected">刘敏</li>
<li id="last">李月梦</li>
</ul>
<div id="fbox">刘敏专业吃粑粑</div>
<div id="lbox">呵呵哈哈哈哈哈哈</div>
</div>
<div class="box1">
<ul>
<li id="first" class="selected">花痴</li>
<li id="last">傻子</li>
</ul>
<div id="fbox">刘敏是花痴sxl</div>
<div id="lbox">刘敏是傻子</div>
</div>
<script>
class Tab{
constructor(element){
// 属性
this.lists = element.querySelectorAll('ul>li')//里面的li
this.cont = element.querySelectorAll('div>div')//切换显示的内容
this.handlerCick()
}
change(li){
// 排他思想 先将全部设置一个值 然后再给自己设置一个值
Array.from(this.lists).forEach((li)=>{
li.className = ''
})
li.className = 'selected'
// 排他
Array.from(this.cont).forEach(div=>{
div.style.display = 'none'
})
let index = Array.from(this.lists).findIndex(v=>{
return v==li
})
this.cont[index].style.display = 'block'
}
handlerCick(){
var _self = this
Array.from(this.lists).forEach((li)=>{
li.onclick = function(){
_self.change(this)
}
})
}
}
// 构建对象
var box = document.querySelector('.box')
var tab = new Tab(box)
var box1 = document.querySelector('.box1')
var tab1 = new Tab(box1)
</script>
</body>示例在固定范围内的拖拽的面向对象写法
<style>
#box {
width: 500px;
height: 500px;
border: 1px solid white;
margin: 100px;
position: relative;
/* left: 100px;
top: 100px; */
}
#moveBox {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
#outerBox {
width: 600px;
height: 600px;
background-color: #CCC;
position: absolute;
left: 200px;
top: 200px;
/* margin: 100px; */
}
</style>
</head>
<body>
<div id="outerBox">
<div id="box">
<div id="moveBox"></div>
</div>
</div>
<script>
class Drag {
constructor(element) {
// 父元素
this.box = element
this.move = element.querySelector('#moveBox')
this.handlerMouse()
}
handlerMouse() {
//给moveBox添加按下事件 记录一下当前鼠标在moveBox里面点击的位置
this.move.onmousedown = (e) => {
e = e || window.event
//获取对应的第一次按下的位置
var firstX = e.offsetX
var firstY = e.offsetY
// console.log(document.body.offsetParent); //偏移的父元素
//给box添加move事件 记录每次的位置 在box的位置 设置moveBox在box的定位
this.box.onmousemove = (e) => {
e = e || event
var currentX = e.pageX - this.getOffset(this.box).left
var currentY = e.pageY - this.getOffset(this.box).top
var targetX = currentX - firstX
var targetY = currentY - firstY
//判断边界 offsetWidth 得到盒子的宽度 offsetHeight得到盒子的高度
if (targetX < 0) {
targetX = 0
}
if (targetY < 0) {
targetY = 0
}
if (targetX > this.box.offsetWidth - this.move.offsetWidth) {
targetX = this.box.offsetWidth - this.move.offsetWidth
}
if (targetY > this.box.offsetHeight - this.move.offsetHeight) {
targetY = this.box.offsetHeight - this.move.offsetHeight
}
// 设置moveBox在box的定位
this.move.style.left = targetX + 'px'
this.move.style.top = targetY + 'px'
}
//给box添加弹起事件 清除box的move事件
document.onmouseup = () =>{
this.box.onmousemove = null
}
}
}
getOffset(element) {
var left = 0
var top = 0
while (element) {
left += element.offsetLeft
top += element.offsetTop
element = element.offsetParent
}
return {
left,
top
}
}
}
var box = document.getElementById('box')
new Drag(box)
</script>
</body>三、static 静态修饰
- static修饰的函数 使用类名.方法名
- static修饰的函数 只会初始化一次 （每次调用的都是同一个函数）
class Person{
constructor(){
}
run(){
console.log('run');
}
static sayHello(){
console.log('hello');
}
}
new Person().run()
//静态函数 调用 使用类名.方法名 （static修饰的函数 声明一次）
Person.sayHello()
Person.sayHello()
Person.sayHello()
Person.sayHello()
console.log(Person.sayHello == Person.sayHello);//true
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律