JavaScript中4中创建对象的方法，js怎么创建对象怎么使用赋值修改构造函数

最新推荐文章于 2023-01-28 16:41:07 发布

Java全栈开发架构师

最新推荐文章于 2023-01-28 16:41:07 发布

阅读量245

点赞数

分类专栏：前端 JS 文章标签： js javascript 面向对象编程 js对象赋值 browser对象

本文链接：https://blog.csdn.net/SubStar/article/details/116933059

版权

前端同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

JavaScript中4中创建对象的方法

JavaScript中4中创建对象的方法
- 方法1
- - 案例
- 方法2
- - 案例
- 方法3
- - 案例
- 方法4
- - 案例
- 鸣谢

JavaScript中4中创建对象的方法

方法1

通过new Object()创建来创建空对象，再给对象添加属性赋值

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
    // 方法1:包含所有内容
    //------------------------------------------------
    var obj1 = new Object();
    obj1.name = '张三';   // 字符串类型属性
    obj1.age = 45;  // 数字类型属性
    obj1.lock = false;  // 布尔类型属性
    obj1.hoby = ['篮球', '乒乓球']    // 数组类型属性
    obj1.child = obj1;  // 对象类型属性
    obj1.test = function () { // 函数类型属性
        console.log('你好')
    }
    console.log(obj1)   // 输出整个对象
    obj1.test() // 执行对象的函数
</script>

方法2

通过使用{}直接创建对象，并添加键值对属性

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
    // 方法2：直接使用{}
    //------------------------------------------------
    var obj2 = {
        name: "李四", // 字符串类型属性
        age: 45,   // 数字类型属性
        lock: false,   // 布尔类型属性
        hoby: ['篮球', '乒乓球'],    // 数组类型属性
        child: {    // 对象类型属性
            name: '儿子'
        },
        fun: function () {  // 函数类型属性
            console.log("函数")
        }
    }
    console.log(obj2)   // 输出整个对象
    obj2.fun()  // 执行对象的函数
</script>

方法3

通过直接写构造函数来创建对象，构造函数中使用this关键字来添加属性，通过构造函数参数传递属性值

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
    // 方法3：函数式（构造函数）
    //------------------------------------------------
    function People(name, age, lock, hoby, child, string) {
        this.name = name;   // 字符串类型属性
        this.age = age;    // 数字类型属性
        this.lock = lock;  // 布尔类型属性
        this.hoby = hoby;   // 数组类型属性
        this.child = child;  // 对象类型属性
        this.string = string;   // 函数类型属性
    }

    var obj3 = new People('王五', 18, false, ['篮球', '乒乓球'], {name: '儿子'}, function () {
        console.log('string');
    });
    console.log(obj3)   // 输出整个对象
    obj3.string()   // 执行对象的函数
</script>

方法4

通过class关键字来创建标准语结构的对象，这种方法和去哦他语言的对象创建语法非常相似，项目比较大的适合推荐使用

案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
    // 方法4：class写法
    //------------------------------------------------
    class persion {
        constructor(name, age, lock, hoby, child, string) {
            this.name = name;   // 字符串类型属性
            this.age = age;    // 数字类型属性
            this.lock = lock;  // 布尔类型属性
            this.hoby = hoby;   // 数组类型属性
            this.child = child;  // 对象类型属性
            this.string = string;   // 函数类型属性
        }
    }

    var obj4 = new persion('王五', 18, false, ['篮球', '乒乓球'], {name: '儿子'}, function () {
        console.log('string');
    });
    console.log(obj4)   // 输出整个对象
    obj4.string()   // 执行对象的函数
</script>

鸣谢

如果您觉得这篇文字对您有帮助！感谢 一键三联 支持一下，关注了解更多关于软件开发小知识

Java全栈开发架构师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中4中创建对象的方法，js怎么创建对象怎么使用赋值修改构造函数

JavaScript中4中创建对象的方法JavaScript中4中创建对象的方法方法1案例方法2案例方法3案例方法4案例鸣谢JavaScript中4中创建对象的方法方法1通过new Object()创建来创建空对象，再给对象添加属性赋值案例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><
复制链接

扫一扫