構(gòu)造函數(shù) 本質(zhì) 其實(shí)也是一個(gè)函數(shù)
1. 作用用來創(chuàng)建對(duì)象
2. 以前見過構(gòu)造函數(shù)
Set 構(gòu)造函數(shù)
Array 構(gòu)造函數(shù)
Object
String
Number
Boolean
Date
1. 只要它被new 它就是構(gòu)造函數(shù)
2. Person 構(gòu)造函數(shù) 首字母是大寫（規(guī)范）
3. per 被new出來的對(duì)象 ?。?！

<script>
  
    function Person() {}

     // person 就是一個(gè)構(gòu)造函數(shù) 被new
     const per = new Person();

 
   </script>

每一個(gè)構(gòu)造函數(shù)中都存在有一個(gè) 魔鬼 this
- 構(gòu)造函數(shù) 默認(rèn)情況下就是返回了 this
- this 等于你所new出來的實(shí)例 per
- 只要給構(gòu)造函數(shù)中的this 添加屬性或者方法
- 那么實(shí)例自然擁有對(duì)應(yīng)的屬性和方法

<script>
     
      function Person() {
        this.username = '悟空'; // per也增加了一個(gè)屬性
        this.add=()=>{};
        this.clear=()=>{};
      }

      const per = new Person();
      per.username = '悟空';

      const per2 = new Person();

      console.log(per);
      console.log(per2);

    </script>

構(gòu)造函數(shù)-弊端

 <script>
      function Person() {
        this.say = function () {};
      }
      const p1 = new Person();
      const p2 = new Person();
      console.log(p1 === p2); // 兩個(gè)對(duì)象的比較 內(nèi)存地址 false
      console.log(p1.say === p2.say);// false 兩個(gè)函數(shù) 存放在不同地址中

      // const s1 = new Set();
      // const s2 = new Set();
      // console.log(s1 === s2);// false
      // console.log(s1.add === s2.add); // true 

      // s1 和 s2 共享一個(gè)方法   
      // p1 和 p2 沒有共享一個(gè) 


    </script>

對(duì)象在堆中情況

1.值類型是存在 ?？臻g 適合存放固定大小的數(shù)據(jù)
2. 引用類型（對(duì)象、數(shù)組、函數(shù)）存在堆空間適合存放大小不固定的數(shù)據(jù)
3. new了兩個(gè)對(duì)象的時(shí)候，兩個(gè)對(duì)象的內(nèi)存地址不相等
4. 我們希望兩個(gè)對(duì)象的方法內(nèi)存地址是相等！??！
5. 在構(gòu)造函數(shù)中當(dāng)我們定義方法的時(shí)候一般都不會(huì)只在在構(gòu)造函數(shù)中寫死
讓我們方法都指向外部單獨(dú)聲明的方法多個(gè)實(shí)例去共享方法！??！

 <script>
      const obj1 = { username: '八戒' };
      const obj2 = { username: '八戒' };

      // console.log(obj1===obj2);// false 內(nèi)存中的地址

      const obj3 = obj2;
      // console.log(obj3 === obj2); //  true

      obj3.username="悟空";
      console.log(obj2);
    </script>

 <script>
      function say() {
        console.log('外部單獨(dú)的say方法');
      }
      function Person() {
        this.say = say;
      }

      const p1 = new Person();
      const p2 = new Person();
      console.log(p1 === p2); // false 
      console.log(p1.say === p2.say);// true


      
      const obj1={username:"悟空"};
      const obj2={username:"悟空"};
      const obj3=obj2;
      obj3.username="八戒";
      console.log(obj2);

    </script>

構(gòu)造函數(shù)的基本使用

  1. 構(gòu)造函數(shù)的時(shí)候 屬性 分成了兩種 
    1. 函數(shù)類型的屬性 
      一般都是寫在外部?。?！
    2. 非函數(shù)類型的屬性 
      一般是寫在內(nèi)部?。?！

 <script>
      // 構(gòu)造函數(shù)的方式 創(chuàng)建一個(gè)對(duì)象

      // 姓名 屬性
      // 說出自己的姓名 方法

      function say() {
        console.log('這個(gè)是Person的一個(gè)方法', this.name);
      }
      function fly() {
        console.log(this.name, '要起飛');
      }

      function Person(name, height) {
        this.name = name;
        this.height = height;
        this.say = say;
        this.fly = fly;
      }
      const p1 = new Person('八戒', 150);
      // p1.say();
      p1.fly();
    </script>

構(gòu)造函數(shù)使用演示

  <script>
      /* 
      1 有一個(gè)構(gòu)造函數(shù)  Person
      2 有數(shù)字類型的屬性 發(fā)量 hair =100
      3 有行為  decrease 減少   方法 
        發(fā)量 - 1 

      4 按鈕 每點(diǎn)擊一次 發(fā)量減少一根
       */

      function decrease() {
        this.hair--;
      }

      function Person() {
        this.hair = 100;
        this.decrease = decrease;
      }

      const btn = document.querySelector('button');

      const p1 = new Person();
      btn.addEventListener('click', function () {
        // 每點(diǎn)擊一次按鈕 new一個(gè)對(duì)象
        p1.decrease();
        console.log(p1.hair);
      });
    </script>

構(gòu)造函數(shù)+原型

原型本質(zhì)是一個(gè)對(duì)象在我們創(chuàng)建構(gòu)造函數(shù)的時(shí)候就擁有
2.在原型上添加的一些方法，可以直接被實(shí)例所使用和共享
1. 可以這么理解構(gòu)造函數(shù)=父親實(shí)例=孩子原型=DNA
2. 使用面向?qū)ο蟮姆绞絹韯?chuàng)建對(duì)象
- 構(gòu)造函數(shù)內(nèi)部來定義非函數(shù)類型的屬性如姓名身高膚色性別
- 原型來定義函數(shù)類型的屬性函數(shù)

 <script>
      // 構(gòu)造函數(shù) + 原型 搭配來使用
      // 原型 本質(zhì) 是一個(gè)對(duì)象
      // 當(dāng)我們?cè)趧?chuàng)建一個(gè) 構(gòu)造函數(shù)的時(shí)候 原型 被創(chuàng)建
      // 如果我們?cè)谠蛯?duì)象上 增加一個(gè)屬性或者方法  那么實(shí)例 擁有所增加的方法
      // 原型 就是 DNA 構(gòu)造函數(shù) 父親 實(shí)例 孩子

      // function Person() {
      //   this.b = function () {};
      // }

      // // 訪問原型
      // // console.log(Person.prototype);
      // Person.prototype.a = function () {
      //   console.log('這個(gè)是a方法');
      // };

      // const p1 = new Person();

      // // console.log(p1);
      // p1.a();

      // function Obj() {

      // }
      // Obj.prototype.a=function(){

      // }

      function Person() {
        this.hair = 100;
        // this.decrease = decrease;
      }
      Person.prototype.decrease = function () {
        this.hair--;
      };
    </script>

案例 - 普通寫法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>17-課堂案例.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      img {
        transition: 2s;
      }
      .scale {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <button>放大</button>
    <img src="./images/1.png" alt="" />
    <script>
      /* 
      1 靜態(tài)結(jié)構(gòu) 
      2 給按鈕綁定點(diǎn)擊事件 
      3 事件觸發(fā) 
        1 獲取圖片的dom元素
        2 添加一個(gè)class 


      4 面向過程寫法 
         
       */

      const button = document.querySelector('button');
      const img = document.querySelector('img');

      button.addEventListener('click', function () {
        img.classList.add('scale');
      });
    </script>
  </body>
</html>

面向?qū)ο髮懛?/h3>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>index.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button> 大</button>
    <script>


      function MyImg(src) {
        // body標(biāo)簽上能出現(xiàn)一張圖片
        const img = document.createElement('img');
        img.style.transition = '2s';
        // 設(shè)置 圖片地址
        img.src = src;
        // 在body標(biāo)簽上看見這一張圖片
        document.body.append(img);

        this.abc = img;
      }

      // 原型上寫一寫函數(shù)
      MyImg.prototype.scale = function (num) {
        // 獲取到 構(gòu)造函數(shù)中 創(chuàng)建的  img dom元素 - 提前把img dom  添加到 this的屬性中
        this.abc.style.transform = `scale(${num})`;
      };
      const myImg = new MyImg('./images/1.png'); // body標(biāo)簽上能出現(xiàn)一張圖片
      const myImg2=new MyImg("./images/1.png");
      const button = document.querySelector('button');


      button.addEventListener('click', function () {
        // myImg.scale(2);// 
        myImg.scale(3); //  3 倍

        myImg2.scale(5);
      });



    
    </script>
  </body>
</html>

<body>

    <div class="view"></div>
    <button> 大</button>
    <script>


        function MyImg(src) {
            const img = document.createElement(`img`)
            img.style.transition = '2s'
            img.src = src
            this.abc = img
        }
        MyImg.prototype.appendTo = function (e) {
            document.querySelector(e).append(this.abc)
        }
        MyImg.prototype.scale = function (num) {
            this.abc.style.transform = `scale(${num})`
        }
        const myImg = new MyImg('./images/1.png')
        myImg.appendTo(`.view`)
        const button = document.querySelector('button')
        button.addEventListener('click', function () {
            myImg.scale(3)
        })




    </script>
</body>

再次了解原型

萬物都是對(duì)象
1. 指的是 obj 數(shù)據(jù)類型
2. 指的是物體

    <script>
      // dom     文檔對(duì)象模型 
      const div = document.querySelector('div');
      const button = document.querySelector('button');
      // console.log(div);// 把div的標(biāo)簽形式  顯示出來  不方便我去了解 div 對(duì)象
      console.dir(div);// 把標(biāo)簽 dom元素 以對(duì)象的形式顯示出來 
      console.dir(button);
    </script>

原型繼承-方法

<script>
      /* 
      1 定義一個(gè) 父親  構(gòu)造函數(shù)   有一個(gè)方法 say()  Person
      2 定義兩個(gè)兒子 構(gòu)造函數(shù) 擁有 爸爸的say方法 
        1 YellowPerson
        2 WhitePerson 
       */

      function Person() {}

      Person.prototype.say = function () {
        console.log('這個(gè)是父親定義的say方法');
      };

      function YellowPerson() {}

      //  讓兒子去復(fù)用父親的方法
      YellowPerson.prototype.say = Person.prototype.say;
      // 單獨(dú)和以前一樣添加
      YellowPerson.prototype.jump = function () {
        console.log('這個(gè)黃種人 兒子 自己的方法');
      };

      function WhitePerson() {}
      WhitePerson.prototype.say = Person.prototype.say;

      const yp = new YellowPerson();
      yp.say();
      yp.jump();

      // const wp=new WhitePerson();
      // wp.say();

      // 普通的html標(biāo)簽  div  img標(biāo)簽
      // div沒有src屬性 但是id 和 className 屬性
      // img 有 src屬性，但是id 和className
    </script>

原型繼承-屬性

 <script>
      // 父親 構(gòu)造函數(shù) 名稱 顏色 身高 體重   屬性
      function Person(name, color, height, weight) {
        this.name = name;
        this.color = color;
        this.height = height;
        this.weight = weight;
      }

      // 兒子   名稱 顏色 身高 體重  而且 自己  屬性  昵稱 、 性別
      function YellowPerson(name, color, height, weight, nickname, gender) {
        // 父親中也有
        Person.call(this,name, color, height, weight);// 屬性的繼承 ？？ 
 
        // 兒子
        this.nickname = nickname;
        this.gender = gender;
      }

      const yp = new YellowPerson('悟空', '黃色', 150, 250, '弼馬溫', '公');
      console.log(yp);
    </script>

對(duì)象中的this

  <script>
      // this 范圍很廣  主要在 對(duì)象中來學(xué)習(xí)
      // this 對(duì)象本身  我自己

      // this 指向 對(duì)象本身  可以被修改  通過 call 方法來修改 

      // call 幫助我們調(diào)用方法 還可以幫助修改 this 
      // call 在調(diào)用方法的時(shí)候  還可以傳遞參數(shù)

      const obj = {
        username: '悟空',
        say(a) {
          console.log(this,a);
        },
      };  

      const newObj={
        username:"八戒"
      }
  
      obj.say.call(newObj,123);

    </script>

 ###對(duì)象添加屬性

<script>
      // 在對(duì)象  this = 對(duì)象本身的??！    this =  我自己

      // 普通的對(duì)象
      const obj = {
        add() {
          // 給對(duì)象添加屬性  兩段代碼 封裝到一個(gè)普通的函數(shù)中
          obj.a = 1;
          obj.b = 2;

          // ==== 修改this
          this.c = 3;
          this.d = 4;
        },
      };
      obj.add(); // 讓方法幫我們添加屬性
      console.log(obj);
    </script>

通過call來動(dòng)態(tài)添加對(duì)象

 <script>
      // 普通的函數(shù)
      function Person(name, color, height, weight) {
        this.name = name;
        this.color = color;
        this.height = height;
        this.weight = weight;
        // =====
        // obj.name = name;
        // obj.color = color;
        // obj.height = height;
        // obj.weight = weight;
      }

      // 定義一個(gè)空的對(duì)象
      const obj={};

      Person.call(obj,"悟空","黃色",150,250); // obj 借用了Person方法 來給自己的屬性賦值??！ 
      // 1 調(diào)用了 Person 方法
      // 2 方法內(nèi)部 給 this賦值   this 等于誰？？？  obj
      // 3 this.name=悟空; =>  obj.name = 悟空;  //  賦值動(dòng)作 
      // 3 this.color=黃色; =>  obj.color = 黃色;  //  賦值動(dòng)作 
      // 3 this.height=150; =>  obj.height = 150;  //  賦值動(dòng)作 
      // 3 this.weight=250; =>  obj.weight = 250;  //  賦值動(dòng)作 

      console.log(obj); // 擁有了 Person 函數(shù)種 所寫的一些屬性 


    </script>

構(gòu)造函數(shù)-實(shí)例

<script>
      // 我自己 構(gòu)造函數(shù)中的this 指向 實(shí)例?。。。。?
      // function Person(name, color, height, weight) {
      //   this.name = name;
      //   this.color = color;
      //   this.height = height;
      //   this.weight = weight;
      // }

      // function YellowPerson(name, color, height, weight) {
      //   // 借助了父親里面的代碼  快速幫我們 兒子 的屬性賦值
      //   Person.call(this, name, color, height, weight);

      //   // 1 Person.call   函數(shù) Person（普通的函數(shù)即可）被調(diào)用
      //   // 2 Person 函數(shù)的作用 給this賦值
      //   // 3 Person.call(this)  call的作用 修改this的指向
      //       // Person.call(this) this 我自己 =  兒子的構(gòu)造函數(shù)的實(shí)例 =  yp
      // }

      // const yp = new YellowPerson('悟空', '黃色', 150, 250);
      // console.log(yp);

      // 屬性的繼承   子構(gòu)造函數(shù) 借用了父構(gòu)造函數(shù)的  給 實(shí)例賦值代碼??！
      function Person(name) {
        this.username = name;
      }

      function YellowPerson(name) {
        Person.call(this, name); // 屬性的繼承
      }

      const yp = new YellowPerson('悟空');
      console.log(yp);
    </script>

構(gòu)造函數(shù)中屬性和方法的繼承

 <script>
      /* 
      實(shí)例 實(shí)現(xiàn) 屬性和方法的繼承
      1 屬性的繼承 在 兒子的構(gòu)造函數(shù)中 調(diào)用 父親的構(gòu)造函數(shù) 
        父親的構(gòu)造函數(shù).call(this,參數(shù)。。。)
      2 方法的繼承 在兒子的構(gòu)造函數(shù)的原型上 等于 父親的構(gòu)造函數(shù)的原型 
         兒子的構(gòu)造函數(shù).prototype.方法名稱 =  父親的構(gòu)造函數(shù).prototype.方法名稱
       */

      function Person(name) {
        this.name = name;
      }

      Person.prototype.say = function () {
        console.log('父親的say方法');
      };

      function YellowPerson(name, color) {
        Person.call(this, name); // 屬性的繼承
        this.color = color;
      }

      YellowPerson.prototype.say = Person.prototype.say;
      YellowPerson.prototype.fly = function () {
        console.log('兒子自己的方法 fly');
      };
    </script>

封裝+繼承案例需求

<script>
      /* 
      案例 ： 目的 利用 面向?qū)ο蟮恼Z法和思想 來結(jié)合 dom操作 解決實(shí)際的問題 

      1 定義父構(gòu)造函數(shù)  
        HTMLElement  
         1 屬性  dom 
         2 方法  appendTo 

      2 定義 一個(gè)兒子  HTMLDivElement
        1 會(huì)繼承 父親 屬性和方法 
        2 兒子還有自己獨(dú)立的功能  
            const  myDiv = new  HTMLDivElement("div中的文本")
            myDiv.appenTo("p")  ;  p標(biāo)簽中會(huì)多出有一個(gè) 文本為  “div中的文本”  的div
           兒子還會(huì)有自己的一個(gè)方法
           點(diǎn)擊按鈕  myDiv.scale(2);   緩慢放大兩倍

      3 定義 另外一個(gè)兒子  HTMLImgElement 
        1 會(huì)繼承 父親 屬性和方法  
        2 自己獨(dú)立的功能
          const myImg = new HTMLImgElement(圖片的地址)
          myImg.appendTo("a")  a標(biāo)簽中會(huì)多了一個(gè) 圖片標(biāo)簽
          兒子還會(huì)有自己的一個(gè)方法
          點(diǎn)擊某個(gè)按鈕  myImg.borderRadius("50%")  緩慢變成 邊框圓角 50% 效果 

      4 代碼提示 
        1 先根據(jù)需求 把 代碼的解構(gòu)整理好   

        2 再去思考實(shí)現(xiàn)的邏輯 
       */


       function HTMLElement() {
        //  this.dom=....
       }
       HTMLElement.prototype.appentTo=function(){

       }
    </script>

封裝和繼承的案例實(shí)現(xiàn)

 <button>div放大兩倍</button>
    <div class="box"></div>
  <script>
      /* 
        HTMLElement  
         1 屬性  dom 
         2 方法  appendTo 
       */

      function HTMLElement() {
        this.dom = document.createElement('div');
      }

      HTMLElement.prototype.appendTo = function (selector) {
        document.querySelector(selector).append(this.dom);
      };

      // 兒子
      function HTMLDivElement(text) {
        HTMLElement.call(this); // this上多一個(gè)屬性 dom dom = 動(dòng)態(tài)創(chuàng)建的 div元素

        // this.dom =  真實(shí)的div 的dom元素
        this.dom.innerText = text;
        this.dom.style.textAlign = 'center';
      }

      // 繼承父親的方法
      HTMLDivElement.prototype.appendTo = HTMLElement.prototype.appendTo;
      // 自己的方法
      HTMLDivElement.prototype.scale = function (num) {
        this.dom.style.transition = '2s';
        this.dom.style.transform = `scale(${num})`;
      };

      const divEle = new HTMLDivElement('div中的文字');
      // console.log(divEle);
      divEle.appendTo('.box');

      const button = document.querySelector('button');
      button.addEventListener('click', function () {
        divEle.scale(2);
      });
    </script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>13-實(shí)現(xiàn)-封裝和繼承案例.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <button>div放大兩倍</button>
    <input type="button" value="設(shè)置圖片緩慢邊框圓角效果" />
    <div class="box"></div>
    <script>
      function HTMLElement(tagName) {
        this.dom = document.createElement(tagName);
      }
      HTMLElement.prototype.appendTo = function (select) {
        document.querySelector(select).append(this.dom);
      };

      function HTMLDivElement(text) {
        HTMLElement.call(this, 'div');
        this.dom.innerText = text;
        this.dom.style.textAlign   = 'center';
      }

      HTMLDivElement.prototype.appendTo = HTMLElement.prototype.appendTo;
      HTMLDivElement.prototype.scale = function (num) {
        this.dom.style.transition = '2s';
        
        this.dom.style.transform = `scale(${num})`;
      };

      function HTMLImgElement(src) {
        HTMLElement.call(this, 'img');
        this.dom.src = src;
      }
      HTMLImgElement.prototype.appendTo = HTMLElement.prototype.appendTo;
      HTMLImgElement.prototype.borderRadius = function (num) {
        this.dom.style.transition = '2s';
        this.dom.style.borderRadius = num;
      };

      const divEle = new HTMLDivElement('div中的文字');
      const imgEle = new HTMLImgElement('./images/1.png');

      divEle.appendTo('.box');
      imgEle.appendTo('.box');

      const input = document.querySelector('input');
      const button = document.querySelector('button');
      input.addEventListener('click', function () {
        imgEle.borderRadius('50%');
      });
      button.addEventListener('click', function () {
        divEle.scale(2)
      });
    </script>
  </body>
</html>

類的基本使用

<script>
      /* 
      1 構(gòu)造函數(shù) 來創(chuàng)建對(duì)象 
      2 對(duì)象 兩種信息
        1 屬性
        2 方法 
       */


      //  es6 新 簡潔  class 面向?qū)ο?
      class Person {
        name = '悟空';
        color = '黃色';
        say() {
          console.log(this.name, this.color);
        }
        fly(){
          console.log(this.name,"起飛");
        }
      }

      // es5 原型鏈方式實(shí)現(xiàn)  面向?qū)ο?      // function Person() {
      //   this.name="悟空";
      //   this.color="黃色";
      // }
      // Person.prototype.say=function(){
      //   console.log(this.name,this.color);
      // }

      const p1 = new Person();
      p1.say();
      p1.fly();
    </script>

<script>
      /* 
      1 使用 class來定義屬性的時(shí)候
        1 如果 這個(gè)屬性 你寫死 
          class Person {
            name="悟空";
            color="黃色";
          }
        2 如果 屬性 可以由外部傳入 必須使用構(gòu)造器
          constructor(name,color){
            this.name=name;
            this.color=color;
          }
      
      
      
      
      
       */
      class Person {
        // 構(gòu)造器
        constructor(name, color) {
          // 當(dāng) Person被new的時(shí)候 這個(gè)構(gòu)造器 就會(huì)被調(diào)用

          console.log('person被new啦');
          // console.log(name,color);

          // this 還是指向 實(shí)例
          this.name = name;
          this.color = color;
        }
        say() {
          console.log(this.name, this.color);
        }
      }

      const p1 = new Person('悟空', '黃色');
      console.log(p1);
    </script>

類的方式來實(shí)現(xiàn)繼承

 <script>
      /* 
      父構(gòu)造函數(shù) Person 
      1 屬性 name = "父親"
      2 方法 say 說話

      兒子 去繼承 父親
      1 屬性 
      2 方法
       */

      //  function Person() {
      //    this.name="父親";
      //  }
      //  Person.prototype.say=function(){
      //    console.log(this.name,"父親的say方法");
      //  }

      //  function YellowPerson() {
      //    Person.call(this);
      //  }

      //  YellowPerson.prototype.say=Person.prototype.say;

      // es6 類去實(shí)現(xiàn)繼承
      class Person {
        name = '父親';
        say() {
          console.log(this.name, '父親的say方法');
        }
      }

      // 直接就實(shí)現(xiàn)了 繼承父親的屬性和方法 ?。。?！
      class YellowPerson extends Person {}
      // 兒子實(shí)例 擁有 父親 name屬性和父親的 say方法
      const yp = new YellowPerson();
      console.log(yp);
    </script>

<script>
      /* 
      對(duì)于子類來說 
      1 如果你寫了  extends 而且 還寫 constructor 
        那么在我們的 constructor 必須要調(diào)用super 固定語法?。?

      2 為什么 之前只寫  extends 不用寫super-沒有寫 constructor

      
      
       */
      class Person {
        constructor(name, color) {
          this.name = name;
          this.color = color;
        }
      }

      class YellowPerson extends Person {
        // 默認(rèn)的代碼
        constructor(name, color, height, weight) {
          super(name, color);// 調(diào)用父親的構(gòu)造器 給兒子 添加屬性 
          this.height = height;
          this.weight = weight;
        }
      }

      const yp = new YellowPerson('悟空', '黃色', 100, 200);
      console.log(yp);
    </script>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

構(gòu)造函數(shù)

構(gòu)造函數(shù)

構(gòu)造函數(shù)-弊端

對(duì)象在堆中情況

構(gòu)造函數(shù)的基本使用

構(gòu)造函數(shù)使用演示

構(gòu)造函數(shù)+原型

案例 - 普通寫法

再次了解原型

原型繼承-方法

原型繼承-屬性

對(duì)象中的this

通過call來動(dòng)態(tài)添加對(duì)象

構(gòu)造函數(shù)-實(shí)例

構(gòu)造函數(shù)中屬性和方法的繼承

封裝+繼承案例需求

封裝和繼承的案例實(shí)現(xiàn)

類的基本使用

類的方式來實(shí)現(xiàn)繼承

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

構(gòu)造函數(shù)

構(gòu)造函數(shù)-弊端

對(duì)象在堆中情況

構(gòu)造函數(shù)的基本使用

構(gòu)造函數(shù)使用演示

構(gòu)造函數(shù)+原型

案例 - 普通寫法

再次了解原型

原型繼承-方法

原型繼承-屬性

對(duì)象中的this

通過call來動(dòng)態(tài)添加對(duì)象

構(gòu)造函數(shù)-實(shí)例

構(gòu)造函數(shù)中屬性和方法的繼承

封裝+繼承案例需求

封裝和繼承的案例實(shí)現(xiàn)

類的基本使用

類的方式來實(shí)現(xiàn)繼承

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av