04-OOP面向对象编程--JS进阶

QinGP97

已于 2022-11-10 13:53:10 修改

阅读量175

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-11-08 21:37:21 首次发布

本文链接：https://blog.csdn.net/QinGP97/article/details/127751276

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了JavaScript中的面向对象编程，包括创建对象的构造器和字面量方式，内置类如Number、String、Array和Function，所有类都是Object实例，以及对象属性的增删改查操作和循环遍历。此外，还探讨了ES6的新特性，如Symbol和class。最后，给出了关于函数调用的作业问题。

摘要由CSDN通过智能技术生成

一、创建对象的两种方式

1、构造器创建对象

Object 叫对象也叫类，在JS中也叫构造器，也叫构造函数；
new是一个运算符，new一个类，得到一个对象；
对象是属性的无序集合，属性分：私有和公有。

<script>
 // 构造器创建对象
    let obj = new Object();
    obj.name = 'cw';
    obj.age = 18;
    obj.coding = function() {
        console.log('coding...');
    }
    console.log(obj.name); //cw
    console.log(obj.age); //18
    obj.coding(); //coding...
</script>

2、变量引用一个{} 创建对象变量字面量

<script>
    // 变量引用一个{} 创建对象  变量字面量
    let obj = {

    }
</script>

二、JS中的内置类

Number 类

<script>
    // Number 类
    // new一个类得到一个对象
    // 对象存储在堆区  n1是个地址  指向那个堆
    let n1 = new Number();
    console.log(n1); //Number {0}

    let n2 = 220;
    let n3 = 3.1415926
        // n3不是一个对象，为什么可以打点调用toFixed方法
    console.log(n3.toFixed(2)); //3.14   保留小数位数，最多20位
    //n3在打点的瞬间会包装成一个对象，就可以去调用toFixed方法
    // 调用结束，就还原成了基本数据类型
</script>

String 类

<script>
    // String 类

    let s1 = new String('hello');
    console.log(s1); //String {'hello'}
    let s2 = 'world';
    console.log(s2.toUpperCase()); //WORLD   toUpperCase()转换为大写
    // 在打点的瞬间会包装成一个对象， 就可以去调用toUpperCase方法
    // 调用结束，就还原成了基本数据类型
</script>

Boolean 类


<script>
    // Boolean 类
    let b = new Boolean();
    console.log(b); //Boolean {false}
    let b2 = false;
</script>

Array 类


<script>
    // Array 类
    // 数组㷦特殊的对象  对象中的键是索引
    let arr = new Array(1, 2);
    console.log(arr); //(2) [1, 2]
</script>

Function 类

<script>
    // Function 类
    let f1 = new Function('a', 'b', 'return a+b');
    console.log(f1(1, 2)); //3
</script>

Math 类（不能new的类叫单体内置类）

<script>
    // Math 类

    // Uncaught TypeError: Math is not a constructor
    // Math这个类不能new
    // 不能new的类 叫单体内置类
    let d = new Math();


    console.log(d);
</script>

等…

三、一切类都是对象 (Object)实例

1、伪数组不是数组，是对象 (Object)

instanceof 方法用来判断某个对象是否属于某个类

<ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>
<script>
    // 得到一个伪数组  伪数组不是数组，是对象
    let lis = document.querySelectorAll('li');
    console.log(Array.isArray(lis)); // false  伪数组不是数组，是对象
    console.log(lis instanceof Object); //true  
    console.log(lis); //NodeList(3) [li, li, li]
    console.log(lis[0]);//html
    //  一个真实的DOM元素，就是一个对象
    // 这个对象中的属性非常多，操作这个对象，性能就非常低
    // JQ就是操作DOM元素的，所以性能低 就淘汰了
    // Vue react 操作的是虚拟DOM,虚拟的DOM没有这么多属性
</script>

2、一切类都是对象 (Object)实例

new一个类，得到一个对象。Object这个类（构造器）可理解为处于原型链的最顶端，所有的类都可以是Object的实例。
xx是一个对象，指的是xx是Object的实例。

2.1 对象Object(类)是对象 (Object)

<script>
    // 对象Object(类)是对象 (Object)
    console.log(Object instanceof Object); //true

    //new 一个对象obj   obj是对象 
    let obj = new Object();
    console.log(obj instanceof Object); //true

    // 字面量创建对象
    let obj2 = {
        name: 123
    };
    console.log(obj2 instanceof Object); //true
</script>

2.2 函数Function(类)是对象(Object)

<script>
    // 函数Function(类)是对象(Object)
    console.log(Function instanceof Object); //true

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    // new 一个函数p   这个函数p也是对象
    let p = new Person('wc', 18); //new一个类得到一个对象

    // 函数是对象(Object)
    console.log(Person instanceof Function); //true
    console.log(Person instanceof Object); //true
    // 函数的实例是对象(Object)
    console.log(p instanceof Person); //true
    console.log(p instanceof Object); //true

    console.log(p instanceof Function); //false  说明p不是通过 new Function()得到的实例
  

    
    // function声明一个函数  
    function ok() {
        console.log('ok........');
    }
    ok.a = 1;
    ok.b = 2;
    ok.c = 3;
    console.dir(ok); //ƒ ok()
    // 函数是函数也是对象
    console.log(ok instanceof Object); //true
    console.log(ok instanceof Function); //true
</script>

2.3 数组Array(类)是对象(Object)

<script>
    // 数组Array(类)是对象(Object)
    console.log(Array instanceof Object); //true

    //new 一个数组arr1  这个数组arr1也是对象 
    let arr1 = new Array(4, 5, 6);
    console.log(arr1); //[4, 5, 6]
    console.log(arr1 instanceof Array); //true
    console.log(arr1 instanceof Object) //true


    // 字面量创建数组
    let arr = [1, 2, 3];
    console.log(arr instanceof Array); //true
    console.log(arr instanceof Object) //true
</script>

2.4 Number(类)是对象(Object)

<script>
    // Number(类)是对象(Object)
    console.log(Number instanceof Object) //true

    // new 一个num2    这个num2也是对象 
    let num2 = new Number(111);
    console.log(num2); //Number {111}
    console.log(num2 - 1); //110
    console.log(num2 instanceof Number); //true
    console.log(num2 instanceof Object); //true

    // 字面量创建数字
    let num1 = 110;
    console.log(num1 instanceof Number); //false   说明num1不是通过new Number()得到的一个实例
    console.log(num1 instanceof Object); //false   说明num1不是通过neww Object()得到的一个实例

    console.log(num1.toFixed(2)); //110.00
    // 虽然一个字面量创建的数值不是对象Number和对象Object的实例，但是在打点的瞬间会包装成一个对象， 就可以去调用toFixed等方法。
    // 调用结束，就还原成了最基本的数据类型
</script>

2.5 String(类)是对象(Object)

<script>
    // String(类)是对象(Object)
    console.log(String instanceof Object) //true

    let str1 = new String('hello~');
    console.log(str1); //String {'hello~'}
    console.log(str1 instanceof String); //true
    console.log(str1 instanceof Object); //true

    // 字面量创建字符串
    let str = 'hi';
    console.log(str instanceof String); //false   说明str不是通过new String()得到的一个实例
    console.log(str instanceof Object); //false   说明str不是通过new Object()得到的一个实例

    console.log(str.toUpperCase()); //HI
    // 虽然一个字面量创建的字符串不是对象String和对象Object的实例，但是在打点的瞬间会包装成一个对象， 就可以去调用toUpperCase等方法。
    // 调用结束，就还原成了基本数据类型
</script>

2.7 Boolean(类)是对象(Object)

<script>
    // Boolean(类)是对象(Object)
    console.log(Boolean instanceof Object) //true



    // 为true
    console.log(true instanceof Boolean) //false   说明true不是通过new Boolean()得到的一个实例
    console.log(true instanceof Object) //false   说明true不是通过new Object()得到的一个实例


    let b1 = new Boolean(true);
    console.log(b1); //Boolean {true}
    console.log(b1 instanceof Boolean) //true
    console.log(b1 instanceof Object) //true

    let b11 = new Boolean('str');
    console.log(b11); //Boolean {true}
    console.log(b11 instanceof Boolean) //true  下同理
    console.log(b11 instanceof Object) //true   下同理


    let b12 = new Boolean(1234);
    console.log(b12); //Boolean {true}

    let b13 = new Boolean([1, 2, 3, 4]);
    console.log(b12); //Boolean {true}   

    //new Boolean()括号里面除了：false 0 null NaN undefined 或空，其他通过new Boolean()得到的对象均为 Boolean {true} ,但这几个对象不相等。
    console.log(b1 == b11 == b12 == b13); //false
    console.log(b1 === b11 === b12 === b13); //false



    // 为false
    console.log(false instanceof Boolean) //false   说明false不是通过new Boolean()得到的一个实例
    console.log(false instanceof Object) //false   说明false不是通过new Object()得到的一个实例


    let b2 = new Boolean();
    console.log(b2); //Boolean {false}
    console.log(b2 instanceof Boolean) //true
    console.log(b2 instanceof Object) //true

    let b21 = new Boolean(NaN);
    console.log(b21); //Boolean {false}
    console.log(b21 instanceof Boolean) //true   下同理
    console.log(b21 instanceof Object) //true    下同理

    let b22 = new Boolean(0.00);
    console.log(b22); //Boolean {false} 

    let b23 = new Boolean(false);
    console.log(b23); //Boolean {false} 
    new Boolean()括号里面为：false、0、null、NaN、undefined、或 为空，通过new Boolean()得到的对象均为 Boolean {false} ,但这几个对象不全严格等。
    console.log(b2 == b21 == b22 == b13); //true
    console.log(b2 === b21 === b22 === b13); //false
</script>

2.8 ES6 Symbol也是对象 Symbol和BigInt不能使用new构造

<script>
    // ES6  Symbol也是对象   Symbol和BigInt不能使用new构造
    console.log(Symbol instanceof Object); //true
</script>

2.9 ES6 class也是对象

<script>
    // ES6   class也是对象

    // new 一个类a1 这个类a1是对象
    let a1 = new class {};
    console.log(a1 instanceof Object); //true

    // calss声明一个class类  这个类也是对象
    class a {};
    console.log(a instanceof Object); //true
</script>

2.10 就连console也是对象，它里面有 {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}等方法

<script>
    // 就连console也是对象 ，它里面有 {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}等方法
    console.log(console instanceof Object); //true
    console.log(console) //console {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}
    console.info('hi'); //hi
    console.error('hi'); //
</script>

四、对象是属性的无序集合

对象是属性的无序集合，对象属性的基本操作包括：增删改查（ CRUD ： create read updata delete）

操作对象属性（增删改查）

1、增----创建对象属性

<script>
    let obj5 = {};
    obj5['name'] = 'wc';
    obj5['age'] = 18;
    // Object.defineProperty()定义对象属性
    Object.defineProperty(obj5, 'adress', {
        value: 'bj',
    });
    console.log(obj5); //{name: 'wc', age: 18, adress: 'bj'}
</script>

2、删----删除对象属性

<script>
    let obj = {
        name: 'wc',
        age: 18
    }


    delete obj.age;
    console.log(obj.age); //undefined
</script>

3、改----改变对象属性

<script>
    let obj = {
        name: 'wc',
        age: 18
    }


    obj.age = 28;
    console.log(obj.age); //28
</script>

4、查----查询对象属性

通过打点"." 访问属性
通过键：[属性名]，访问属性，键的类型是String或Symbol类。

<script>
    let obj = {
        name: 'wc',
        age: 100,
        run: function() {
            console.log('run....');
        }

    }

    // 通过打点  访问属性
    console.log(obj.name); //wc

    //通过[]访问属性
    console.log(obj['name']); //wc

    let xx = 'name';
    //  []可以放变量  变量的值可以是属性名==>键
    console.log(obj[xx]); //wc

    for (let key in obj) {
        console.log(key); //name   age  run
        console.log(obj[key]); //wc  100  ƒ ()
    }
</script>

对象中的键是字符串String类型，布尔型，symbol，undefined，还可以是对象

<script>
    // 对象中的键是字符串String类型，布尔型，undefined，还可以是对象 
    // 键还可以是symbol，

    let obj1 = {
        123: 'wc',//此处123为字符串类型
        true: 100,
        undefined: function() {
            console.log('run....');
        }
    }

    console.log(obj1[123]); //wc
    console.log(obj1[true]); //100
    console.log(obj1.true); //100
    console.log(obj1[undefined]); //ƒ ()
    console.log(obj1.undefined); //ƒ ()
    //
</script>

不能使用for循环便利对象，for…in…可以实现遍历对象（伪数组）

<script>
    let obj2 = {
        123: 'wc',
        true: 100,
        undefined: function() {
            console.log('run....');
        }
    }

    console.log(obj2.length); //undefined
    // 能不能使用for循环便利对象?
    // for (let i = 0; i < obj2.length; i++){}    键长为undefined ，所以不能使用 xxx.length 为条件表达式的for循环遍历对象


    // for...in...可以实现遍历对象
    for (let key in obj2) {
        console.log(obj2[key]); //wc  100  ƒ (){console.log('run....');}
    }
</script>

操作对象几种常用的循环： for循环、forEach 、 for…of… 、for… in…

<script>
    // for循环   forEach     for...of..      for... in...
    let arr = ['wc', 'xq', 'jj'];
    // // 
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]); //wc//xq//jj
    }
    // 
    arr.forEach(item => console.log(item)) //wc//xq//jj


    // 
    for (let item of arr) {
        console.log(item); //wc//xq//jj
    }
    // 
    for (let key in arr) {
        console.log(key); //0//1//2
    }
</script>

作业

需求：用函数使得下面三者返回值一样
// fn(1)(2,3)
// f(1,2,3)
// fn()(1,2,3)

<script>
    // 调用一个函数，参数的个数是不确定的
    // ...args形式来接收    rust参数      
    // params 参数
    let fn = function(...params) {
        console.log(params); // [1, 2]
        console.log(Array.isArray(params)); //true
        // --------------------------
        return function gn(...args) {
            params = params.concat(args);
            console.log(params); // [1, 2, 3]

            // -------------------------
            let total = 0;
            params.forEach(item => total += item);
            return total;
        }
    }




    // fn(1, 2, 3); //[1, 2, 3]   //true
    // console.log(Array.isArray(fn(1, 2, 3))); //[1, 2, 3]   //true //false
    // --------------------------
    fn(1, 2)(3) // 


    // ---------------------------
    // 需求：用函数使得下面三者返回值一样
    // fn(1)(2,3)
    // f(1,2,3)
    // fn()(1,2,3)
    console.log(fn(1, 2)(3)); // [1, 2, 3]      //6
    console.log(fn(1)(2, 3)); // [1, 2, 3]      //6
    console.log(fn()(1, 2, 3)); // [1, 2, 3]    //6
    console.log(fn(1, 2, 3)()); // [1, 2, 3]    //6
</script>