每一周的学习报告第二周面向对象编程和DOM

本文链接：https://blog.csdn.net/m0_63548458/article/details/122024946

JavaScript

面向对象编程

一些奇奇怪怪的东西

使用继承避免重复

当出现重复代码

Bird.prototype = {
  constructor: Bird,
  describe: function() {
    console.log("My name is " + this.name);
  }
};

Dog.prototype = {
  constructor: Dog,
  describe: function() {
    console.log("My name is " + this.name);
  }
};

上面的describe方法重复了
我们可以通过通过创建一个父类supertype解决

function Animal() { };

Animal.prototype = {
  constructor: Animal, 
  describe: function() {
    console.log("My name is " + this.name);
  }
};

再通过create方法将子辈Bird,Dog的原型设置为父辈的实例

let Bird.prototype = Object.create(Animal.prototype);
let Dog.prototype = Object.create(Animal.prototype);

这里有个小问题，create方法会将Bird，Dog的construction属性改写成父辈的construction属性
这里需要手动将Bird，Dog的construction属性改写回原来的construction属性

Bird.prototype.constructor = Bird;
Dog.prototype.constructor = Dog;

立即调用函数表达（IIFE）

let motionModule = (function () {
  return {
    glideMixin: function(obj) {
      obj.glide = function() {
        console.log("Gliding on the water");
      };
    },
    flyMixin: function(obj) {
      obj.fly = function() {
        console.log("Flying, wooosh!");
      };
    }
  }
})();

这种类型函数是匿名的将会立刻执行

DOM对象

什么是DOM，全程Document Object Model 文档对象模型

作用是JS可以通过DOM对HTML文档进行操作

文档
整个HTML文档
对象
将网页的每一个节点转换成对象，我们就可以通过面向对象的方式进行操作
模型
模型可以表示对象的关系，方便我们管理对象
节点
网页中的每一个部分都是一个节点
但每一个节点属性类型不同
节点分为4类

文档节点：整个HTML文档
元素节点： HTML标签
属性节点元素的属性
文本节点：文本内容

节点的属性：

利用DOM操作HTML文档

<body>
    <button id="bttn">按钮</button>
    <script>
        //获取button对象
        var buttton = document.getElementById("bttn");
        //修改 按钮文字
        buttton.innerHTML="这是一个按钮";
    </script>

浏览器为我们创建了一个文档节点document ，文档节点代表整个网页所有元素包含在其中，通过getElementById方法取得ID为buttton的button，innerHTML对象表示button内部的HTML元素，修改innerHTML对象改变按钮的名字

事件
事件就是文档与浏览器发生的交互
点击按钮移动鼠标…都是一个事件

对事件进行交互
当事件触发时，执行一段JavaScript代码

<body>
    <button id="btn">按钮</button>
    <script>
        //获取按钮对象
        let button = document.getElementById("btn");
        //绑定一个单击事件
        button.onclick = function(){
            alert("按钮被点击");
        };
    </script>
</body>