面向对象知识点回顾_对象是以过程为中心的,操作围绕着-CSDN博客

本文链接：https://blog.csdn.net/qq_41435894/article/details/104470096

面向对象

一.面向对象概念

面向对象：面向对象是相对于面向过程来说的，面向过程是一种以“过程”为中心的编程思想，分析出解决问题所需的步骤，然后用函数把这些步骤一步步的实现，使用的时候一个个依次调用就好。而面向对象，是一种以“对象”为中心的编程思想，把问题看成一个个对象，通过对象的属性和行为，将问题解决的。面向过程强调的是模块化，而面向对象强调的是把事物对象化。

复杂来说面向对象是以“对象”为基本单元构建系统，对象是把数据和数据操作方法放在一起，作为一个相互依存的整体。把同类的对象抽象出其共性，形成类。所以说类是对象的抽象，对象是类具体化的体现（类是大范围的，一个类可以有多个对象），类中的大多数数据只能通过本类的方法实现，类包含说明和实现，说明部分被外界所看到，通过简单的外部接口与外界进行联系；实现部分不被外界所看到，在内部通过不同方法的构建，实现不同的功能。对象与对象之间通过消息进行沟通，程序流程由用户在使用中决定。

面向对象用以解决越来越复杂的需求，提高了软件的重用性，灵活性和拓展性。

生活中,一切皆对象.

二.面向对象三大特征

1.封装：只隐藏对象的属性和实现细节，仅对外提供公共访问方式

好处：将变化隔离、便于使用、提高复用性、提高安全性

原则：将不需要对外提供的内容隐藏起来；把属性隐藏，提供公共方法对其访问

2.继承：提高代码复用性；继承是多态的前提

注：

①子类中所有的构造函数都会默认访问父类中的空参数的构造函数，默认第一行有super()；若无空参数构造函数，子类中需指定；另外，子类构造函数中可自己用this指定自身的其他构造函数。

3.多态

是父类或接口定义的引用变量可以指向子类或具体实现类的实例对象

好处：提高了程序的扩展性

弊端：当父类引用指向子类对象时，虽提高了扩展性，但只能访问父类中具备的方法，不可访问子类中的方法；即访问的局限性。

前提：实现或继承关系；覆写父类方法。

三.创建object 对象的几种方式

ps: // 所有使用new关键字创建的对象都是引用类型!

    <script>
        // var o = new Object(); // 使用构造函数创建对象
        // o.name = 'zhangsan'; // 使用点操作符设置属性
        // o.age = 25; // 为不存在的属性直接赋值  是添加属性
        // o.age = 18; // 为以存在的属性赋值  是修改属性
        // o.sex = '男';
        // console.log(o);

        // 使用语法量 直接量的方式 创建对象
        // {} 它其实是 new Object()的语法糖 
        // var obj = {}; // 底层依旧执行 new Object()
        // obj.a = 1;
        // console.log(obj);

        // var o2 = {
        //     // 属性名和属性值之间使用英文冒号隔开
        //     // 每一个属性之间使用逗号隔开
        //     name: 'zhangsan',
        //     age: 20,
        //     sex: 'nan'
        // };

        // console.log(o2);


        // var o3 = {
        //     // 对象的属性可以是任意数据类型
        //     name: 'lisi',
        //     fn: function() {
        //         console.log('hello');
        //     }
        // };
        // o3.fn();

        // 对象的属性操作
        // CRUD Create Read Update Delete

        // var o4 = {
        //     name: 'lisi',
        //     age: 20,
        //     abc: 123,
        //     fn: function() {
        //         console.log('ok');
        //     }
        // }

        // delete o4.abc; // delete关键字用于删除对象的属性
        // // 不是所有的属性都能使用delete删除的
        // delete o4;
        // console.log(o4);

        // function fn() {
        //     delete arguments.length;
        //     console.log(arguments);
        // }
        // fn(1, 2, 3, 4);


        // 对象属性的访问
        // 对象的属性名是字符串类型
        // JSON 轻量级数据交换格式
        // JSON 是中立于语言和平台的一种数据交换格式
        var o5 = {
            "a": 1,
            "b": 2,
            "c": 3
        }
        console.log(o5.b);
        console.log(o5['b']);
    </script>

四.创建Array对象

// 使用一个变量保存多个值对象数组
// JavaScript的数组可以保存任意数据类型的值

    // 将数据和数据之间的关系按照特定结构进行保存
    // 队列 堆 栈 树 哈希 字典 列表 散列表 ...
    // 数组也是一种数据结构
    // 1. 所有的内容都是有序排列
    // 2. 排列顺序 最小值是0 最大值是长度-1
    // 3. 数组中的数据类型 可以是任意数据类型
    // number string null undefined boolean object function array
     // 数组的长度查看  
    // 数组的本质也是对象
    // 数组的长度是以属性的方式体现的
    // length 属性是不允许删除的
    // delete arr4.length;
    // console.log(arr4.length);

   <script>
   
        var arr = []; // 定义一个空数组  语法糖
        var arr2 = new Array(); // 定义空数组
        console.log(arr);
        console.log(arr2);

        var arr3 = ['苹果', '橘子', '香蕉', '土豆', '西瓜'];
        // 数组允许有多个元素 每一个元素之间使用,隔开
        console.log(arr3);

        var arr4 = new Array('苹果', '三星', '华为', '小米', 'vivo');
        console.log(arr4);


        // 获得数组中的元素 使用 索引值来获取
        console.log(arr4[1]); // 获取数组的元素 通过[index]获取
        // 索引值从0开始 最大索引值是 length-1
    </script>

五.JS基本包装类型

// 基本包装类型
// ECMAScript 提供了三种基本包装类型
// Boolean Number String

    <script>
        // 基本包装类型
        // ECMAScript 提供了三种基本包装类型
        // Boolean Number String

        // var num = 12;
        // console.log(num);
        // var num2 = new Number(12); // 基本包装类型 使用了new关键字
        // console.log(num + num2); // 基本包装类型由于基本类型的特点
        // console.log(typeof num2);
        // console.log(num2);

        // var bool = new Boolean(true);
        // console.log(bool);
        // console.log(typeof bool);

        // var str = '123';
        // var str2 = new String('abc');
        // console.log(str + str2);
        // console.log(typeof str2);


        var num = 123;
        console.log(num.toString());
    </script>

六.数据类型检测

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // window.onload = function() {
        //     var box = document.getElementById('box');
        //     var obj = {};
        //     var arr = [];
        //     var n = null;

            // console.log(typeof box);
            // console.log(typeof obj);
            // console.log(typeof arr);
            // console.log(typeof n);

            // 1. ECMAScript 提供了一个关键字用于检测 实例对象
            // instanceof  谁的实例
            // console.log(obj instanceof Object); // 检测obj是否是 Object的实例
            // console.log(obj instanceof Array); // 检测obj是否是 Array的实例
            // console.log(arr instanceof Array);
            // console.log(arr instanceof Object);
            // console.log(box instanceof HTMLDivElement);
            // console.log(box instanceof Object);

            // 所有的引用类型 使用 instanceof Object均返回为true   不靠谱 


            // 2. 数据类型检测
            // constructor 属性  构造器
            // 所有的引用类型 都有constructor属性
            // console.log(obj.constructor === Object);
            // console.log(arr.constructor === Array);
            // console.log(arr.constructor === Object);
            // console.log(box.constructor === HTMLDivElement);


            // 3. 自定义函数检测数据类型
            // function getType(o) {
            //     return Object.prototype.toString.call(o).slice(8, -1);
            // }

            var a = 123;
            var b = true;
            var c = [];
            var d = {};
            var e = 'aaaa';
            var f;
            var g = null;

            console.log(getType(a));
            console.log(getType(b));
            console.log(getType(c));
            console.log(getType(d));
            console.log(getType(e));
            console.log(getType(f));
            console.log(getType(g));

            // 4. 检测对象是不是数组
        //     var arr = [];
        //     console.log(Array.isArray(arr));
        // }
    </script>
</head>

<body>
    <div id="box"></div>
</body>

</html>

七.数组的长度以及遍历

   <script>
        var arr = ['苹果', '橘子', '芒果', '西瓜', '菠萝'];
        // arr.length = 8; //数组的长度可以修改
        // console.log(arr.length);
        // console.log(arr[5]); // 空的元素被取值为 undefined

        // arr.length = 0; // 将数组长印度设置为0  清空数组内的元素
        // console.log(arr);

        // arr = []; //使用新数组替换老数组



        // 遍历 在编程语言中的含义就是 全部访问一边

        // 正序遍历
        // for (var i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }

        // 倒序遍历
        for (var j = arr.length - 1; j >= 0; j--) {
            console.log(arr[j]);
        }
    </script>

7-1 关联数组

    <script>
        // JS的数组有两种数组
        // 1. 索引数组 通过索引值堆数组的元素进行编号
        // 2. 关联数组 使用字符串作为数组的索引 无序的

        var arr = []; //关联数组长度是0
        arr['name'] = 'zhangsan';
        arr['age'] = 20;
        arr['sex'] = 'nan';

        // console.log(arr);

        // 关联数组不计算长度  无法使用for循环遍历
        // 但是数组是对象 可以使用for-in遍历
        for (var i in arr) {
            console.log(arr[i]);
        }
    </script>

八.对象遍历

    // for-in 用于遍历对象的可枚举属性
    // length 属于不可枚举属性
    // for-in访问存在的数组元素

  <script>
        // var city = ['北京', '上海', '广州', , , '深圳', , '南京', , '杭州', '长沙', '重庆'];
        // console.log(city.length);
        // console.log(city);

        // for (var i = 0; i < city.length; i++) {  //index
        //     console.log(city[i]);
        // }

       

        var obj = {
            name: 'zhangsan',
            age: 20,
            sex: '男'
        }

        for (var key in obj) { // key 属性名
            // console.log(key + ":" + obj[key]); // obj[key] 属性值
            console.log(obj);
        }

        // in关键字 可以判断 属性在对象中是否存在
        console.log('name' in obj);
        console.log('age' in obj);
        console.log('abc' in obj);
    </script>