web前端-JavaScript创建对象的四种方法总结-阿里云开发者社区

web前端-JavaScript创建对象的四种方法总结

2022-07-10 200

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 文章目录1.通过表达式创建2.使用new关键字3.使用工厂模式4.使用构造函数四种方法详解传送锚点

1.通过表达式创建

<!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>
    <script>
        //1.通过表达式创建对象
        var per1 = {
            name:'苏凉',
            age:21,
            gender:'男',
            sayName:function(){
                console.log(this.name)
            }
        };
        console.log(per1);
        per1.sayName();
    </script>
</head>
<body>
</body>
</html>

2.使用new关键字

<!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>
    <script>
        //2.使用new关键字
        var per2 = new Object();
        per2.name = '苏凉';
        per2.age = 21;
        per2.gender = '男';
        per2.sayName = function(){
            console.log(this.name)
        }
        console.log(per2);
        per2.sayName();
    </script>
</head>
<body>
</body>
</html>

3.使用工厂模式

<!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>
    <script>
        //3.使用工厂模式创建
        function person(name,age,gender){
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.gender = gender;
            obj.sayName = function(){
                console.log(this.name)
            }
            return obj;
        }
        var per3 = person('苏凉',21,'男');
        console.log(per3);
        per3.sayName();
    </script>
</head>
<body>
</body>
</html>

4.使用构造函数

<!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>
    <script>
        //4.使用构造函数创建
        function Person(name, age, gender){
            this.name = name ;
            this.age = age ;
            this.gender = gender;
        }
        Person.prototype.sayName = function(){
            console.log(this.name)
        }
        var per4 = new Person('苏凉',21,'男');
        console.log(per4);
        per4.sayName();
    </script>
</head>
<body>
</body>
</html>