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();

    原文作者:逐悦
    原文地址: https://www.jianshu.com/p/78b89937581c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞