5.2JavaScript对象的创建

最新推荐文章于 2024-11-07 13:38:59 发布

前端小将_Lue

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量206

点赞数

分类专栏： JavaScript基础 #JavaScript对象文章标签： javascript 前端

本BLOG上原创文章为前端小将_Lue所创，未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/2301_77135626/article/details/129766125

版权

JavaScript基础同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

#JavaScript对象

4 篇文章 0 订阅

订阅专栏

<head>
       <meta charset="utf-8">
       <title>对象</title>
   </head>
   <script>
       /*
       在JavaScript中，对象属于复杂数据类型，它是由属性和方法组成的一个集合，属性是指对象的特征，方法是指对象的行为。
       在代码中，属性可以看成对象中保存的数据，方法可以看成对象中保存的函数。
       对象的属性和方法统称为对象的成员
       */

   /*
   5.2 对象的创建
   创建对象有三种常用方式
   1.利用字面量创建对象
   2.利用构造函数创建对象
   3.利用Object()创建对象
   */

   </script>
   <script>
       /*
       5.2.1利用字面量创建对象
       利用字面量创建对象就是用大括号"{}"来标注对象成员，每个对象成员使用键值对的形式保存，即"key:value"的形式
       对象字面量语法格式如下:
       {key1:value1,key2:value2,...} key1和key2表示对象成员的名称，value1和value2表示对象成员的值，多个对象成员之间用","隔开
       当对象不需要成员时，键值对可以省略，此时表示空对象
       */
   var obj = {}; //创建一个空对象
   //创建一个学生对象
   var stu1 = {
       name : '小明', //name属性
       age : 18, //age属性
       sex : '男', //sex属性
       sayHello : function(){ //sayHello()方法
           console.log('hello,i\'m 小明');
       }
   }

   /*
   使用对象成员有两种方式
   1.使用"."
   2.使用"[]"
   */
   //第一种方式
   console.log(stu1.name); //访问对象的属性
   stu1.sayHello(); //调用对象的方法
   //第二种方式
   console.log(stu1['age']); //访问对象的属性
   stu1['sayHello'](); //调用对象的方法

   /*
   若对象成员名包含特殊字符，则可以用字符串来表示成员名，通过"[]"来访问
   */
   var stu2 = {
       'name_age' : '小黑-18'
   };
   console.log(stu2['name_age']);

   //用户创建完成后，用户可以通过为属性或方法赋值的方式来添加对象成员
   //以下是示例代码：
   var obj = {};
   obj.name = 'nigger'; //为对象添加name属性 (演示"."语法)
   obj['age'] = 99; //为对象添加age属性（演示"[]"语法）
   obj.sayHello = function(){ //为对象添加sayHello()方法(演示"."语法)
       console.log('hello,我是nigger');
   };
   obj['sing'] = function(){ //为对象添加sing()方法(演示"[]"语法)
       console.log('hello,我会唱跳rap篮球');
   };
   console.log(obj.name); //访问name属性
   console.log(obj.age); //访问age属性
   obj.sayHello(); //调用sayHello()方法
   obj['sing'](); //调用sing()方法

   //若访问对象中不存在的成员，则返回undefined
   var obj2 = {}; //创建一个空对象
   console.log(obj2.name); //输出undefined
   </script>


   <script>
       /*
       5.2.2 利用构造函数创建对象
       所谓构造函数，就是一个提供生成对象的模板并描述对象基本结构的函数
       主要用来在创建对象时初始化对象，即为对象的成员赋初始值。
       通过一个构造函数可以创建多个对象，这些对象都有相同的结构。利用构造函数创建对象的过程称为实例化，利用构造函数创建出来的对象称为构造函数的实例对象
       构造函数的名称推荐首字母大写
       定义构造函数的语法格式如下：
       function 构造函数名 ([参数1，参数2，...]){
           函数体
       } //构造函数的参数可以有一个或多个，也可省略
       在构造函数的函数体可以为新创建的对象添加成员，其语法格式如下：
       this.属性=值;
       this.方法 = function([参数1,参数2,...]){
           方法体
       } //this表示新创建的出来的对象

       定义构造函数后，使用构造函数创建对象的语法格式如下：
       var 变量名 = new 构造函数名([参数1,参数2,...]); //参数可以有多个，当不需要传入参数时，参数可以省略且小括号也可以省略
       */
   //定义一个student()构造函数
   function Student(name,age){
       this.name = name;
       this.age = age;
       this.introduce = function () {
           console.log('hello,我是构造函数对象'+this.name);
       }
   }
   //使用Student()构造函数创建对象
   var stu1 = new Student('小黑',18);
   stu1.introduce();
   var stu2 = new Student('小白',17);
   stu2.introduce();
   </script>

   <script>
       /*
       静态成员和实例成员
       JavaScript中，构造函数本身也是对象，所以构造函数也有成员
       为了区分构造函数的成员和实例对象的成员，构造函数的成员称为静态成员，实例对象的成员称为实例成员
       以下是代码演示
       */
   function Person (name){
       //添加实例成员
       this.name = name; //实例成员
       this.say = function (){ //实例成员
           console.log('Hello');
       }
   };
   //添加静态成员
   Person.class = '102班'; //静态成员
   Person.run = function(){ //静态成员
       console.log('run');
   }
   //使用静态成员
   console.log(Person.class);
   Person.run();
   //使用实例成员
   var p1 = new Person('nerg');
   console.log(p1.name);
   p1.say();
   </script>


   <script>
       /*
       5.2.3 利用Object()创建对象
       数组有构造函数Array()是JavaScript的一个内置构造函数
       对象也有构造函数，对象的构造函数为Object()
       利用Object()构造函数创建obj对象示例代码如下:

       */
   var obj = new Object();
   obj.name = '坤坤';
   obj.sayHello = function (name){
       console.log('hello,我的名字是'+name);
   }
   obj.sayHello(obj.name);
   </script>