javascript面向对象解析(一)

创建对象的方式

• json对象方式创建对象

        var point = {x:10,y:10,show:function(){
        console.log(this.x+','+this.y);
    }};
        // 优点：方便，用于接受和存储临时数据
        // 缺点: 不方便扩展

• Object方式

    var point = new Object();
        point.x = 10;
        point['y'] = 10;
        point['show'] = function () {
            console.log(this.x+','+this.y);
        };
    point.show();
    // 同样不方便扩展

• 声明构造函数方式，创建对象

       function Point(x,y){
            this.x = x;
            this.y = y;
            this.show = function () {
                console.log(this.x+','+this.y);
            };
        }

    var point = new Point(20,20);
    point.show();
    var point1 = new Point(30,30);
    point1.show();
    
    // 方便扩展，并且可以多次使用Point创建多个对象

 //对象中的方法尽量都放到原型对象中
      function Point(x,y){
            this.x = x;
            this.y = y;
            this.show = function () {
                console.log(this.x+','+this.y);
            };
        }

    var point = new Point(20,20);
    point.show();
    var point1 = new Point(30,30);
    point1.show();
    // 这样可以把按同一构造函数创建的对象的show方法都只想同一内存地区，如果对象过多，减少了必要的内存

--

• 这种创建对象的方式用着不是很爽，需要按特定的顺序传参，不是很灵活

   function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;

        }

        Person.prototype.show = function(){
          console.log(this.name,this.age,this.sex);
        };

        var p = new Person('xiaoming',18,'boy');

        p.show();
// 这种创建对象的方式用着不是很爽，需要按特定的顺序传参，不是很灵活

• 把传参方式换成传入对象的方式

function Person(obj){
            this.name = obj.name || '';
            this.age = obj.age || 0;
            this.sex = obj.sex || 'girl';

        }

        Person.prototype.show = function(){
            console.log(this.name,this.age,this.sex);
        };

        var p = new Person({name:'xiaoming',
                            sex:'girl',
                            age:18
                            });

        p.show();

new一个对象经过的过程如下:

• 第一步: 在内存中开辟一个新空间，创建一个空对象
• 第二步: 把this指向这个空对象
• 第三步: 把空对象的内部原型指向构造函数的原型对象
• 第四步: 当构造函数执行完成后，如果没有return，就把当前空对象返回

代码模拟此过程

    function Point(x,y){
//            第一步：在内存中开辟一个新空间，创建一个空对象
            var kong = {};
//            第二步：this指向空对象,(使用_this模拟this)
            _this = kong;
//            第三步：空对象的内部原型指向构造函数的原型对象
            _this.__proto__ = Point.prototype;

            _this.x = x;
            _this.y = y;
//            _this.show = function(){
//                console.log(this.x +','+this.y);// 此时this指向_this对象，即kong
//            };
//            第四步:如果没有return，就返回空对象，此处为了模拟返回该对象，就添加了return
            return _this;
        }

        Point.prototype.show = function(){
            console.log(this.x +','+this.y);
        };

        var point = new Point(20,20);
        point.show();
        var point1 = new Point(30,30);
        point1.show();