概述:
面向对象是一种编程思想(oop),面向对象相对于面向过程的一个抽取和简化。主要是以类来构建对象,以对象来存储对应的行为及属性,抽取对应的行为作为方法,抽取对应的属性作为属性。面向对象核心,万物皆对象(所有的内容都可以抽取为一个对象)
关键点:找有这个方法的对象去完成这个行为。
面向对象和面向过程
面向过程以过程为核心
示例(去饭店吃饭)
-
先找饭店
-
点餐
-
等待上菜
-
吃饭
-
结账
面向对象以对象为核心
示例
-
我找饭店(对象:我和饭店)
-
结账,吃饭,点餐属于我的行为
-
饭店提供的相关内容就是饭店的行为
对象的构建
调用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'
}
}