概述
面向对象是一种编程思想(oop),他是将对应的过程替换成对应的对象,而不做去追求对应的过程实现,而通过去找对象的方式实现。
综合思想:找有这个功能的对象,做这个事情。(面向对象同时具备一个点 万物皆对象(所有的内容都可以被充当为对象))
示例
按照我们之前的写法,对应的编程思维被称为面向过程。面向就是着重点在于过程。比如去吃面这个事情。
1. 需要找面馆
2. 需要找服务员下单
3. 等厨房做完
4. 等服务员端上来
行为是在过程中产生的,这种思想被称为面向过程编程。
如果是面向对象的话,那么我们的核心就是找对象。对于这个事情我们的做法就是:
1. 找面馆
2. 自己等着吃
从上面可以得到吃面这个事情,着重点在于对象,一个对象是面馆 ,一个对象是自己。这个过程产生的行为都属于对象的方法,这个就是面向对象的思想。
综合一下,面向过程就是从过程中产生行为,面向对象是从行为中找对象(找合适的对象做合适的事情,当然每个人找的对象也不一定就是一样的)
构建对象
使用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,instanceOf这个表示的是当前这个对象是通过哪个实例构建的
//当前这个类的类型是否是Person类型 console.log(person instanceof Person); //false console.log(person instanceof Object); //true
抽取对象(代码看起来比较整洁,减少代码量)
主要思想:
- 不会动的(名词)抽为属性
- 会动的的 (动词)抽成方法
示例
人年纪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
标签:Person,对象,age,介绍,li,面向对象,构建,new From: https://www.cnblogs.com/hM1ng/p/16582621.html