JavaScript 对象

80 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

创建对象

  • 使用对象字面量创建对象:就是花括号 { } 里面包含了表达。

  • 键:相当于属性名

  • 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型,函数类型等)

var info= {

        name : '小明',

        age : 18,

        sex : '男',

        say: function(){

            alert('大家好啊~');

     }}

总结:

  • 里面的属性或者方法我们采取键值对的形式  键 属性名 : 值  属性值

  • 多个属性或者方法中间用逗号隔开的

  • 方法冒号后面跟的是一个匿名函数

  • 属性加引号和不加引号使用是一样的,如果键是以数字开头必须加引号,且不能用”.”来调用需要用[]调用。

对象的使用

console.log(info.name)     // 调用名字属性

console.log(info['name'])  // 调用名字属性

info.say(); //调用方法

注意:

  • 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的

  • 调用属性还有一种方法 对象名['属性名']

  • 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号

案例:

var num = 10;

        var obj = {

            age: 18,

            fn: function() {

                    alert(“1”);

            }

        }



        function fn() {

 alert(“2”);

        }

        console.log(obj.age);

        // console.log(age);

总结:

  • 变量 单独声明并赋值  使用的时候直接写变量名 单独存在

- 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性

  • 函数是单独声明 并且调用的 函数名() 单独存在的

  • 方法 在对象里面 调用的时候 对象.方法()

new创建对象

利用 new Object 创建对象。

var obj = new Obect();//此时obj已经为对象

利用属性和方法来赋值对象:

obj .name = '小明';

obj .age = 18;

obj.sex = '男';

obj.sayHi = function(){

        alert('大家好啊~');

}

总结:

  • Object() :第一个字母大写   

  • new Object() :需要 new 关键字

  • 使用的格式:对象.属性 =  值;   

构造函数创建对象

  • 构造函数:是一种特殊的函数,主要用来初始化对象,

  • 即为对象成员变量赋初始值,它总与 new 运算符一起使用。

  • 我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

格式:

 function 构造函数名(形参1,形参2,形参3) {

           this.属性名1 = 参数1;

           this.属性名2 = 参数2;

           this.属性名3 = 参数3;

           this.方法名 = 函数体;

 }

  • 构造函数的调用格式

var obj = new 构造函数名(实参1,实参2,实参3)

以上代码中,obj即接收到构造函数创建出来的对象。

举例:

// new 构造函数名();

     function student(uname, age, sex) {

            this.name = uname;

            this.age  = age;

            this.sex   = sex;

            this.sing  = function(sang) {

                console.log(sang);

            }

      }

 var info = new student('小明', 18, '男'); // 调用函数返回的是一个对象

为什么使用构造函数?

  • 为什么使用构造函数:就是因我们前面两种创建对象的方式一次只能创建一个对象

  • 因为我们一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制

  • 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数

  • 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

写法总结:

  • 构造函数名字首字母要大写

  • 我们构造函数不需要return 就可以返回结果

  • 我们调用构造函数 必须使用 new

  • 我们只要new student() 调用函数就创建一个对象 info {}

  • 我们的属性和方法前面必须添加 this

new 关键词的作用:

  • 在构造函数代码开始执行之前,创建一个空对象;

  • 修改this的指向,把this指向创建出来的空对象;

  • 执行函数的代码

  • 在函数完成之后,返回this---即创建出来的对象

例题

1:创建一个电脑对象,该对象有颜色,品牌,重量,看电影(方法),打游戏(方法),关机,开机,敲代码。

<script>	
var Computer ={
				color :"红色",
				brand :"华硕",
				weigth:"1000",
				ability:function(str){
					console.log("我是" + this.brand + this.color + this.weigth + str + "电脑");
				}
			}
			Computer.ability("打游戏");
</script>

2:创建一个构造函数,包括:SID,姓名,爱好,年级,爱好(可传参数),创建2个学生对象。

 <script>    
         function Student(sid,realname,age){
				this.sid=sid;
				this.realname=realname;
				this.age=age;
				this.hobby=function(str){
					return sid+realname+age+str;
				}
		   }
		   var s1 = new Student("001","小红",19)
		   var arr =s1.hobby("打游戏");
		   console.log(arr)
  </script>

\