JavaScript 创建对象的三种传统方式，自定义构造函数创建对象

最新推荐文章于 2023-06-10 18:25:15 发布

houyanhua1

最新推荐文章于 2023-06-10 18:25:15 发布

阅读量1.5k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 对象构造函数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79779738

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

demo.html（创建对象的三种传统方式）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //如何创建一个对象
        //1.对象字面量  {key:value,key:value...}
        //只能创建一次对象，复用性较差，如果要创建多个对象，代码冗余度太高
//        var obj = {
//            name:"演员",
//            singer:"薛段子手",
//            type:"流行"
//        };
//
//        var obj1 ={
//            name:"吻别",
//            singer:"张学友",
//            type:"流行"
//        }


        //2.使用内置构造函数
//        var obj = new Object();
//
//        obj.name = "一千个伤心的理由";
//        obj.singer = "张学友";
//        obj.sing = function () {
//            console.log("一千个伤心的理由");
//        }
//
//        var obj1 =new Object();
//        obj.name = "一千个伤心的理由";
//        obj.singer = "张学友";
//        obj.sing = function () {
//            console.log("一千个伤心的理由");
//        }


        //3.封装简单的工厂函数 (不推荐使用了)
        function createSong(songName,singerName){
            var o =new Object();  // 每次调用new都是开辟新的内存，所以多次createSong()都是不同的对象。
            o.name = songName;
            o.singer = singerName;

            o.sing = function () {
                console.log("让我来唱首歌");
            }
            return o;
        }

        var obj = createSong("演员","薛之谦");
        var obj1 = createSong("一言难尽","张宇");

    </script>
</head>
<body>

</body>
</html>

demo.html（自定义构造函数创建对象(推荐方式)）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //创建对象的方式
        //4.自定义构造函数  Object Array
        //什么是构造函数?
        //构造函数其实也是函数，但是通常用来初始化对象
        //并且和new关键字同时出现

        //new 是用来创建对象的
        //构造函数是用来初始化对象的(给对象新增成员)

        //构造函数名，首字母要大写！！！以示区分
        function Person() {
            //默认隐含的操作：把刚才用new新创建出来的对象赋值给this
            this.name = "尼古拉斯凯奇";
            this.age = 50;
            this.sayHello = function () {
                console.log("Hey man");
            }
            //如果这里写其他的代码，会执行吗？  肯定会

            return null;  // return空、null、基本数据类型，都不会起作用。会默认return this;  return object类型才会起作用。
        }

        var p = new Person(); //new Object(); 如果构造函数没有参数那么小括号可以省略。
        console.log(p);
        p.sayHello();


        //构造函数的执行过程
        //1.使用new关键字创建对象
        //2.调用构造函数，把新创建出来的对象赋值给构造函数内的this
        //3.在构造函数内使用this为新创建出来的对象新增成员
        //4.默认返回新创建的这个对象 （普通的函数，如果不写返回语句，会返回undefined）


        //构造函数的返回值
        //1.如果不写返回值，默认返回的是新创建出来的对象(this) （一般都不会去写这个return语句）
        //2.如果我们自己写return语句 return的是空值（return;），或者是基本类型的值或者null，都会默认返回新创建出来的对象
        //3.如果返回的是object类型的值，将不会返回刚才新创建的对象，取而代之的是return后面的值

    </script>
</head>
<body>

</body>
</html>

demo.html（自定义构造函数创建对象的注意事项）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        //对象是无序的键值对儿的集合  (数组是有序的)。 自定义构造函数Animal()
        function Animal(name, type, barkWay) {
            this.name = name;  // 如果不使用new调用Animal(),而是直接Animal()调用,那么this就是window全局对象。
            this.type = type;
            this.bark = barkWay;
        }

        var dog = new Animal("大黄","BYD",function () {  //通过自定义构造函数Animal()创建对象。
            console.log("汪汪汪");
        });
        console.log(dog);

        //注意：如果像使用正常函数一样使用构造函数(不使用new关键字)构造函数中的this将不再指向新创建出来的对象
        //（因为根本就没有创建对象）,构造函数中的this这个时候指向的就是window全局对象
        Animal("","",function () {  //这是一个错误的演示。 不使用new调用构造函数,那么构造函数中的this就是window
            console.log("我是函数");
        }); 
        window.bark();


        //获取具体类型的方式
        //var typeStr = Object.prototype.toString.call(想获取类型的对象)
        //typeStr = typeStr.slice(8, -1)


    </script>
</head>
<body>

</body>
</html>

houyanhua1

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 创建对象的三种传统方式，自定义构造函数创建对象

demo.html（创建对象的三种传统方式）：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script&gt; //
复制链接

扫一扫