object对象的介绍

最新推荐文章于 2025-07-03 16:02:52 发布

原创最新推荐文章于 2025-07-03 16:02:52 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

32 篇文章

订阅专栏

object对象的介绍

认识类，类名，类的链式关系，子类，超类，父类，基类
类与对象的关系
构造函数，实例化入口，
对象属性的添加，赋值，
对象属性与原型属性的差别
原型链
万物皆对象

<!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>
</head>
<body>
    <script>
        // oop
        // 自己的事自己做

        // 类   对象  父类  子类(suberClass)  超类(superClass)   基类(BaseClass)

        class Box{  //这是一个类，类名叫Box，这是对象的抽象化的表现
            a=4; //初始化的属性
            // 构造函数
            // 实例化对象的入口
            constructor(num){
                console.log(num)
            }
            play(){  //方法
                console.log("aaa");
            }
            //认识：这个类里面有属性a,同时也拥有方法，这个方法是play()，回顾，方法有对象的动态方法，也有一个静态的方法，
            //动态方法和静态的方法调用的方式不同，方法的实现，前提是要new一个对象才行，这个对象可以是多个对象，共同有里面的方法
            //而且方法和属性各自独立
        }
        Box.prototype.b=20;  //prototype单词解释：原型，这句话的意思是Box下面的prototype原型属性b，就是b的原型属性。
        //对象的属性有原型属性和对象属性。

        // 类称为对象的抽象化表现
        // 对象称为类的实例化体现
        var  b=new Box(5);   //通过new可以实例化，类的实例化，这个Box就是执行constructor这个函数
        var c=new Box(); 
        console.log(b.a,c.a);  //对象各自有各自的属性
        // b.a=10;
        // c.a=20;
        // b.a=20;
        // b.b=50;
        console.log(b);
        // console.log(b.a,b.b);
    // b.__proto__    //  原型链（还会再详细讲解一次）
    // b.__proto__.constructor;//构造函数，（什么是构造函数，就是实例化对象的入口）
    // b.__proto__.b  原型属性
    // b.a  对象属性
    // 当获取属性时   先获取对象属性,如果没有该对象属性,就获取最近一层原型属性,如果没有就继续向下获取
    // 当设置属性时 如果有对象属性,直接覆盖对象属性的值,如果没有对象属性,添加该对象属性,原型属性不修改

        var div=document.createElement("div");      //验证div是个啥，追本溯源是一个对象
        // console.log(div);
        // console.dir(div);
        var arr=[1,2,3,4];                      //验证数组（arr）是个啥，追本溯源是一个对象
//    HTMLDivElement--->HTMLElement--->Element---->Node--->EventTarget--->Object
        console.log(arr);
        // Array--->Object

        var date=new Date();               //验证日期（data）是个啥，追本溯源是一个对象
        console.dir(date);
        // Date--->Object

        var reg=/a/g;                //验证正则（RegExp）是个啥，追本溯源是一个对象
        console.dir(reg);
        // RegExp--->Object

        var str="abcd";             //验证字符串（string）是个啥，追本溯源是一个对象
        console.log(str.__proto__);
        // String--->Object

        // 万物皆对象        （根据上述验证结果总结出来，万物皆对象，-------但是也存在区别性，比如比如存储位置，堆存、栈存）

        //（栈中存的是：数值、字符、布尔、uundefined；堆中存的是：对象。）




        // var  elem=new EventTarget();
        // elem.addEventListener("chilema",chileHandler);//事件的侦听，“chilema”
        // elem.dispatchEvent(new Event("chilema"));  //事件的抛发，new Event("chilema")这个是创建一个新的事件事件的名称叫做chilema。

        // function chileHandler(e){   //执行事件的方法，函数
        //     console.log(e.type);
        // }
    </script>
</body>
</html>