JS创建对象的几种方式

最新推荐文章于 2024-04-08 00:00:00 发布

3y先生

最新推荐文章于 2024-04-08 00:00:00 发布

阅读量668

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_39237801/article/details/102885267

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

绪论

记录几种JavaScript创建对象的方式。

正文

<!DOCTYPE html>
<div 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>index</title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <style>
       
    </style>
</head>

<body>

</body>
<script>

    $(document).ready(function () {
        console.log('----------直接对象方式-----------');
        // 作为一个基本对象可以直接使用，但是需要重复使用怎么办
        person.show();
        console.log('------------工厂方式------------');
        // 工厂方式，可以重复创建对象，使用这种方式，返回的对象类型我们是不知道的
        var p1 = createPerson('lili', 12);
        var p2 = createPerson('wuwu', 18);
        p1.show();
        p2.show();
        console.log('---------构造函数模式----------');
        // 构造函数模式，和普通函数没啥差别，就是调用时候使用new关键字
        var p3 = new Person('haha', 17);
        var p4 = new Person('xixi', 16);
        p3.show();
        p4.show();
        console.log('-----------原型模式------------');
        // 原型模式
        var p5 = new PersonY();
        var p6 = new PersonY();
        p5.name = 'lala';
        // 由于赋值，对默认值进行了覆盖
        p5.show();
        // 直接读取默认值
        p6.show();
        // 所以从此处看出，删掉name属性，并没有修改原型中的值，
        // 其实在赋值的时候把原型中的属性进行屏蔽了（属性屏蔽）
        // 注意，使用这种方式时，对象没有该属性，会顺着原型链一直向上查找，直到最顶层
        delete p5.name;
        p5.show();
        console.log('-----组合使用构造函数模式和原型模式-----');
        // 
        var p6 = new PersonX('gaga', 14);
        p6.show();
        console.log('-----------寄生构造函数模式------------');
        // 
        var p7 = new PersonZ('zaza', 16);
        console.log('内容：' + p7.show());
    });

    // 直接对象方式
    var person = {
        name: '张三',
        age: 15,
        show: function() {
            console.log('姓名：' + this.name + '，年龄：' + this.age);
        }
    };

    // 工厂方式
    function createPerson(name, age) {
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.show = function() {
            console.log('姓名：' + obj.name + '，年龄：' + obj.age);
        }
        return obj;
    }

    // 构造函数模式
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.show = function() {
            console.log('姓名：' + this.name + '，年龄：' + this.age);
        }
    }

    // 原型模式
    function PersonY() {}
    PersonY.prototype.name = '李四';
    PersonY.prototype.age = 17;
    PersonY.prototype.show = function() {
        console.log('姓名：' + this.name + '，年龄：' + this.age);
    }

    // 组合使用构造函数模式和原型模式
    function PersonX(name, age) {
        this.name = name;
        this.age = age;
    }
    PersonX.prototype = {
        // 手动修改构造函数指向
        constructor: PersonX,
        show: function() {
            console.log('姓名：' + this.name + '，年龄：' + this.age);
        }
    };

    // 寄生构造函数模式
    function PersonZ(name, age) {
        var arr = new Array();
        arr.push.apply(arr, arguments);
        arr.show = function() {
            return this.join(',');
        }
        return arr;
    }
</script>

</div>