一.面向对象和面向过程的区别（概念）

1.面向过程--函数式(过程化).

面向过程：面向过程的思想是把一个项目、一件事情按照一定的顺序，从头到尾一步一步地做下去，先做什么，后做什么，一直到结束。

2.面向对象(OOP-Object Oriented Programming)：强调类的概念，通过类可以创建任意多个具有相同属性和方法的实例对象。

面向对象：面向对象的思想是把一个项目、一件事情分成更小的项目，或者说分成一个个更小的部分，每一部分负责什么方面的功能，最后再由这些部分组合而成为一个整体。

 构建对象

使用new关键词 来实例化对象

class Person{
constructor(age){ //构造器 其实就是一个构造函数
this.age = age
}
}
//new 关键词来构建
var person = new Person(18)

使用构造函数来构建 （es3的） 函数组件

function Person(age){
this.age = age
}
//new关键词来构建
var person = new Person(18)

构建函数构建的步骤

  • 自动构建对象
  • 手动添加属性
  • 自动返回对象

使用工厂模式来构建对象

function factory(age){
//声明一个对象
var obj = new Object()
obj.age = age
return obj
}
var person = factroy(18)

工厂模式构建对象的步骤

  • 手动初始化一个对象
  • 手动给这个对象添加属性
  • 手动将这个对象返回

工厂模式构建对象的不足

  • 不能很好的去将细节补充
  • 可以构建任何对象
  • instanceof 返回的值只能是Object
//当前这个类的类型是否是Person类型
console.log(person instanceof Person); //false
console.log(person instanceof Object); //true

instanceOf这个表示的是当前这个对象是通过哪个实例构建的

抽取对象

主要思想

  • 不会动的（名词）抽为属性
  • 会动的的 （动词）抽成方法

示例 tab栏切换（面向对象）

class Tab{
constructor(element){
//属性
this.lis = element.querySelectorAll('ul>li')//里面的li
this.content = element.querySelectorAll('div>div') //显示的内容
//调用函数
this.handlerCick()
}
toggle(li){ //切换效果
//排他思想 先将所有的全部设置一个值 然后再给自己设置一个值
Array.from(this.lis).forEach((li)=>{
li.className = ""
})
li.className = "selected"
//排他
Array.from(this.content).forEach(div=>{
div.style.display = "none"
})
let index = Array.from(this.lis).findIndex(v=>{
return v == li
})
this.content[index].style.display = 'block'
}
handlerCick(){ //处理点击事件
var
_
self = this
Array.from(this.lis).forEach((li)=>{
li.onclick = function(){
_
self.toggle(this)
}
})
}
}

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