JavaScript 中对象的由浅入深

每日收获之JavaScript 中对象的由浅入深

JavaScript 中对象的展现一般分为字面量写法和构造函数写法。

什么是字面量写法？

//对象的创建方式，有字面量和构造函数
        //字面量
        var teacher = {
            name : '张三',
            age : 18 , 
            smoke : function (){
                console.log('smoking');
            }
        }
        teacher.name = '李四'
        console.log(teacher);

字面量写法也叫直接量写法，用{}表示，里面以键值对的形式直接存储固定元素。

那什么叫做构造函数写法？

    想一想，如果我需要十个类似的对象，他们都有公共的属性，比如姓名，年龄，性别等。难道用字面量写十遍吗？太麻烦了，也不好看。构造函数可以看做一个工厂，生产通用的各种模具，只要通过new关键字来创建或者叫实例化就能使用了。

//自定义构造函数  大驼峰
        function Teacher (){
              this.name = 'john';
              this.age = 18 ;
              this.eat = function (){
                 console.log('eating');
              }
        }
        //每次new出来的都是新的
        var teacher1 = new Teacher();
        var teacher2 = new Teacher();
        teacher1.age = 40;
        console.log(teacher1,teacher2);

构造函数的关键就是this和new,每次new的对象都是新的，而且互不影响的。要注意，字面量里面是用：表示，而构造函数是用=

继续简化，我们不能让每个老师都叫John，年龄是18,创建完成后又来重新修改。那我们能不能new的时候就把需要的数据传入呢？

答案是可以的，只要在括号里传参就是，跟函数的传参一样。

//自定义构造函数  大驼峰
        function Teacher(name, age, sex,weight) {
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.weight = weight;
            this.eat = function () {
                this.weight++;
                console.log(this.weight);
            }
        }
        //每次new出来的都是新的
        var teacher1 = new Teacher('张三',18,'男',140);
        var teacher2 = new Teacher('lisi',20,'女',90);
        console.log(teacher1, teacher2);
        teacher1.eat()
        teacher2.eat()

这样是不是感觉更顺眼和清晰明了了。不过我们在想一个问题，这里是四个参数，加入有10个，50个，100个呢，全部写在一起，而且比如传入的18和140，都是数字，第一眼根本不知道这表示什么，顺序也不能错。所以我们应该想办法把参数写成一个对象字面量的形式。

//自定义构造函数  大驼峰
        function Teacher(opt) {
            this.name = opt.name;
            this.age = opt.age;
            this.sex = opt.sex;
            this.weight = opt.weight;
            this.eat = function () {
                this.weight++;
                console.log(this.weight);
            }
        }
        //每次new出来的都是新的
        var teacher1 = new Teacher({
            name: '张三',
            age: 18,
            sex: '男',
            weight: 140
        });
        var teacher2 = new Teacher({
            name: 'lisi',
            age: 20,
            sex: '女',
            weight: 90
        });
        console.log(teacher1, teacher2);
        teacher1.eat()
        teacher2.eat()

这样写成对象的形式看上去代码更多了，但更加清晰易懂。并且加入这个构造函数要抽离成js插件的话，肯定这种好太多了，这也是模块化的基础，现在通用的也是这样。比如vue.js,video.js中new后面的参数都是先传一个对象，里面在写数据。

<script src="./teacher.js"></script>
<script>
    //对象的创建方式，有字面量和构造函数
    //字面量
    // var teacher = {
    //     name: '张三',
    //     age: 18,
    //     smoke: function () {
    //         console.log('smoking');
    //     }
    // }
    // teacher.name = '李四'
    // console.log(teacher);
    //自定义构造函数  大驼峰
  
    //每次new出来的都是新的
    var teacher1 = new Teacher({
        name: '张三',
        age: 18,
        sex: '男',
        weight: 140
    });
    var teacher2 = new Teacher({
        name: 'lisi',
        age: 20,
        sex: '女',
        weight: 90
    });
    console.log(teacher1, teacher2);
    teacher1.eat()
    teacher2.eat()
</script>

这就是对象的由浅入深的变化过程。