一、对象

  • 在对象里的function叫做方法
  • 在对象外的function叫做函数

1.1、对象的基本形式及增删改查

  • 如果对象里面有这个属性名，那么对象.属性就属于修改；没有这个属性名则属于新增

  • 在对象里面，this指向的就是当前对象本身

    1.       // 对象的基本形式
    2.       var teacher = {
    3.           name: '张三',
    4.           sex: 'male',
    5.           age: 18,
    6.           weight: 130,
    7.           teach: function(){
    8.               console.log('I am teach JavaScript');
    9.           },
    10.           eat: function(){
    11.               this.weight++;
    12.               console.log(this.weight);
    13.               console.log('I am having a dinner');
    14.           },
    15.           smoke: function(){
    16.               this.weight--;
    17.               console.log(this.weight);
    18.               console.log('I am smoking');
    19.           }
    20.       }
    22.       teacher.teach();
    23.       teacher.eat();
    24.       teacher.smoke();
    25.       teacher.smoke();
    27.       // 对象的增删改查
    28.       // 如果对象里面有这个属性名，那么对象.属性就属于修改；没有这个属性名则属于新增
    29.       // 在对象里面，this指向的就是当前对象本身
    30.       // 新增
    31.       teacher.height = 175;
    32.       // 删除 需要借助关键词delete
    33.       delete teacher.age;
    34.       // 修改
    35.       teacher.age = 22;
    36.       // 查询
    37.       var res = teacher.weight;
    38.       console.log(res);
    39.       console.log(teacher);

    二、简单了解数组里的两个常用方法

  • ary.splice(n, m); 从索引n开始删除m个

  • ary.indexOf(n); 找到n在数组里出现的索引位置，如果该数组不包含n，那么返回的结果是-1

    1.       // ary.splice(n, m);
    2.       var ary = [1, 2, 3, 4, 5];
    3.       ary.splice(0, 2);
    4.       console.log(ary);
    6.       // ary.indexOf(n);
    7.       var arr = [11, 22, 33, 44, 55];
    8.       var res = arr.indexOf(55);
    9.       console.log(res);

    三、对象字面量和构造函数

    3.1、对象字面量

    1.       // 对象字面量
    2.       var person = {
    3.           name: 'liangyu',
    4.           age: 18,
    5.           weight: 130,
    6.           height: 170
    7.       }
    9.       person.name = 'kola';
    10.       console.log(person);

    3.2、系统自带的构造函数

    系统自带的构造函数和对象字面量没什么区别

    1.       // 构造函数 系统自带的构造函数
    2.       var obj = new Object();
    3.       obj.name = '张三';
    4.       obj.age = 10;
    5.       console.log(obj);

    3.3、自定义构造函数

  • 注意：自定义构造函数需要使用大驼峰来命名

  • 构造函数如果不被执行，里面的this根本没有作用

  • 构造函数实例化过程中，构造函数只有new了以后，里面的this才会执行当前这个实例化对象本身；如果不被new，把它当做普通函数执行的话，里面的this就指向window

    1.   // 自定义构造函数
    2.       function Teacher(){
    3.           this.name = '李四';
    4.           this.age = '18';
    5.           this.weight = 130;
    6.           this.course = 'JavaScript';
    7.       }
    9.       var t1 = new Teacher();
    10.       var t2 = new Teacher();
    12.       console.log(t1, t2);
    14.       // 代码优化
    15.       function Teacher(name, age, weight, course){
    16.           this.name = name;
    17.           this.age = age;
    18.           this.weight = weight;
    19.           this.course = course;
    20.       }
    22.       var t1 = new Teacher('liangyu', 18, 130, 'JavaScript');
    23.       var t2 = new Teacher('kola', 22, 120, 'HTML');
    24.       console.log(t1, t2);
    26.       // 代码再次优化: 终极写法
    27.       function Teacher(opt){
    28.           this.name = opt.name;
    29.           this.age = opt.name;
    30.           this.weight = opt.weight;
    31.           this.course = opt.course;
    32.       }
    34.       var t1 = new Teacher({
    35.           name: '张三',
    36.           age: 19,
    37.           weight: 120,
    38.           course: 'Java'
    39.       });
    41.       var t2 = new Teacher({
    42.           name: '李四',
    43.           age: 23,
    44.           weight: 130,
    45.           course: 'CSS'
    46.       });
    48.       console.log(t1, t2);

    四、作业

  • 写一个构造函数，接收数字类型的参数，参数数量不定，完成参数相加和相乘的功能

    1.       function compute(){
    2.           var res = 0;
    4.           var operation = {
    5.               add: function(){
    6.                   for(var i = 0; i < arguments.length; i++){
    7.                       var item = Number(arguments[i]);
    8.                        res += item;    
    9.                   }
    10.                   return res;
    11.               },
    12.               mul: function(){
    13.                   if(res == 0){
    14.                       res += 1;
    15.                   }
    16.                   for(var i = 0; i < arguments.length; i++){
    17.                       var item = Number(arguments[i]);
    18.                       res *= item;
    19.               }
    20.               return res;
    21.           }
    22.       }
    23.       return operation;
    24.   }
    26.   var compute = compute();
    27.   // console.log(compute.add('1', null, 3, 4));
    28.   console.log(compute.mul(1, 2, 3, 4));

    更新版 ```javascript // 作业

    1.   // 写一个构造函数，接收数字类型的参数，参数数量不定，完成参数相加和相乘的功能
    2.   // 普通写法
    3.   function Compute(){
    4.       var res = 0;
    5.       this.plus = function(){
    6.           loop(arguments, 'add', res);
    7.       }
    8.       this.mul = function(){
    9.           res = 1;
    10.           loop(arguments, 'mul', res);
    11.       }
    13.       function loop(args, methods, reds){
    14.           for(var i = 0; i < args.length; i++){
    15.               var item = args[i];
    16.               if(methods === 'add'){
    17.                   res += item;
    18.               }else if(methods === 'mul'){
    19.                   res *= item;
    20.               }
    21.           }
    22.           console.log(res);
    23.       }
    24.   }
    26.   var compute = new Compute();
    27.   compute.plus(2, 4, 6);
    28.   compute.mul(3, 5, 7);
  1.     // 构造函数版本
  2.     function Compute(){
  3.         var res = 0;
  5.         this.plus = function(){
  6.             Compute.prototype.loop(arguments, 'add', res);
  7.         }
  8.         this.mul = function(){
  9.             res = 1;
  10.             Compute.prototype.loop(arguments, 'mul', res);
  11.         }
  13.     }
  15.     Compute.prototype = {
  16.         loop: function(args, methods, res){
  17.             for(var i = 0; i < args.length; i++){
  18.                 var item = args[i];
  19.                 if(methods === 'add'){
  20.                     res += item;
  21.                 }else if(methods === 'mul'){
  22.                     res *= item;
  23.                 }
  24.             }
  25.             console.log(res);
  26.         }
  27.     }
  29.     var compute = new Compute();
  30.     compute.plus(2, 4, 6);
  31.     compute.mul(3, 5, 7);
  2. - 写一个构造函数，可以设置车的品牌、颜色、及排量；再写一个消费者构造函数，设置用户的名字，年龄、收入，通过选择的方法实例化用户喜欢的车、再设置车的属性
  3. ```javascript
  4.     function Car(opt){
  5.         this.brand = opt.brand;
  6.         this.color = opt.color;
  7.         this.pt = opt.pt;
  8.     };
  10.     function Consumer(opt){
  11.         this.name = opt.name;
  12.         this.age = opt.age;
  13.         this.income = opt.income;
  14.     };
  16.     function chooseCar(){
  17.         var consumer = new Consumer({
  18.             name: '小明',
  19.             age: 18,
  20.             income: '12k'
  21.         });
  23.         if(consumer.income < '10k'){
  24.             var car = new Car({
  25.                 brand: '比亚迪',
  26.                 color: '白色的',
  27.                 pt: 1.5
  28.             });
  29.             console.log('您应该购买：' + (car.color + car.brand + '排量为：' + car.pt));
  30.         }
  32.         if(consumer.income > '10k'){
  33.             var car = new Car({
  34.                 brand: '大众',
  35.                 color: '黑色的',
  36.                 pt: 2.0
  37.             });
  38.             console.log('您应该购买：' + (car.color + car.brand + '排量为：' + car.pt));
  39.         }
  40.     }
  42.     chooseCar();

作业修正

  1.         // 作业
  2.         // 写一个构造函数，可以设置车的品牌、颜色、及排量；再写一个消费者构造函数，设置用户的名字，年龄、收入，通过选择的方法实例化用户喜欢的车、再设置车的属性
  3.         function Car(opt){
  4.             this.brand = opt.brand;
  5.             this.color = opt.color;
  6.             this.displacement = opt.displacement;
  7.         }
  9.         function Person(opt){
  10.             this.name = opt.name;
  11.             this.age = opt.age;
  12.             this.income = opt.income;
  13.             this.selectCar = function(){
  14.                 var myCar = new Car(opt.carOpt);
  15.                 console.log(this.name + '挑选了一辆排量为' + myCar.displacement + '的' + myCar.color + myCar.brand);
  16.             }
  17.         }
  19.         var jone = new Person({
  20.             name: '约翰',
  21.             age: 20,
  22.             income: '10k',
  23.             carOpt: {
  24.                 brand: '马自达',
  25.                 color: '黑色',
  26.                 displacement: '2.0'
  27.             }
  28.         });
  30.         jone.selectCar();