javaScript对象函数初相识

2.5、对象初相识

2.5.1、对象的初识

2.5.1.1、对象的定义

现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如一本书，一辆汽车，一个人可以是“对象”，一个数据库，一张网页，一个与远程服务器的连接也可以是“对象”。

例子：

明星、女朋友、班主任、苹果、手机

周星驰、小明的女朋友、这个班的班主任、这个被咬了一口的苹果、小王的手机

在JS中，对象是一组无序的相关属性和方法的集合，所有的实物都是对象，例如字符串、数值、数组、函数等

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

例子：手机对象

属性：大小、颜色、重量、屏幕尺寸、厚度等

方法：打电话、发短信、聊微信、玩游戏等

例如：桌子对象

属性：颜色，长，宽，高，材质，价格等等

方式：可以睡觉，可以学习，可以吃饭等

例如：小明

属性：身高，体重，性别，性格，爱好等

方式：可以说话，可以工作，可以学习等

例如：按钮

属性：大小，背景色，字体颜色，圆角

方式：点击跳转

2.5.1.2、对象的意义

保存一个值时，可以使用变量

保存多个值（一组值）时，可以使用数组。但数组元素之间信息不连贯，无连接，表达不清楚

如果保存一个人完整的信息？

JS中的对象表达结构更清晰，更强大。

2.5.1.3、对象的分类

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性，让信息与信息之间有联系，关系明确，操作起来也更加方便

1.内建对象--有ES标准中定义的对象，在任何的ES的实现中都可以使用，eg:Math String Boolean function object

2:宿主对象--由JS的运行环境提供的对象，目前来讲，主要指浏览器提供的对象，eg：BOM（浏览器对象模型） DOM(文档对象模型) 两组对象，里面各自都有很多

3:自定义对象--由开发人员创建的对象

2.5.2、创建对象：利用new Object创建对象

2.5.2.1、对象的基本操作

创建对象

使用new关键字调用的函数，就是构建函数constructor， 构建函数是专门用来创建对象的函数

使用typeof检查一个对象时，则会返回object

向对象添加属性：对象.属性名=属性值;

对象[属性名]=属性值

  var obj = new Object();
  obj.name = "张三";//向obj中添加一个name属性，name属性值为'张三'
  obj.gender = "男";//向obj中添加一个gender属性
  obj.age = 18;//向obj中添加一个age属性

注意：

• • 我们是利用 =赋值运算符的方法，添加对象的属性和方法
  • 每个属性和方法之间用；分号结束

修改对象属性：对象.属性名=新值

 obj.name = "孙悟空";

删除对象的属性：delete 对象.属性名

delete obj.name;//删除name属性
console.log(obj.name)//undefined

2.5.2.2、属性名与属性值

属性名：

-对象的属性名不强制性要求遵守标识符号的规范，什么名字都可以使用

-但是我们使用还是尽量按照标识符的规范去做

-如果要使用特殊的属性名，例如数字，不能采用"."的方式来操作，需要用对象名['属性名']来读取

使用[]这种形式去操作属性，更加灵活，在[]中可以直接传递一个变量，这样变量值是多少就会读哪个属性

var obj = new Object();
obj.name = "tom"; //向对象中添加属性
obj["123"] = "你好";
var n = "123"; //把'123'属性赋值给n
console.log(obj["123"]); //读取obj的'123'属性
console.log(obj[n]); //读取obj的'123'属性

属性值：

JS对象的属性值，可以是任意的数据类型,甚至可以是对象

obj.test = true;
obj.test = undefined;
obj.test = "true";
obj.test = 123;
// 创建一个对象
var obj2 = new Object();
obj2.name = "猪八戒";
obj.test = obj2;

in运算符：

-通过该运算符可以检查一个对象中是否含有指定的属性， 如果有则返回true，没有则返回false

-语法："属性名" in 对象

//检查obj中是否含有test2属性
console.log("test2" in obj);//false
console.log("test" in obj);//true

2.6、函数初相识

2.6.1、函数的概念

在JS里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码需要大量重复使用

函数：就是封装一段可被重复调用执行的代码块。通过代码块可以实现在需要的的重复使用，使用typeof检查一个函数对象时，会返回function

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口，简单理解：将很多衣服打包到一个行李箱,jQuery就是一个函数封装库，对外暴露一个顶级对象$

2.6.2、函数的使用

函数在使用时分为两步：声明函数和调用函数

2.6.2.1、声明函数（创建函数）三种方式

第一种方式 创建一个构造函数对象

——我们在实际开发中很少使用构造函数来创建一个函数对象

——可以将要封装的代码以字符串的形式传递给构造函数

—— 封装到函数中的代码不会立即执行，函数中的代码会在函数调用的时候执行

var fun = new Function("console.log('hello 这是我的第一个函数')");
console.log(typeof fun);//function
fun();

第二种方式 使用函数声明来创建一个函数（常用）

function 函数名（[形参1,形参2,形参3,形参4....形参n]）{

执行语句.....

}

 function fun2() {
    console.log("这是我的第二个函数～～～");
    alert("hahahaha");
    document.write("wuwuwuwu");
  }

第三种方式 使用函数表达式来创建一个函数 （匿名函数）

var 变量名=function（[形参1,形参2,形参3,形参4....形参n]）{

语句.....

}

注意：变量名不是函数名

var fun3 = function () {
    console.log("我是匿名函数中的封装的代码");
}; //相当于赋值语句
fun3(); //调用函数

注意：

由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，例如getsum

2.6.2.2、调用函数

调用函数语法：变量名/函数名()

当调用函数时，函数中封装的代码会按照顺序执行

2.6.3、函数的参数

2.6.3.1、参数

在声明函数时，可以在函数名称后面的小括号里添加一些参数，这些参数是形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称谓实参。

形参：

形式上的参数，函数定义的时候，传递的参数，当前并不知道是什么，用来接收实参的，形参类似一个变量，声明了并未赋值，多个形参之间用逗号隔开

实参：

实际上的参数，函数调用的时候传递的参数，实参是传递给形参，相当于给形参赋值

参数的作用：

在函数内部某些值不能固定的时候，我们可以通过参数在调用函数时传递不同的值进去

语法结构：

function 函数名（形参1,形参2····形参n）{//声明函数的小括号里的是形参（形式上的参数）

执行语句.....

}

函数名（实参1，实参2····）//在函数调用的小括号里面是实参（实际参数）

2.6.3.2、形参和实参匹配的问题

• 如果形参和实参的个数一致，则正常输出结果
• 如果实参的个数多于形参的个数，会取形参的个数
• 如果实参的个数小于形参的个数，多余的形参默认定义为undefined
• 调用函数时，解析器不会检查实参的类型，所以要注意，是否有可能会接收到非法的参数，函数的实参可以是任意的数据类型

建议形参和实参个数一致

2.6.3.3、实参可以是任何类型

——可以是一个对象,当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递

——实参可以是一个对象，也可以是一个函数

      //将参数封装到对象中传递
      function sayhello(o) {
        //console.log("o="+o);//对象
        console.log("我是" + o.name + ",今年" + o.age + "岁了," + 
        "我是一个" + o.gender + "人" + ",我住在" + o.address);
      }
       //创建一个对象
      var obj = new Object();
      obj.name = "孙悟空";
      obj.age = 18;
      obj.gender = "男";
      obj.address = "花果山";
      sayhello(obj); //可以直接全部赋值

//实参可以是一个函数
      function fun(a) {
        //console.log("a="+a);
        a(obj);
      }
      fun(sayhello);

      /* 
      sayhello()
         -调用函数
         -相当于使用的函数的返回值
         -机器作出的东西
         
      sayhello
         -函数对象
         -相当于直接使用函数对象
         -机器 
      */