js四种创建函数的方法(有注释)

最新推荐文章于 2023-10-31 14:40:17 发布

油、东西

最新推荐文章于 2023-10-31 14:40:17 发布

阅读量585

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/ZZY192921533/article/details/126197944

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 直接创建法:显示学生的 姓名 年龄 身高 方法:显示个人信息
        // 优点: 简单
        // 缺点: 不能进行相同对象的量产
        var Student={
            name:"王一",
            age:20,
            height:180,
            showInfo:function(){
                console.log(this.Student)
            }
        }
        Student.showInfo()
    </script>
</body>
</html>

```javascript```



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 工厂模式: 通过封装函数来创建指定对象
        // 创建三个学生对象, 姓名 年龄 名称 方法:显示个人信息
        // 封装一个函数,每调用一次,创建一个学生对象
        // 优点 快速进行相同类型对象的创建
        // 缺点 无法明确，确定的类型  
        function createStudent(name,age,height){
            var obj={}
            obj.name=name
            obj.age=age
            obj.height=height
            obj.showInfo=function(){
                console.log(this.name)
            }
            return obj
        }
        var s1=createStudent("王一",20,180)
        var s2=createStudent("王二",30,150)
        var s3=createStudent("王三",40,148)
        // console.log(s1,s2,s3)
        function createTeach(name,age,height){
            var obj={}
            obj.name=name
            obj.age=age
            obj.height=height
            obj.showInfo=function(){
                console.log(this.name)
            }
            return obj
        }
        var t1=createTeach("王四",150,40)
        // //Object
        // var r=t1 instanceof Teach
        // console.log(r)
        //  学校管理系统 
        //  老师  学生

        //类型判断的函数（对象） 判断 属于哪一类对象


        
        // typeof() 返回对应变量的数据类型
        // instanceof   检测变量的数据类型 (大前提:变量必须为原型创建出来的)
        // js分为两类变量类型：简单类型 ：数值、字符串  引用类型
        // 变量 instanceof Object 返回布尔值
        // var arr=[1,2,3]  引用类型
        // var result=arr instanceof Object//t 数组属于特殊对象
        // console.log(result)
        
        // 简单类型
        // var num=123   
        // 原型创建
        // var num=new Number(123)
        // var result=num instanceof Number
        // console.log(result)

        // var num=123
        // var result=num instanceof Object//t 万物皆对象
        // console.log(result)
    </script>
</body>
</html>

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构造函数创建对象</title>
</head>
<body>
    <script>
        // 类(class): 一类的总成 通过类创建对应的对象
        // js没有类,利用构造函数模拟类(核心思想:改变this的指向性)
        // 创建一个学生类(构造函数)
        // 构造函数
        // 优点 可以量产,又可以检测对应的类型
        // 缺点 相同的方法,没有开辟共同的空间 导致内存消耗
        function Student(name,age,height){
            this.name=name
            this.age=age
            this.height=height
            this.showInfo=function(){
                console.log(this.name)
            }
        }
        function Teacher(name,age,height){
            this.name=name
            this.age=age
            this.height=height
            this.showInfo=function(){
                console.log(this.name)
            }
        }
        var s1=new Student("我是学生",20,185)
        var t1=new Teacher("我是老师",45,185)
        // new 干了什么
        // 1.创建一个空对象{}
        // 2.执行new后方的函数,让函数内部的this指向空对象{}
        // 3.将创建出来的空对象{}返回给前方的result值
        var result=t1 instanceof Teacher
        // var result=s1 instanceof Student
        console.log(result)
        console.log(s1)
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型创建对象</title>
</head>
<body>
    <script>
        // 原型创建对象
        // 公用的放在原型中
        // 私有的放入构造函数
        // 优点 量产 可以判断对象类型 节约内存
            function Student(name,age,height){
                this.name=name
                this.age=age
                this.height=height
                this.showInfo=function(){
                    console.log(this.name)
                }
        }
// 将构造函数中的方法,定义到原型中
// 构造函数的原型(prototype)==实例化对象的原型(__proto__)
// 原型开始-----
    //  Student.prototype.showInfo=function(){
    //     console.log(this.name)
    //  }
// 原型结束-----
        var s1=new Student("王一",20,185)
        s1.__proto__.showInfo=function(){
          console.log("showInfo发生了改变");
        }
        // console.log(s1)
        // // 调用公用函数
        s1.showInfo()
        var s2=new Student("王二",30,180)
        // console.log(s2);
        // 调用公用函数
        s2.showInfo()
// 发现一个实例化的对象,都存在一个[[Prototype]]属性 原型
// 通过同一个构造函数创建出来的对象 原型相同
// 获取对象原型是__proto__
// console.log(s1.__proto__); 输出s1构造函数的原型对象
// 判断两个构造函数的原型是否相等,如果相等就可以放在同一个原型里
        console.log(s1.__proto__==s2.__proto__);
// 因为是公用方法,所以返回true
        console.log(s1.showInfo==s2.showInfo)
    </script>
</body>
</html>