前端基础18：基本原型和扩展

wangjingtao6842
132 阅读3分钟

为什么要学习面向对象

  • 能够堆JS内置类有更清晰的了解
  • 学习封装代码的方式，各种模式之间的区别是什么？（学会在合适的场景下选择对应的设计模式）

面向对象（OOF）是什么意思

  • 全称：object-oriented programming 以对象数据类型为导向的编程

单例模式

  • 其实就是对象
  • 概念：将同一事物的属性和方法封装在一个空间（对象）里
  • 防止代码冲突和覆盖
  • 不同模块之间获取数据
  • 同一模块之间获取数据
  • 单例模式是门户大开型
  • 同一模块下获取属性：this.xxx
  • 不同模块下调用：模块名.方法名

高级单例模式

  • 升级单例模式后，有些内容是模块私有，只有这个模块内部才能调用，若要公有，需要在暴露给外界的内容放在return后的对象中返回
  • 解决私有和公有问题

工厂模式

就是将实现某一项功能的代码封装成一个函数，下次再需要实现这个功能的售后调用这个函数即可 高内聚低耦合减少页面不必要代码，提高代码利用率

    function shirt() {
        //1.创建一个对象
        var obj = {};
        //2.给对象添加属性
        obj.size = 'L';
        obj.sex = 'man';
        obj.fn = function () {
            console.log('fn');
        };
        //3.返回对象
        return obj;
    }
    for(var i = 0 ; i < 10; i++){
        console.log(shirt());
    }

构造函数

  • 对象：万物皆对象
  • 类：对象中细分的类型
  • 实例：某类中实实在在的一个事物
  • JS内置类
  • Number
  • String
  • Boolean
  • Null
  • Undefined
  • Object
  • Array
  • RegExp
  • Date
  • Function

元素集合类

  • NodeList
sum=sum.valueOf()//可以将构造Number函数变成基本数据类型number

Array类

  • var ary = new Array（10）表示数组有10项每一项都是空
  • var ary = new Array（10，20）表示数组有2项为[10,20]
  • var ary = new Array（'abc'）表示数组有一项['abc']

自定义类

  • 为和普通函数区别，首字母大写
  • var f1 = new Fn()
  • 细节： - 若不需要传参（）可以省略 - 构造函数中的this指的是实例 - 只要在构造函数中定义的属性是公有属性，应该写在原型上 - return不用写，若非写，return后面跟基本类型的数据对实例影响，若跟引用类型数据会把原型破坏
    function Fn() {
        //1.创建函数 系统自己创建
        //2.给对象添加属性 对象用this表示
        this.name = 'lily';
        this.age = 20;
        this.a = function () {
            console.log('a');
        }
        //3.返回对象 系统自己返回
    }
    var f1 = new Fn();//通过new运行的函数称为构造函数，Fn构造函数或Fn类
                        //若不需要传参（）可以省略
                        //构造函数中的this指的是实例
                        //只要在构造函数中定义的属性是公有属性
    console.log(f1);

    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.writeCss = function () {
        console.log("a");
    }
    var p1 = new Person('lily',20);
    var p2 = new Person('lucy',18);

原型

  • 1.所有的函数有一个prototype属性，prototype指向默认的原型对象

  • 2.默认的原型对象上有一个属性constructor，指向构造函数

  • 3.所有的对象上有一个属性叫_proto_指向于所属类的原型 Object.prototype.constructor 指向null

  • 查找属性的顺序

    • 1.若实例上有，则不会继续查找，获取的就是实例上私有属性
    • 2.若实例上没有，则通过_proto_去所属类的原型上找，一直找到Object类的原型，若还没找到，则是undefined
    • 注意：通过_proto_查找所属类的原型，一级级往父类的原型查找，就形成了原型链。_proto_是实现继承的关键

  • Object类原型上的属性：

    • hasOwnProperty 检测是否是私有属性 私有返回true否则返回false
    • isPrototypeOf 检测一个对象是否在另一个对象的原型链上
    • propertyIsEnumerable 属性是否是可枚举的
    • toString 转换成字符串

  • 添加原型

    Fn.prototype = {
        y:400,
        getX:function () {
            console.log(this.x);
        },
        getY:function () {
            console.log(this.y);
        },
        sum:function () {
            console.log(this.x + this.y);
        }
    };
  • 注意：上述方法重写的原型对象，所有没有了constructor，需要在里面写上constructor：构造函数

原型对象扩展方法

  • 重写原型上的方法需要一个一个重写，不能批量重写
avatar
文章
阅读
粉丝