08-js创建对象和继承

创建对象和继承

一、创建对象

JS中创建对象有方式
   1）通过字面量创建对象 {}
   2）工厂内部可以创建对象并返回 批量创建对象的目的
   3）构造器创建对象
   4）构造器（私有属性）+原型（公有方法）创建对象
   5）ES6中通过class创建类 new 对象

1.通过字面量创建对象

<script>
    //var age = 48;
    let obj = {
        name:"wangcai",
        age:16,
        weight:this.age + 10    
    }
    console.log(obj.weight);

    //这里的this指的是window，输出结果为58
    //此时的weight是一个属性，而不是一个方法
    //this指的是对象
</script>

<script>
    var rect = {
        width:10,
        height:20,
        getS(){
            return this.width * this.height;
        }
    }
    rect.getC = function(){
        return 2*this.width + 2*this.height;
    }
    console.log(rect.getS());   //200
    console.log(rect.getC());   //60

    //这里的this均指的是对象rect

    rect.width = 50;
    console.log(rect.getC());   //140
    console.log(rect.getS());   //1000
</script>

如果还需要一个矩形对象，那么还需要手动地创建出这个对象

2.工厂内部可以创建对象并返回

优点：可以批量创建对象

<script>
    function createrect(w,h){
        var obj = {};
        obj.width = w;
        obj.height = h;
        obj.getS = function (){
            return this.width * this.height;
        }
        return obj;
    }
    var rect1 = createrect(1,2);
    console.log(rect1.getS());

    var rect2 = createrect(2,2);
    console.log(rect2.getS());
    //每个空间都有公共部分，造成内存消耗
</script>

3.构造器创建对象

<script>
    // 通过构造器创建对象
    // 通过构造器+原型来创建JS中的对象
    function Rect(w,h){
        this.w = w;   
        this.h = h;
    }
    Rect.prototype.getS = function(){
        return this.w*this.w;
    }

    var rect1 = new Rect(1,2);
    console.log(rect1.getS());

    var rect2 = new Rect(2,2);
    console.log(rect2.getS());
    //每个对象都可以访问原型得到相关的数据，但是只要有一个修改就会造成运行对象中的数据被修改


</script>

4.构造器（私有属性）+原型（公有方法）创建对象

<script>
    class Rect{
        constructor(w,h){
            this.w = w;     //私有属性
            this.h = h;
        }

        yy = 12;    //共有属性
        getS(){
            return this.w * this.h; 
        }
        static it = 100;    //共有属性
    }

    var rect = new Rect(4,2);
    console.log(rect.w);    //4
    console.log(rect.h);    //2
    console.log(Rect.yy);   //undefined
    console.log(rect.yy);   //12
    console.log(Rect.it);   //100
    console.log(rect.getS());   //8
</script>

5.ES6中通过class创建类

<script>
    class NBAPlayer{
        constructor(name,age)
        {
            this.name = name;
            this.age = age;
        }

        score = 50;
        run(){
            console.log("run...");
        }
        static it = "123";
    }
    var nba = new NBAPlayer("乔丹",35);
    console.log(nba.name);     //乔丹
    console.log(nba.age);       //35
    console.log(nba.score);     //50
    console.log(nba.run());     //run...  undefined
    console.log(NBAPlayer.it);  //123

    //静态对象只能通过类名调用，不能使用对象调用
</script>

二、JS中的继承

继承：子类去继承父类的公有属性和私有属性
特点： 可以继承父类的公有属性和私有属性

1.原型继承

<script>

    //原型继承  Child.prototype = new Parent;
    function Parent(){      //父类
        this.x = 100;
    }
    Parent.prototype.getX = function(){
        return this.x;
    }
    function Child(){       //子类
        this.y = 200;
    }
    Child.prototype = new Parent;   // 让子类的原型指向父类对象
    Child.prototype.getY = function(){
        return this.y;
    }

    var c = new Child();
    console.log(c.x);   //100 x是继承父的x
    console.log(c.getX());  //100 getX是继承父的x
    console.log(c.y);   //200
    console.log(c.getY());  //200
</script>

2.call继承

<script>
    // call继承
    // 特点:只能继承父的私有属性
    function Parent(){
        this.x = 100;
    }
    Parent.prototype.getX = function (){
        return this.x;
    }

    function Child(){
        // 1) 让this指向一个空对象
        // 2）this.xx = xx;
        // 3）返回这个空对象

        Parent.call(this);
        this.y = 200;
    }

    var c = new Child();
    console.log(c.x);       //100
</script>

3.组合继承

<script>
    //组合式继承
    //  1）Parent.call(this); // 继承父的私有属性
    //  2）Child.prototype = Object.create(Parent.prototype);  子类继承父类的公有属性
    //  Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

    function Parent(){
        this.x = 100;
    }
    Parent.prototype.getX = function (){
        return this.x;
    }

    function Child(){
        Parent.call(this);  // 继承父的私有属性
        this.y = 200;
    }

    // 为了不影响父类的原型对象  copy一份赋值给了Child.prototype
    Child.prototype = Object.create(Parent.prototype);

     // 最好手动的修改一个Child原型对象上constructor指向
    Child.prototype.constructor = Child;
    var c = new Child();
    console.log(c.x);       //100
    console.log(c.getX());  //100
</script>

4.ES6中的继承

<script>
    //super();  //类似前面讲的call继承
    // extends 类似于原型对象 继承公有属性

    class Parent{
        constructor (){
            this.x = 100;
        }
        getX(){
            return this.x;
        }
    }

    class Child extends Parent{
        constructor(){
            super();
            this.y = 200;
        }
        getY(){
            return this.y;
        }
    }
    var child = new Child();
    console.log(child.x);   //100
    console.log(child.getX());      //100
</script>