函数对象的创建

最新推荐文章于 2021-11-04 14:46:08 发布

哲子君

最新推荐文章于 2021-11-04 14:46:08 发布

阅读量338

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/zhzijun/article/details/108965856

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JavaScript对象的创建

<body>
    <p>创建 JavaScript 对象。</p>
    <p id="demo"></p> 
    <!-- <h1>我的第一个 Web 页面</h1> -->
    <!-- <p>我的第一个段落。</p> -->
    <script>
        //document.write(Date());
        var person = {
            firstName : "John",
            lastName  : "Doe",
            age       : 50,
            eyeColor  : "blue"
        };
        document.getElementById("demo").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁。";
     </script>
	
</body>

在这里插入图片描述

JavaScript中创建对象主要有3种方式

使用new关键字调用构造器创建函数

<script>
  function Student(name,age){
           this.name = name;
           this.age = age;
        }
        var s1=new Student();//没有传入参数
        var s2=new Student("meinv",20);
        document.write(s1.name+"---"+s1.age+"<br/>");//输出undefined--undefined 对象名.属性名访问属性  在JavaScript中访问属性的方式还有一种对象名（属性名）
        document.write(s2.name+"--"+s2.age);//meinv--20
 </script>

当没有给函数传参时返回undefined，对象的本身其实就是一个关联数组，关联数组其实就是由键值对key value组成的，key对应的就是属性，value对应的就是值，这个值可以是基本数据类型，也可以是function函数，假设当value为函数时，这个函数就是这个对象的一个方法

使用Object直接创建对象

<script>
   var myObj = new Object();//先创建一个空的对象
        myObj.name = "meinv";//动态添加两个属性
        myObj.age = 20;
        myObj.info = function(){//动态添加一个function函数
            document.write("我是"+this.name+"<br/>");//我是美女
            document.write("我今年"+this.age+"岁<br>");//我今年20岁
        }
        myObj.info();
</script>

使用JSON语法创建对象

JSON的概念
JSON(JavaScript Object Notation) 是一种轻量级的数据交换个格式。易于人阅读和编写

JSON的格式
JSON对象是以一对"大括号"括起来，大括号内以多个"名值对"组成，多个名值对之间用"逗号"隔开，名所对象的值可以是各种数据类型的值，也可以是JSON对象。JSON数组用"[]"括起来

<script>
 {"name":"meinv","age":20,"email":"123456789.@qq.com"}//名值用分号隔开，名值对用逗号隔开  
   {"peoples":[
        {"firstName":"xiaohong","lastName":"xiaolv"},
        {"firstName":"xiaoming","lastName":"xiaolan"},
        {"firstName":"xiaohei","lastName":"xiaobai"}
   ]}
</script>

提示： JSON数据格式比XML数据格式更简洁，数据传输量也更小，因此在需要跨平台、跨语言进行数据交换时，有时宁愿选择JSON作为数据交换格式，而不是XML。

JavaScript使用JSON创建对象的语法
object={属性名1:属性值1,属性名2:属性值2,…}

<script>
    var p = {
            name : "John",
            gender : "male",
            info:function(){
                document.write("姓名:"+this.name+",性别:"+this.gender);
            },
        };
        p.info();
</script>

<script>
  //以上几个方法的运行小案例和他们的运行结果
  //第一种 使用new关键字创建
        function student(name,age){
            this.name = name;//对象属性
            this.age = age;
            student.gender = 'male';//此属于类的一个属性
            this.info=function(){
                document.write("姓名:"+this.name+",年龄:"+this.age+",性别："+student.gender+"<br/>")
            }
        }
        var s1 = new student("zhangyi",12)
        s1.info();
  //第二种 使用Object直接创建对象  
        var student = new Object();
        student.name='仗义';
        student.age=30;
        function abc(){
            document.write("姓名:"+this.name+",年龄:"+this.age)
        }
        student.info=abc;
        student.info();
  //第三种 JSON创建对象的语法
        var person={
            "name":"zhangyi",
            "age":30,
            "son":[
                {
                    "name":"jack",
                    "age":2
                },
                {
                    "name":"rose",
                    "age":5
                }
            ],
            "info":function(){
                document.write("父亲姓名:"+this.name+",年龄:"+this.age+"<br>");
                for(var child in this.son){//遍历数组用for in 循环
                    document.write("儿子姓名:"+this.son[child].name+",年龄:"+this.son[child].age+"<br>");
                }
            }
        };
        person.info();
</script>

运行效果如下图：
在这里插入图片描述
在此补充一个知识点方法中的this关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

<body>

    <!-- 
        方法中的this : 代表当前调用该方法的对象
        this指向对象的好处在于，可以更加方便的对象自身的内部成员
     -->
    <script>
        
        //第一种：使用new实例化对象
        var car = new Object();
        //添加属性
        car.color = "red";
        car.price = "20w";
        car.wheel = 4;

        //添加方法
        //console.log(car.color)
        car.showColor = function(){
            console.log("汽车的颜色："+car.color);
        }
        car.showPrice = function(){
            console.log("汽车的价格：20w")
        }
        car.showCar = function(){
            console.log("汽车的颜色："+this.color+",汽车的价格:"+this.price+",汽车有"+this.wheel+"个车轮")
        }
        //访问对象
        car.showColor()
        car.showCar()
    </script>
</body>

在这里插入图片描述

哲子君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数对象的创建

JavaScript中创建对象主要有3种方式使用new关键字调用构造器创建函数<script> function Student(name,age){ this.name = name; this.age = age; } var s1=new Student();//没有传入参数 var s2=new Student("") </script>...
复制链接

扫一扫