JavaScript语法基础 —2018年9月11日23时45分

编程: 创建对象的方式(字面量或构造函数)

以下引自朱老师讲义。
一、对象字面量
        1. 使用字面量生成对象的三种场景:
            (1): 单例模式(singleton);
            (2): 多值数据(函数的参数与返回值)
            (3): 替代构造函数来生成对象
        2. 场景一:单例模式
            (1).所谓单例:将类的实例对象数量限定为一个;
            (2).类是对象的模板,可以多次实例化,创建多个实例对象;
            (3).如果只需要一个实例对象,但么就没必要去创建类了;
            (4).所以使用字面量直接创建一个单例对象是最方便的啦.
            var obj = {name:'peter', name:30}

        3. 场景二: 多值数据的使用场景[类似于关联数组]
            (1). 给函数传递多个参数
    

实例

        [传统方式:]
            function getData(x, y, z) {
                return (x+y+z)
            }
            getData(1,2,3)  // result: 6

            [对象字面量做为函数调用的实参]
            function getData(data) {
                return (data.x+data.y+data.z)
            }
            getData({x:1, y:2, z:3})  // result: 6

            [对象字面量做为默认参数]
            //如果调用时没有传入实参
            function getData(data) {
                //函数内修改参数值并不是一个好习惯
                data = data || {x:1, y:2, z:3}
                return (data.x+data.y+data.z)
            }
            getData()  // result: 6

            [对象字面量做为函数返回值]
            function func() {
                return {x:4, y:5, z:6}
            }
            func()  // {x:4, y:5, z:6}

            [扩展知识,返回数组,并实现将数组中元素转为独立变量的技巧]
            function func() {
                return [4, 5, 6]
            }
            [x,y,z]=func()  // 将数组中的元素转为独立的变量
            x   // x = 4
            y   // y = 5
            z   // z =6

        4. 场景三: 代替构造函数
            (1). 构造函数是用来创建对象的,所以只需要将对象字面量做为函数返回值即可;
            (2). 从语法上看,与返回多值数据基本相同,区别在于执行方式;
            (3). 实例:
  

实例

          function createObj() {
                //直接将对象字面量做为返回值
                return {
                    x: 10,
                    y: 20,
                    z: 30,
                    sum: function () {
                        return this.x + this.y + this.z
                    }
                }
            }

            var obj = createObj()
            obj.sum()   // 结果: 60
            createObj().sum()   //使用链式调用进行简化

二、 构造函数与new表达式
            1. 构造函数是一种必须要通过new表达式调用的特殊函数;
            2. 构造函数的用途是用来创建对象(类的实例化);
            3. 因为类可以被实例化为对象,所以类中必须要有该实例对象的代言人;
            4. 这个特殊的类中对象的代言人,就是伪变量: this
            5. 构造函数基本用法:

实例

                (1).声明: function MyClass(x, y) {
                            this.x = x
                            this.y = y
                         }
                (2).调用: var obj = new MyClass(10,20)
                         obj.x  // 10
                         obj.y  // 20

            6. 总结:
                (1).构造函数本身与普通函数声明形式是相同的;
                (2).构造函数是通过"new"表达式来调用;
                (3).new 表达式的值: 新对象的引用
                (4).new 表过式是通过构造函数内的this引用了新生成的对象

            (一).new 表达式的操作
                new 操作的完整流程
                1. new 表达式 首先是新生成一个"操作对象"(可视为一个通用对象,是对象就具备访问属性和调用方法的能力);
                2. 用这个"操作对象"调用指定的函数(即构造函数);
                3. 构造函数内部有一个内部指针:this,指向了这个由"new"表达式新生成的操作对象;
                4. 在构造函数中,可以使用this为当前操作对象添加属性或方法;
                5. 构造函数执行完成,将会返回该操作对象的引用:this, 做为new 表达式的 "值"
                6. 即: new 操作 的最终返回值,其实就是构造函数中的: this

            (二).构造函数的调用
                1. 其实任何函数都可以通过 new 来调用,所以任何函数都可以充当构造函数的角色;
                2. 但只有一个函数内部使用了this,他才是一个构造函数,可以生成一个新对象;
                3. 构造函数结尾会隐式一条: return this 语句,返回当前对象的引用;
                4. js中的构造函数类似于其它语言中的类,但却又比他们难以理解,毕竟new一个函数来生成一个对象比较特殊;
                5. 而其它语言,都是 new 一个类,而js中没有类的概念,所以构造函数,实际上就起到了"类"的作用;
                6. 因为构造函数起到了"类"的作用,所以按照惯例,充当构造函数的函数名,首字母应该大写,以示不同;