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>