对象

  • 对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性(与C语言中结构体类似)

分类

  1. 内建对象

    • 由ES标准中定义的对象,在任何的ES的实现中都可以使用
    • 比如:Math,String,Number,Boolean,Function,Object……
  2. 宿主对象

    • 由JS的运行环境提供的对象,目前来讲主要是浏览器提供的对象
    • 比如BOM,DOM
  3. 自定义对象

    • 由开发人员自己创建的对象

对象的使用

创建对象

1
var obj = new Object();

向对象中添加/修改属性

1
2
3
4
5
obj.name = "孙悟空“;

obj.gender = ”男“;

obj.age = 18;

读取

1
console.log(obj.gender);

特殊属性名的存取

这种写法更加灵活

1
2
3
obj["123"] = 789;

console.log(obj["123"]);

in运算符

  • 检查obj中是否含有test2属性

    1
    console.log("test2" in obj);

存储

  • JS中变量都是保存在栈内存中的

    • 基本数据类型的值直接在栈内存中存储
  • 对象是保存在堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间

    而变量保存的是对象的内存地址(对象的引用)

对象字面量

1
var obj = {};  等同于 var obj = new Object();
  • 更方便地直接添加属性

    1
    2
    3
    4
    var obj2 = {name:"猪八戒",
    age:28,
    gender:"男"(此处最好不要写",",浏览器会默认删除",")
    }
  • 更方便地无限套娃

    1
    2
    3
    4
    5
    var obj2 = {name:"猪八戒",
    age:28,
    gender:"男",
    test:{name:"沙和尚"}(注意是":",而不是"=")
    }

函数

  • 函数也是一个对象
  • 函数可以封装一些功能(代码),在需要时可以执行这些功能(代码)

函数的使用

  • 创建一个函数对象(不常用)

    1
    var fun = new Function("console.log('Hello 这是我的第一个函数');");
  • 函数的调用

    1
    fun();
  • 使用函数声明来创建一个函数

    1
    2
    3
    4
    5
    6
    7
    function fun2(){
    console.log("这是我的第二个函数~~~");
    alert("哈哈哈");
    document.write("~~~(>_<)~~~");
    }

    fun2();
  • 使用函数表达式来创建一个对象

    本质:将匿名函数赋值给变量

    1
    2
    3
    4
    5
    var fun3 = function(){
    console.log("我是匿名函数中封装的代码");
    }

    fun3();
  • 函数的参数

    1
    2
    3
    4
    5
    function sum(a,b){
    console.log(a+b);
    }

    sum(1,2);

    如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined

  • 返回值

    1
    2
    3
    4
    5
    6
    function sum(a,b,c){
    var d = a + b + c;
    return d;(rueturn后的语句不会执行)
    }

    var result = sum(4,7,8);
  • 实参可以是任意数据类型,包括对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
      function sayHello(o){
    console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人,"+"我住在"+o.address)
    }

    var obj = {
    name:"孙悟空",
    age:18,
    gender:"男",
    address:"花果山"
    };

    sayHello(obj);
    //sayHello(obj);也可以这样写
    function fun(a){
    a(obj);
    }
    fun(sayHello);
    //输出结果都是:
    // 我是孙悟空,今年我18岁了,我是一个男人,我住在花果山
  • 实参可以是一个对象,也可以是一个函数,对象能干的事,实参都能干

    1
    2
    3
    4
    5
    6
    function fun(a){
    console.log("a = "+a);
    }
    fun(function(){alert("hello")});
    //输出结果为:
    // a = function(){alert("hello")}
    • Demo1
    1
    2
    3
    4
    5
    6
    7
    8
    function fun(a){
    console.log("a = "+a);
    }
    function sum(a,b,c){
    var d = a + b + c;
    return d;
    }
    fun(sum);
    • 输出结果为:

      image-20201204194957573

    • Demo2

      1
      2
      3
      4
      5
      6
      7
      8
      function fun(a){
      console.log("a = "+a);
      }
      function sum(a,b,c){
      var d = a + b + c;
      return d;
      }
      fun(sum(1,2,3));
    • 输出结果为:

      a = 6
    • 对比

      1
      2
      3
      4
      5
      6
      sum()
      - 调用函数
      - 相当于使用函数的返回值
      sum
      - 函数对象
      - 相当于直接使用函数

返回值的类型

  • Demo1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function fun(){
    alert("函数要执行了~~~");
    for(var i = 0 ; i < 5 ; i++){
    if(i == 2){
    //使用break可以退出当前循环
    //continue用于跳出当次循环
    //使用return可以结束整个函数
    }
    console.log(i);
    }
    alert("函数执行完了~~~");
    }
    fun();
  • 返回值可以是任意的数据类型

    也可以是一个对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function fun2(){
    // return 10;
    // return "hello";
    // return true;
    // return null;
    }
    var a = fun2();
    console.log("a = "+a);

    function fun3(){
    var obj = {name:"沙和尚"};
    return obj;
    }
    var b = fun3();
    console.log("b = "+b.name);//b = 沙和尚

    也可以是一个函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function fun4(){
    function fun5(){
    alert("我是fun5");
    }
    //将fun5函数对象作为返回值返回
    return fun5;
    }
    a = fun4;
    console.log(a);

    输出结果为:

    image-20201204214934814

    上述程序若将a=fun4;改为a=fun4();console.log(a);改为a();或者fun4()(); 都将弹出警告框!

立即执行函数

  • Demo

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //函数对象()
    /*
    *立即执行函数
    *函数定义完,立即被调用,这种函数叫做立即执行函数
    *立即执行函数往往只会执行一次
    */
    (function(a,b){
    console.log("a = "+a);
    console.log("b = "+b);
    })(123,456);

    输出结果为:

    a = 123
    b = 456

方法

  • 函数也可以成为对象的属性

  • 如果一个函数作为一个对象的属性保存,那么我们就称这个函数是这个对象的方法。调用这个函数就说是调用对象的方法

  • 但是它只是名称上的区别,与函数并无差异

  • 一个形象的比喻:函数是公交车🚌,方法是私家车🚗

  • Demo

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var obj = new Object();
    //向对象中添加属性
    obj.name = "孙悟空";
    obj.age = 18;
    //对象的属性值可以是任何数据类型,也可以是个函数
    obj.sayName = function(){
    console.log(obj.name);
    };
    var obj2 = {
    name:"猪八戒",
    age:18,
    sayName:function(){
    console.log(obj2.name)
    }
    }
    obj.sayName();
    obj2.sayName();

    输出结果为:

    孙悟空
    猪八戒

枚举对象中的属性

  • 使用for ... in 语句

  • 语法:

    1
    2
    3
    for (var 变量 in 对象) {

    }
  • 对象中有几个属性,循环体就会执行几次

    每次执行时会将对象中的一个属性的名字赋值给变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var obj ={
    name:"孙悟空",
    age: 18,
    gender: "男",
    address:"花果山"
    };
    for (var n in obj) {
    console.log(n)
    }

    运行结果:

    image-20201204224529660

  • Demo

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj ={
    name:"孙悟空",
    age: 18,
    gender: "男",
    address:"花果山"
    };
    for (var n in obj) {
    console.log("属性名:"+n);
    console.log("属性值:"+obj[n]);//.n和["n"]只能用于取静态值,取变量要用[n]
    }

    输出结果:

    image-20201204225116678