Jump to content
  • Hello visitors, welcome to the Hacker World Forum!

    Red Team 1949  (formerly CHT Attack and Defense Team) In this rapidly changing Internet era, we maintain our original intention and create the best community to jointly exchange network technologies. You can obtain hacker attack and defense skills and knowledge in the forum, or you can join our Telegram communication group to discuss and communicate in real time. All kinds of advertisements are prohibited in the forum. Please register as a registered user to check our usage and privacy policy. Thank you for your cooperation.

    TheHackerWorld Official

JavaScript之面向对象

 Share


KaiWn

Recommended Posts

      • 面向对象

        概述

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

        示例

        • 按照我们之前的写法,对应的编程思维被称为面向过程。面向就是着重点在于过程。比如去吃面这个事情。

          1. 需要找面馆

          2. 需要找服务员下单

          3. 等厨房做完

          4. 等服务员端上来

          5. 拿双筷子准备吃

        • 行为是在过程中产生的,这种思想被称为面向过程编程。

        • 如果是面向对象的话,那么我们的核心就是找对象。对于这个事情我们的做法就是:

          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)

        构建函数构建的步骤

        1. 自动构建对象

        2. 手动添加属性

        3. 自动返回对象

        使用工厂模式来构建对象

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

        工厂模式构建对象的步骤

        1. 手动初始化一个对象

        2. 手动给这个对象添加属性

        3. 手动将这个对象返回

        工厂模式构建对象的不足

         

        1. 不能很好的去将细节补充

        2. 可以构建任何对象

        3. instanceof 返回的值只能是Object

          //当前这个类的类型是否是Person类型
          console.log(person instanceof Person); //false
          console.log(person instanceof Object); //true

           

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

        抽取对象

        主要思想

        • 不会动的(名词)抽为属性

        • 会动的的 (动词)抽成方法

        示例

        人年纪18会唱会跳会rap会篮球性别男上周考试成绩15分

        属性:年纪,成绩,性别

        方法:唱 跳 rap 篮球

        eg: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

         

Link to post
Link to comment
Share on other sites

 Share

discussion group

discussion group

    You don't have permission to chat.
    • Recently Browsing   0 members

      • No registered users viewing this page.
    ×
    ×
    • Create New...