JavaScript 面向对象的学习记录(下)

【一】通过对象的原型添加属性两种方式    

        function Product(name,color){
            this.name = name;
            this.color = color;
            this.whatAreYou = function(){
                return 'this is a '+this.color+' '+this.name;
            };
         }
        //第一种
         Product.prototype.price = 200;
         Product.prototype.rating = 3;
         Product.prototype.getInfo = function(){
            return "等级："+this.rating+"--价钱"+this.price;
         }
         //第二种
         Product.prototype={
            price:6888,
            rating:3,
            getInfo:function(){
                return "等级："+this.rating+"--价钱"+this.price;
            }
         }

【二】原型链继承

      function Shape(){
            this.name = 'Shape';
            this.toString=function(){
                return this.name;
            }
        }

        function TwoDShape(){
            this.name = '2D shape';
        }

        function Triangle(side,height){
            this.name='Triangle';
            this.side=side;
            this.height = height;
            this.getArea=function(){
                return this.side*this.height/2;
            }
        }
        //继承
        TwoDShape.prototype = new Shape();
        Triangle.prototype = new TwoDShape();
        //重置constructor 属性 （这里必须重置构造器，否则，TwoDShape原型的构造器会变成全局的Object 对象）
        TwoDShape.prototype.constructor=TwoDShape;
        Triangle.prototype.constructor=Triangle;
        //创建对象
        var myTriangle = new Triangle(5,10);
        console.log(myTriangle.getArea());
        //获取对象的构造器
        console.log(myTriangle.constructor);
        //对象实例化自
        console.log(myTriangle instanceof Triangle);//true
        console.log(myTriangle instanceof TwoDShape);//true
        console.log(myTriangle instanceof Shape);//true
        //检测对象是否在原型链上
        console.log(Shape.prototype.isPrototypeOf(myTriangle));//true
        console.log(TwoDShape.prototype.isPrototypeOf(myTriangle));//true
        console.log(Triangle.prototype.isPrototypeOf(myTriangle));//true
        console.log(Object.prototype.isPrototypeOf(myTriangle));//true
        console.log(String.prototype.isPrototypeOf(myTriangle));//false

【三 】 继承优化：只继承原型的方案     

        function Shape(){};
        Shape.prototype.name = 'shape';
        Shape.prototype.toString = function(){
           return this.name;
        }

        function TwoDShape(){};
        TwoDShape.prototype = Shape.prototype;
        TwoDShape.prototype.constructor=TwoDShape;
        TwoDShape.prototype.name = '2D Shape';


        function  Triangle(side,height){
             this.side = side;
             this.height = height;
        }
        Triangle.prototype = TwoDShape.prototype;
        Triangle.prototype.constructor=Triangle;
        Triangle.prototype.name = 'Triangle';
        Triangle.prototype.getArea=function(){
               return this.side*this.height/2;
        }

        var my = new Triangle(5,10);
        console.log(my.getArea(5,10));
        console.log(my.toString());

        //需要注意：只继承原型会带来一个问题
        var s = new Shape();
        console.log(s.name);
        //这里输出的结果为 Triangle  而不是 shape,这是因为只继承原型时name属性指向是同一个，
        //所以子类Triangle修改name属性时整个原型链上的name属性值都会被修改成同一个值
        //上述的问题可以通过临时构造器来解决，如下所示
        function Shape(){};
        Shape.prototype.name = 'Shape';
        Shape.prototype.this.toString=function(){
           return this.name;
        }
        function TwoDShape(){};
        //声明临时构造器
        var F= function(){};
        F.prototype = Shape.prototype;
        TwoDShape.prototype = new F();
        TwoDShape.prototype.construtor = TwoDShape;
        TwoDShape.prototype.name = '2D Shape';
        function  Triangle(side,height){
           this.side = side;
           this.height = height;
        }
        var F = function(){};
        F.prototype = TwoDShape.prototype;
        Triangle.prototype = new F();
        Triangle.prototype.name = 'Triangle';
        Triangle.prototype.getArea=function(){
           return this.side*this.height/2;
        }

        var my = new Triangle(5,10);
        console.log(my.getArea(5,10));
        console.log(my.toString());

        console.log(my._proto__._proto__._proto__.construtor);
        var s = new Shape();
        console.log(s.name);

【四】继承封装

        //---------第一种-----------
        function extend(Child, Parant) {
            //声明临时构造器
            var F = function() {};
            F.prototype = Parant.prototype;
            Child.prototype = new F();
            Child.prototype.constructor = Child;
            Child.uber = Parant.prototype; //uber 代表的是指向当前对象父级原型的引用，实现继承
        }

        function Shape() {}
        Shape.prototype.name = 'Shape';


        function TwoDShape() {};
        TwoDShape.prototype.name = 'TwoDShape';
        extend(TwoDShape, Shape);


        function Triangle(side, height) {
            this.side = side;
            this.height = height;
        }
        Triangle.prototype.name = 'Triangle';
        extend(Triangle, TwoDShape);
        Triangle.prototype.getArea = function() {
            return this.side * this.height / 2;
        }

        //------------第二种-----------------       
        < pre name = "code"
        class = "javascript" >
            var o = {};

        function extendCopy(p) {
            var c = {};
            for (var i in p) {
                c[i] = p[i];
            }
            c.uber = p;
            return c;
        }

        var Shape = { name: 'Shape', toString: function() {
                return this.name; } };
        var TwoDShape = extendCopy(Shape);
        TwoDShape.name = '2d Shape';
        TwoDShape.toString = function() {
            return this.uber.toString + '--' + this.name; }
        var Triangle = extendCopy(TwoDShape);
        Triangle.name = 'triangle';
        Triangle.getArea = function() {
            return this.side * this.height / 2; }
        Triangle.side = 5;
        Triangle.height = 8;
        console.log(Triangle.getArea());

       //----------第三种----------
        function objectPlus(o,stuff){
            //声明临时构造器
            function F(){};
            F.prototype=o;
            var n = new F();
            n.uber = o;//uber 代表的是指向当前对象父级原型的引用，实现继承
            //拷贝父类属性
            for (var i in stuff) {
                n[i]=stuff[i];
            }
            return n;
        }
      
         var Shape={
            name:'Shape',
            toString:function(){
                return this.name;
            }
         };

         var TwoDShape = objectPlus(Shape,{
            name:'2D Shape',
            toString:function(){
                return this.uber.toString()+'---'+this.name;
            }
         });

         var Triangle = objectPlus(TwoDShape,{
            name:'triangle',
            getArea:function(){
                return this.side*this.height/2;
            }
            side:0
            height:0
         });

【五】多重继承

      function multiExtend(){
            var n = {},stuff,j=0,len = arguments.length;
            for (j=0;j<len;j++) {
                stuff = arguments[j];
                for (var i in stuff) {
                    n[i]=stuff[i];
                }
            }
            return n;
       }

        
       var Shape={
            name:'Shape',
            toString:function(){
                return this.name;
            }
       };

       var TwoDShape = {
            name:'2D Shape',
            test:'this is test'
       };

       var Triangle = multiExtend(Shape,TwoDShape,{
            name:'triangle',
            getArea:function(){
                return this.side*this.height/2;
            }
            side:5,
            height:10
       });