js面向对象

概述:

面向对象是一种编程思想(oop)面向对象相对于面向过程的一个抽取和简化。主要是以类来构建对象，以对象来存储对应的行为及属性，抽取对应的行为做为方法 ，抽取对应的属性做为属性。面向对象核心 万物皆对象（所有的内容都可以抽取为一个对象）关键点：找有这个行为的对象去完成这个行为

面向对象和面向过程

面向过程以过程为核心
示例（去饭店吃饭）

• 1.先找饭店
• 2.找服务员点餐
• 3.等待上菜
• 4.吃饭
• 5.结账

面向对象以对象为核心
示例

• 我找饭店 （我这个对象 饭店这个对象）
• 结账 吃饭 点餐属于我的行为
• 饭店提供的相关内容就是饭店的行为

对象的构建

调用new关键词 去执行对应的构造函数来构建对象

通过类来构建对象 es6

class Person{
      constructor(username){
              this.name= username   
}
}
var person =new Person('jack')

通过构造函数来构建(es3)

//以构造函数构建 首字母大写
function Dog(name){
this.name = name //函数里面的this指向它的调用者 在new的时候指向对应的对象实例
}
var dog = new Dog('旺财')

通过工厂模式来构建对象

• 手动创建对象
• 手动设置属性
• 手动返回对象

//以工厂模式来构建
//工厂里面要传入对应的属性 返回对应的对象(不能区分类型)
function factory(name){
//Object是最大的对象 手动构建对象
var obj = new Object()
//手动给obj设置相关的属性
obj.name = name
//手动返回对应的对象
return obj
}
//调用
var obj = factory('旺财')
var obj1 = factory('jack')
console.log(obj,obj1);

工厂模式的特性

• 可以构造所有的对象
• 在构建对象的时候会忽略细节
• 构建出来的对象是object(instanceof 全部指向object)

面向对象的三大特性

继承 子类继承父类的属性和方法

封装   将对应的属性和方法抽取放在一个函数里

多态  包括重写和重载(js里没有)  (重写 子类重写父类的属性和方法)

继承及对应的重写

class Person{
constructor(){
// var sex = '男'
this.name = 'jack'
this.say = ()=>{
console.log('哈哈哈哈');
}
}
}
class Son extends Person{
constructor(age){
super() //调用Person的constructor
this.age = age
//重写
this.say = ()=>{
console.log('嘻嘻嘻嘻');
}
}
}
var son = new Son()
console.log(son);//name say age
son.say() //嘻嘻嘻

面向对象tab栏切换

属性：上面的tab栏 下面的显示框
方法: 上面的点击事件  切换下面的显示栏的方法

//构建一个类
class Tab{
constructor(nav,contents){
this.nav = nav //上边的点击栏
this.contents = contents //下面的切换的内容
this.selectIndex = 0
this.handlerClick()
}
//切换的方法
toggle(selectElement){
//选中内容变成对应的样式为selected 其他排他
Array.from(this.nav).forEach((item)=>{
item.className = ''
})
selectElement.className = 'selected';
// this.nav[this.selectIndex].className = 'selected'
//下面切换内容 样式为show
Array.from(this.contents).forEach((item)=>{
item.className = ''
})
//根据你传入的元素来查找下标
let i = Array.from(this.nav).findIndex((v)=>{
return v == selectElement
})
this.contents[i].className = 'show'
}
//点击事件处理
handlerClick(){
let
_
this = this
Array.from(this.nav).forEach((item,i)=>{
item.onclick = ()=>{
// _this.selectIndex = i
_
this.toggle(item)
}
})
}
}

面向对象拖拽实现

// 拖拽实现
// 属性 包含拖拽盒子的大盒子 拖拽的盒子 盒子的坐标位置
class Touch {
constructor(outerBox, move) {
this.outerBox = outerBox //包含的盒子
this.move = move //移动的盒子
this.point = { //坐标位置
x: parseInt(this.getStyle(move).left) || 0,
y: parseInt(this.getStyle(move).top) || 0
} //基础坐标为0,0
this.handlerDown()
}
//获取样式的方法
getStyle(element) {
return window.getComputedStyle ? window.getComputedStyle(element, '') :
element.currentStyle
}
//按下
handlerDown(){
this.move.onmousedown = (e)=>{
e = e || window.event
//获取第一次按下的位置
let currentX = e.offsetX
let currentY = e.offsetY
//调用移动的方法
this.handlerMove(currentX,currentY)
//调用弹起的方法
this.handlerUp()
}
}
//弹起
handlerUp(){
document.onmouseup = ()=>{
this.outerBox.onmousemove = null
}
}
//移动
handlerMove(currentX,currentY){
//给大盒子添加移动事件
this.outerBox.onmousemove = (e) => {
e = e || window.event
//大盒子在页面上的位置
let { x, y } = this.getPagePoint(this.outerBox)
//获取移动的位置 - 大盒子在页面上的位置 - 当前按下位置
let { targetX, targetY } = {
targetX: e.pageX - x - currentX,
targetY: e.pageY - y - currentY
}
let { maxX, maxY } = {
maxX: this.outerBox.offsetWidth - this.move.offsetWidth,
maxY: this.outerBox.offsetHeight - this.move.offsetHeight
}
//区间判断
if (targetX < 0) {
targetX = 0
}
if (targetX > maxX) {
targetX = maxX
}
if (targetY < 0) {
targetY = 0
}
if (targetY > maxY) {
targetY = maxY
}
//将对应的位置设置进去
this.point = { x: targetX, y: targetY }
this.setMovePoint()
}
}
setMovePoint() {
//设置
this.move.style.left = this.point.x + 'px'
this.move.style.top = this.point.y + 'px'
}
getPagePoint(element) {
let x = 0
let y = 0
while (element.offsetParent) {
x += element.offsetLeft
y += element.offsetTop
element = element.offsetParent
}
return { x, y }
}
}