对象

最新推荐文章于 2021-08-26 15:02:14 发布

端脑

最新推荐文章于 2021-08-26 15:02:14 发布

阅读量153

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43776742/article/details/103556620

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

面向对象

JS创建对象

构造函数

面向对象

<!DOCTYPE html>
<html 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>Document</title>
</head>
<body>
    <script>
        // 记录学生的成绩
        var student1 = {name:"zs",subject:"语文",score:89};
        var student2 = {name:"ls",subject:"语文",score:79};
        console.log(student1.score);
        console.log(student2.score);
        // 面向对象方式
        function Student(name,subject,score) {
            this.name = name;
            this.subject = subject;
            this.score = score;

            this.printScore = function() {
                console.log(this.score);
            }
        }
        var zs = new Student("zs","语文",89);
        var ls = new Student("ls","语文",79);
        zs.printScore();
        ls.printScore();
    </script>
</body>
</html>

创建对象

<!DOCTYPE html>
<html 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>Document</title>
</head>

<body>
    <script>
        /* 对象直接量 字面量*/
        // var stu1 = {
        //     name: "lisi",
        //     age: 18,
        //     study: function() {
        //         alert("好好学习 天天向上");
        //     }
        // }
        // var stu2 = {
        //     name: "lucy",
        //     age: 22,
        //     study: function() {
        //         alert("勤奋学习");
        //     }
        // }
        // console.log(stu2.name);

        // var stu3 = new Object();
        // stu3.name = "tom";
        // stu3.age = 19;
        // stu3.study = function() {
        //     alert("勤奋学习");
        // }

        // 工厂函数(把冗余的对象进行封装简化)
        function creatStudent(name, age) {
            return {
                name: name,
                age: age,
                study: function() {
                    alert("勤奋学习");
                }
            }
        }

        var lucy = creatStudent("lucy", 22);
        var lisi = creatStudent("lisi", 18);
        console.log(lucy.name);
        console.log(typeof lucy);
        console.log(lucy instanceof creatStudent); //false 判断一个对象是否是构造函数的实列
        lucy.study();

        var arr = []; // arr = new Array()
        console.log(arr instanceof Array);
    </script>
</body>

</html>

构造函数

构造函数与普通函数区别:

构造函数是希望通过new去调用普通函数就是函数名直接调用
构造函数中没有显示去创建对象直接将属性或方法赋给列this对象
构造函数中没有return 普通函数一般有返回值
构造函数名每个单词首字母一般大写普通函数一般从第二个单词首字母大写

构造函数与实例对象关系

new出来的对象都有一个属性constructor 该属性指向创建该实例的构造函数

<!DOCTYPE html>
<html 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>Document</title>
</head>
<body>
    <script>
         // 工厂函数
         function creatStudent(name,age) {
            return {
                name: name,
                age: age,
                study: function() {
                    alert("勤奋学习");
                }
            }
        }
        // 构造函数    构造对象的函数
        function Student(name,age) {
            this.name = name;
            this.age = age;
            this.study = function() {
                alert("好好学习 天天向上");
            }
        }

        //var res = Student("lucy",20);// undefined。如果直接调用会失败。
        //console.log(res);
        /*
           new执行构造函数发生了什么？
           1 实参传给形参
           2 会在内存中创建一个空对象 {} 并且让函数中的this指向该空对象
           3 执行构造函数的函数体 {name:"lucy",age:20,study:function(){}}
           4 返回对象
        */
        var lucy = new Student("lucy",20);
        var lily = new Student("lily",18);
        console.dir(lucy.constructor === Student);
        console.dir(lily.constructor === Student);
        console.log(lily.age);
        console.log( lucy instanceof Student);
    </script>
    <script>
		var student = {
            "mama": {
                "age": "18",
                "sex": "man",
                "info": {
                    "name": "lisi",
                    "age": "23"
                }
            },
            "age": "18",
            "sex": "man"
        };

        function Student(student) {
            this.mama = student.mama;
            this.age = student.age;
            this.sex = student.sex;
        }

        var s1 = new Student(student);

        console.log(s1.mama.info.name);
	</script>
</body>
</html>

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对象

狭义对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫