原型模式

定义

• 原型模式是一个创建型模式
• 创建基类的时候，简单差异化的属性放在构造函数中，相同的方法功能放在基类原型中

  代码示例

  ```javascript // 属性多为每一个实例单独的特有的，属性多为基本类型，占用内存空间小 function Person(name) { this.name = name; } // 方法一般为函数为引用类型，占用比较大的内存空间，最好可以复用 Person.prototype.getName = function () { console.log(this.name); return this.name; }; let p1 = new Person(“li”); let p2 = new Person(“po”);

console.log(p1.getName === p2.getName); console.log(p1.getName()); console.log(p2.getName());

<a name="lnjjT"></a>
## 原型链
- 访问一个对象的属性时，先在基本属性中查找，如果没有，沿着__proto__这条链向上找，这就是原型链
- hasOwnProperty可以区分一个属性到底是自己的还是原型中找到的
```javascript
function Foo(){
    this.a = 100
}
Foo.prototype.b = 200
let f = new Foo()
console.log(f.a) // 100
console.log(f.b) // 200

let fun=()=>{}
let obj = {}
Function.prototype.a = 100
Object.prototype.b = 200
console.log(fun.a, fun.b)  // 100  200
console.log(obj.a, obj.b)  // undefined 200

原型的优势

• 可以随意扩展
• 可以重写继承的方法

  let arr = [1,2,3]
  console.log(Object.prototype.toString.call(arr))  //[object Array]
  console.log(arr.toString())  // 1,2,3

  说明Array.prototype.toString重写了Object.prototype.toString的方法

原型演示

<canvas id="canvas" width="600" height="400"></canvas>
    <script>
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      let circles = [];
      function getRandomColor() {
        let rand = Math.floor(Math.random() * 0xffffff).toString(16);
        if (rand.length == 6) {
          return "#" + rand;
        } else {
          return getRandomColor();
        }
      }
      function Circle(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        circles.push(this);
      }
      Circle.prototype.render = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.fillStyle = getRandomColor();
        ctx.fill();
      };
      Circle.prototype.update = function () {
        this.radius--;
        if (this.radius > 0) {
          return true;
        }
      };
      canvas.onmousemove = function (event) {
        new Circle(event.clientX, event.clientY, 50 * Math.random());
      };
      setInterval(function () {
        ctx.clearRect(0, 0, 600, 400);
        circles.forEach((circle) => {
          circle.update() && circle.render();
        });
      }, 100);
    </script>