JavaScript--面向对象
面向对象
概述
-
面向对象（Object-Oriented，OO）的语言有一个标志，那就是它们都有类的概念，而通过类可以创建任意多个具有相同属 性和方法的对象。
-
综合思想：找有这个功能的对象，做这个事情。（面向对象同时具备一个点 万物皆对象（所有的内容都可以被充当为对象））
-
ECMAScript对象是一个无序属性的集合，其属性可以包含基本值、对象或函数。
-
对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。
-
每个对象都是基于一个引用类型创建的。
-
ECMAScript 中没有正式的类这个类型。从各方面来看，ECMAScript 类就是一种特殊函数。
示例
-
按照我们之前的写法，对应的编程思维被称为面向过程。面向就是着重点在于过程。比如去吃面这个事情。
-
- 需要找面馆
- 需要找服务员下单
- 等厨房做完
- 等服务员端上来
- 拿双筷子准备吃
-
行为是在过程中产生的，这种思想被称为面向过程编程。
-
如果是面向对象的话，那么我们的核心就是找对象。对于这个事情我们的做法就是：
-
- 找面馆
- 自己等着吃
-
从上面可以得到吃面这个事情，着重点在于对象，一个对象是面馆 ，一个对象是自己。这个过程产生的行为都属于对象的方法，这个就是面向对象的思想。
综合一下，面向过程就是从过程中产生行为，面向对象是从行为中找对象（找合适的对象做合适的事情）
构建对象
使用new关键词 来实例化对象
利用类里面的构造器来构建对象（es6的）类组件
与函数构造函数一样，多数编程风格都建议类名的首字母要大写，以区别于通过它创建的实例。
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这个表示的是当前这个对象是通过哪个实例构建的
super()
-
在静态方法中可以通过 super 调用继承的类上定义的静态方法。
-
不要在调用 super()之前引用 this，否则会抛出 ReferenceError
-
super(); // 相当于 super.constructor()
class Vehicle { constructor() { this.hasEngine = true; } } class Bus extends Vehicle { constructor() { // 不要在调用 super()之前引用 this，否则会抛出 ReferenceError super(); // 相当于 super.constructor() console.log(this instanceof Vehicle); // true console.log(this); // Bus { hasEngine: true } } } new Bus(); //在静态方法中可以通过 super 调用继承的类上定义的静态方法： class Vehicle { static identify() { console.log('vehicle'); } } class Bus extends Vehicle { static identify() { super.identify(); } } Bus.identify(); // vehicle
抽取对象
主要思想
- 不会动的（名词）抽为属性
- 会动的的 （动词）抽成方法
示例
人年纪18会走会跳会跑性别男上周考试成绩15分
属性：年纪，成绩，性别
方法：走，跳，跑
示例 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
