面向对象的讲解

概述:

        面向对象是一种编程思想(oop),面向对象相对于面向过程的一个抽取和简化。主要是以类来构建对象,以对象来存储对应的行为及属性,抽取对应的行为作为方法,抽取对应的属性作为属性。面向对象核心,万物皆对象(所有的内容都可以抽取为一个对象)

        关键点:找有这个方法的对象去完成这个行为。

面向对象和面向过程

面向过程以过程为核心

示例(去饭店吃饭)

  1. 先找饭店

  2. 点餐

  3. 等待上菜

  4. 吃饭

  5. 结账

面向对象以对象为核心

示例

  • 我找饭店(对象:我和饭店)

  • 结账,吃饭,点餐属于我的行为

  • 饭店提供的相关内容就是饭店的行为

对象的构建

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

通过类来构建对象(构造器)es6

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

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

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

console.log(obj instanceof Object);//true
console.log(obj instanceof Object);//true

面向对象的三大特性

  • 封装(将对应的行为抽取为方法 属性抽取为属性)

  • 继承(子类继承父类的属性和方法)

  • 多态(继承关系的体现 重写(子类重写父类的方法),重载(在一个类有两个同名的方法 js不允许 没有重载))

封装示例

示例:有一只猫会喵喵叫 800斤 吃的很多 名字叫咪咪

属性:体重:800 名字:咪咪

方法:喵喵叫 吃的很多

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.calssName = ''
        })
        selectElement.calssName = 'selected';
        //this.nav[this.selectIndex].className = 'selected'
        //下面切换内容 样式为show
        Array.from(this.contents).forEach((item)=>{
            item.calssName = ''
        })
        //根据你传入的元素来查找下标
        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.setMousePoint()
        }
    }
    setMovePoint(){
        //设置
        this.move.style.left = this.point.x + 'px'
        this.move.style.top = this.point.y + 'px'
    }
    getPagePoint(){
        let x = 0
        let y = 0
        while(element.offsetParent){
            x += element.offsetLeft
            y += element.offsetTop
            element = element.offsetParent
        }
        return {x,y}
    }
}

基于面向的拖拽实现放大镜

//放大镜功能和区间拖拽的实现有类似
class Magnifier extends Touch{
    constructor(smallBox,moveBox,bigBox,bigImage){
        //传给父类
        super(smallBox,moveBox) //outerBox move
        this.bigBox = bigBox
        this.bigImage = bigImage
        this.handlerEnter()
        this.handlerLeave()
    }
    handlerEnter(){
        this.outerBox.onmouseenter = ()=>{
            this.move.style.display = 'block'
            this.bigBox.style.display = 'block'
            this.init()
            //调用移动的方法
            this.handlerMove(this.move.offsetWidth / 2,this.move.offsetHeight / 2)
        }
    }
    handlerLeave(){
        this.outerBox.onmouseleave = ()=>{
            this.move.style.display = 'none'
            this.bigBox.style.display = 'none'
        }
    }
    init(){
        //将移动的move的大小初始化
        this.move.style.width = this.outerBox.offsetWidth/(this.bigImage.offsetWidth / this.bigBox.offsetWidth) + 'px
        this.move.style.height = this.outerBox.offsetHeight / (this.bigImage.offsetHeight / this.bigBox.offsetHeight) + 'px'
    }
    setMovePoint(){
        //根据对应的坐标来设置对应的位置
        //设置
        this.move.style.left = this.point.x + 'px'
        this.move.style.top = this.point.y + 'px'
        //设置大图片的位置
        //外面的盒子 / 移动的盒子 = 大的图片 / 大的盒子
        //350 / ? = 800 / 540
        //350 = (800 / 540 ) * ? ==> ? = 350 / (800 / 540)
        //150 / 350 == 大的图片移动多少 ?/800
        //150 / 350 = ? /800 ===> = 150 / 350 *800
        let x = this.point.x /this.outerBox.offsetWidth * this.bigImage. offsetWidth * -1
        let y = this.point.y / this.outerBox.offsetHeight * this.bigImage.offsetHeight*-1
        //设置大图片的定位
        this.bigImage.style.left = x + 'px'
        this.bigImage.style.top = y + 'px'
     }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值