前端系统化学习【JS篇】:（十五）面向对象

Hypnotize
245 阅读4分钟

前言

  • 细阅此文章大概需要 3分钟\color{red}{3分钟}左右
  • 本篇中讲述了：
      1. 面向对象
      1. JS中的内置类
      1. 奇怪的练习题增加了！！
  • 如果有任何问题都可以留言给我，我看到了就会回复，如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教，帮我指正，在下万分感谢。希望今后能和大家共同学习、进步。
  • 下一篇会尽快更新，已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
  • 如果觉得这篇文章对您有帮助，还请点个赞支持一下，谢谢大家！
  • 欢迎转载，注明出处即可。

JS语言是面向对象的编程语言

  • 当基于JS进行程序设计时，也应该按照面向对象的思想去开发或理解
  • 对象： 一种泛指
    • JS中的万物都是我们需要学习研究使用的对象
  • 类： 对象类别的一种划分
    • 把JS中的内容按照功能特点进行类别的划分
    • 【人类（类）：男类女类（类）：每个个体（对象）如：张三李四王五】
  • 实例： 某一类别中的具体个例
    • 某一个类别当中的一个具体的事物

JS中的内置类

  • 【数据类型】：

    • 【基本数据类型】Number String Boolean.....
    • 【对象类型】：Object【每创建一个对象，都是Object这个类的实例】
      • 而Object类下面又存在Array、RegExp、Date类【比如创建一个数组，这个数组是Array类的实例，同样也是Object类的实例】
    • 【函数类型】：Function【每创建一个函数，都是Function这个 类的实例】

  • 【元素类】

    • 在DOM树中从上到下依次为：
      1. ↓ Object【顶级父类】
      2. ↓ EvevtTarget：事件类【次顶级类】
      3. ↓ Node:节点类
      4. ↓ 【Element：元素节点类】 【Text：文本节点类】【Document：文档节点类】...
      5. ↓ 【HTMLElement：HTML元素标签类】、【XMLElement：XML元素标签类】【HtmlDocument】...
      6. ↓ 【元素对象】在【HTMLElement：HTML元素标签类】当中，每种元素对象都有一个自己所属的类
        • HTML所属的类：HTMLHtmlElement
        • BODY所属的类：HTMLBodyElement
        • DIV所属的类：HTMLDivElement
        • P所属的类：HTMLParagraphElement

  • 【元素/节点集合类】

    • HTMLCollection:元素集合类
    • NodeList：节点集合类

  • 【元素/节点样式集合类】

    • CSSStyleDeclaration:样式集合类

  • 【我们平时所创建所操作的每一个数据类型的数据，实际上都是在操作其所属类的一个实例。】

  • 由同一个类创建出来的不同实例都具备一些共同特点（如公共方法）和其各自的私有特点（私有属性和方法。。。）

  • 只要两个实例结构类似，那么大部分操作他们的代码都可以公用，无外乎就是this指向问题

奇怪的练习题增加了！！

    //9. a等于什么值会让下面条件成立
    //==在比较时如果两边数据类型不一致，默认会进行数据类型转换
    
    /*第一大类型解决方案：通过toString做手脚*/
    
    //解决方案1：对象转换为数字，需要调取valueOf/toString(如果对象私有属性中有toString，则不会在向原型上去查找)
    var a = {
        i:0,
        toString(){//在对象的私有属性上设置了toString方法，不会再向原型或上级原型调用toString方法
            //this=>a
            return ++this.i;
        }
    };
    if (a == 1 && a == 2 && a == 3) {
        console.log('OK');
    }

    //9. a等于什么值会让下面条件成立
    //==在比较时如果两边数据类型不一致，默认会进行数据类型转换

    //解决方案2：对象转换为数字，需要调取valueOf/toString(如果对象私有属性中有toString，则不会在向原型上去查找)
    let a =[1,2,3];
    a.toString = a.shift;//删除第一个元素并返回 
    if (a == 1 && a == 2 && a == 3) {
        console.log('OK');
    }

    //9. a等于什么值会让下面条件成立

    /*第二大类型解决方案：通过数据劫持*/
    //Object.defineProperty
    //proxy
    /Object.defineProperty(window,'a',{
        get(){
            return ++i;
         }
        //, set(n){
        //     console.log(n);
        // }
    });
    // console,log(window.a);//获取值时，数据劫持就会调用get
    // window.a = 100;//设置值时，被劫持数据就会调用set

   
    let a =[1,2,3];
    a.toString = a.shift;//删除第一个元素并返回 
    if (a == 1 && a == 2 && a == 3) {
        console.log('OK');
    }
avatar
文章
阅读
粉丝