15js面向对象

2022-08-17 21:31:59 阅读：119 来源： 互联网

面向对象

概述

面向对象是一种编程思想（oop），他是将对应的过程替换成对应的对象，而不做去追求对应的过程实现，而通过去找对象的方式实现。综合思想：找有这个功能的对象，做这个事情。（面向对象同时具备一个点 万物皆对象（所有的内容都可以被充当为对象））

构建对象

使用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这个表示的是当前这个对象是通过哪个实例构建的

抽取对象

主要思想

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

示例

人年纪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,15js
来源： https://www.cnblogs.com/sshong/p/16582961.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9