面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系

体会面向过程和面向对象的编程思想

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <style>
     div {
        width: 400px;
        height: 200px;
        background-color: red;
     } 
  </style>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
<script>
    // 点击按钮,改变div的背景颜色
    // document.getElementById("btn").onclick = function(){
    //     document.getElementById("dv").style.backgroundColor = "yellow";
    // };

    // 面向对象思想----初级的
    // 按钮是一个对象,div是一个对象,颜色是一个属性
    // function ChangeStyle(btnId,dvId,color){
    //     // 按钮对象
    //     this.btnObj = document.getElementById(btnId);
    //     // div对象
    //     this.dvObj = document.getElementById(dvId);
    //     // 颜色
    //     this.color = color;
    // }
    // // 数据共享来改变背景颜色
    // ChangeStyle.prototype.init = function(){
    //     // 就是实例对象----就是当前对象
    //     // console.log(this);
    //     var that = this;
    //     // 点击按钮,改变div的背景颜色
    //     this.btnObj.onclick = function(){
    //         that.dvObj.style.backgroundColor = that.color;
    //     };
    // };

    // 实例化对象
    // var cs = new ChangeStyle("btn","dv","yellow");
    // cs.init();

    // function Person(){
    //   this.sayHi = function(){
    //       console.log(this);
    //   };
    // }
    // var p = new Person();
    // p.sayHi();

</script>
<script>    
    function ChangeStyle(btnObj,dvObj,json){
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
    }
    ChangeStyle.prototype.init = function(){
        // 点击按钮,改变div多个样式属性值
        var that = this;
        this.btnObj.onclick = function(){
            for(var key in that.json){
                that.dvObj.style[key] = that.json[key];
            }
        };
    };

    // 实例化对象
    var json = {
                  "widht":"500px",
                  "height":"800px",
                  "backgroundColor":"blue",
                  "opacity":"0.2"
                };
    var cs = new ChangeStyle($("#btn")[0],$("#dv")[0],json);
    // 调用方法
    cs.init();

    // 点击p标签,设置div的样式
    
</script>
  
</body>
</html>

复习原型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      // 构造函数
      function Person(sex,age){
          this.sex = sex;
          this.age = age;
      }
      // 通过原型添加方法
      Person.prototype.sayHi = function(){
          console.log("打招呼,您好");
      };
      var per = new Person("男",20);
      // 实例对象
      console.log(per.__proto__.constructor==Person.prototype.constructor);

      var per2 = new Person("女",29);
      console.log(per.sayHi==per2.sayHi);

      // 构造函数的名字
      // console.dir(Person);

      // 实例对象中有两个属性(这两个属性是通过构造函数来获取的)
      // __proto__这个属性
      // 构造函数中并没有sex和age的两个属性

      /**
       * 实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性
       * 浏览器使用的
       * 构造函数中有一个属性,prototype,也是对象,叫原型
       * 是标准属性,程序员使用
       *
       * 原型---->__proto__或者是prototype,都是原型对象,
       * 原型的作用:共享数据,节省内存空间
       */

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

构造函数和实例对象和原型对象之间的关系

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
      // 通过构造函数实例对象,并初始化
      // var arr = new Array(10,20,30,40);
      // // var per = new Person("小明",20,"男");
      // // join是方法,实例对象调用的方法
      // arr.join("|");
      // console.dir(arr);
      // // join方法在实例对象__proto__原型
      // console.log(arr.__proto__==Array.prototype);


  </script>
  <script>
      // 原型的作用之一:共享数据,节省内存空间
      // 构造函数
      function Person(age,sex){
          this.age = age;
          this.sex = sex;
      }
      // 通过构造函数的原型添加一个方法
      Person.prototype.eat = function(){
          console.log("明天中午吃完饭就要演讲");
      };

      var per = new Person(20,"男");
      // per.eat();
      per.__proto__.eat();

      // 构造函数,原型对象,实例对象之间的关系
      console.dir(Person);
      // console.dir(per);
  </script>
</head>
<body>
  
</body>
</html>

面向过程和面向对象的编程思想 复习原型 构造函数和实例对象和原型对象之间的关系

猜你喜欢

面向过程和面向对象的编程思想复习原型构造函数和实例对象和原型对象之间的关系