对象的创建方法总结

2020-12-28  本文已影响0人  云凡的云凡

 // 1.对象字面量或者对象直接量
      var obj = {
          name:'张三',
          sex:'male'
      }
      obj.name='李四'

   // 2.构造函数,构造函数写出来之后可以通过new关键字去实例化一个对象
    // 2.1用系统内自带的构造函数

    var obj = new Object()  //跟对象字面量相等
    obj.name='张三'
    obj.sex='男的'
    console.log(obj);

对象和构造函数是两码事,对象是通过实例化构造函数new出的对象实例。对象是通过实例化构造函数而创建的一个对象实例。

        // 3.1自定义构造函数(模块化、插件、组件化)
        function Person() {
            this.name = "张三";
            this.sex = '男';
            this.walk = function () {
                console.log('am walking');
            }
        }
        // new 之后才会用this
        var girl1 = new Person()
        var girl2 = new Person()
        console.log(girl1);//Person {name: "张三", sex: "男", walk: ƒ}
        console.log(girl2);//Person {name: "张三", sex: "男", walk: ƒ}
        girl1.name = 'marry'
        // 通过构造函数构造出来的对象相互之间不影响,完全是两个对象
        // 通过这种方法去写程序复用性就高了,每一次都是new出不同的对象
        console.log(girl1); //Person {name: "marry", sex: "男", walk: ƒ}
        console.log(girl2);  //Person {name: "张三", sex: "男", walk: ƒ}
    0// 3.自定义构造函数(模块化、插件、组件化)
        function Person() {
            this.name = "张三";
            this.sex = '男';
            this.weight = 120
            this.walk = function () {
                this.weight--
                console.log(this.weight);
            }
            this.eat = function () {
                this.weight--
                console.log(this.weight);
            }
        }
        var girl1 = new Person()
        var girl2 = new Person()
        girl1.walk()//119
        girl1.walk()//118
        console.log(girl2.weight);//120

       //3.2构造函数的参数
        function Person(name, sex, weight) {
            this.name = name;
            this.sex = sex;
            this.weight = weight
            this.walk = function () {
                this.weight--
                console.log(this.weight);
            }
            this.eat = function () {
                this.weight--
                console.log(this.weight);
            }
        }
        // 创造了两个完全不同的女孩,她们之间是完全不影响的
        var girl1 = new Person('ww', '女', 145)
        var girl2 = new Person('aa', '女', 146)
        console.log(girl1);//Person {name: "ww", sex: "女", weight: 145, walk: ƒ, eat: ƒ}
        console.log(girl2);//Person {name: "aa", sex: "女", weight: 146, walk: ƒ, eat: ƒ}

以对象形式传参,更好维护

      //3.2 以对象形式传参,更好维护
      function Person(opt) {
            this.name = opt.name;
            this.sex = opt.sex;
            this.weight = opt.weight
            this.walk = function () {
                this.weight--
                console.log(this.weight);
            }
            this.eat = function () {
                this.weight--
                console.log(this.weight);
            }
        }
        // 创造了两个完全不同的女孩,她们之间是完全不影响的
       //参数以属性名排,开发的时候这么做
        var girl1 = new Person({
            name: 'qq', sex: '女', weight: '123'
        })
        var girl2 = new Person({
            name: 'uu', sex: '女', weight: '124'
        })
        console.log(girl1);//Person {name: "qq", sex: "女", weight: "123", walk: ƒ, eat: ƒ}
        console.log(girl2);//Person {name: "uu", sex: "女", weight: "124", walk: ƒ, eat: ƒ}

        //4.1  this 没有实例化的时候指向window,实例化之后指向 实例化的那个对象
       function Car() {
            this.color = 'red'
        }
        Car()//this 指向window·
       //new 是为了改变this指向
        var car = new Car()  //this 指向car
        // 4.2 构造函数原理,构造函数实例化仅仅是系统内部给了我一个 new,
       //new 的作用就是把 this 造出来以后指向实例化,this 是隐式的
       //new 就是把原本指向 window 的this 转向 实例化对象
        // 4.2.1
        function Car(color, brand) {
            // this.color = 'red'
            var me = {}
            me.color = color
            me.brand = brand
            return me
        }

        var car = Car('red', 'byd')
        console.log(car);//{color: "red", brand: "byd"}

        // 4.2.2
        function Cars(laojia, nling) {
            // this.color = 'red'
            this.laojia = laojia
            this.nling = nling
            return this
        }

        var car = Car('jx', '22')
        console.log(car);//{color: "jx", brand: "22"}

        // 4.2.3
        function Carss(xuexiao, address) {
            this.xuexiao = xuexiao
            this.xuexiao = xuexiao
        }

        var car = new Car('shizhuan', 'ganzho')
        console.log(car);//{color: "shizhuan", brand: "ganzho"}
上一篇下一篇

猜你喜欢

热点阅读