面向前端工程师的设计模式-原型模式

sinye56 2024-10-22 16:26 8 浏览 0 评论

1. 介绍

原型模式（Prototype Pattern）不是指的 JS 的原型，它是 clone 自己，生成一个新对象的操作。因为 new 一个新对象的时候开销会比较大，或者由于其他原因不合适，所以采用这种方式创建一个一模一样的对象。

Java 默认有 clone 接口，不用自己实现。JS 中有一个比较像的实现就是 Object.create 方法。

2. 原型模式的通用实现?

// 一个对象（作为原型）
const prototype = {
  getName: function() {
    return this.first + '' + this.last;
  },
  say: function() {
    console.log('hello world');
  }
}

// 基于原型创建 x
let x = Object.create(prototype);
x.first = 'A';
x.last = 'B';
console.log(x.getName());
x.say();

// 基于原型创建 y
let y = Object.create(prototype);
y.first = 'C';
y.last = 'D';
console.log(y.getName());
y.say();

3. JavaScript中的原型?

3.1 函数和对象?

函数是一种对象
对象都是通过函数创建的

//函数是一种对象
function Person() {}
console.log(Person instanceof Object);

//对象都是通过函数创建的
let p1=new Person();
let obj1={name: 'zfpx'}
let obj=new Object();
obj2.name='zfpx';

3.2 原型对象prototype?

每个函数都有一个属性叫做prototype，prototype的属性值是一个对象即原型对象
原型对象默认的只有一个叫做constructor的属性，指向这个函数本身
每个实例对象都有一个隐藏的属性__proto__,这个属性引用了创建这个对象的函数的prototype

自定义函数的prototype是由Object创建，所以它的proto指向的就是Object.prototype
Object.prototype的proto指向的是null

自定义函数Foo.__proto__指向Function.prototype
Object.__proto__指向Function.prototype
Function.__proto__指向Function.prototype

let sum = new Function('a','b','return a+b');

Function.prototype的proto也指向Object.prototype

JS 中的 prototype 可以理解为 ES6 class 的一种底层原理
上面用到的 Object.create 方法也是基于原型 prototype 的
而 class 是实现面向对象的基础，并不是服务于某个模式
若干年后 ES6 全面普及，大家可能会忽略掉 prototype，但是 Object.create 却会长久存在

3.3 instanceof?

Instanceof运算符的第一个变量是一个对象，暂时称为A；第二个变量一般是一个函数，暂时称为B
Instanceof的判断规则是：沿着A的proto这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。

console.log(Object instanceof Function);
console.log(Function instanceof Object);
console.log(Function instanceof Function);

3.4 原型链?

访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着proto这条链向上找，这就是原型链
hasOwnProperty可以区分一个属性到底是自己的还是从原型中找到

function Foo(){
    this.a = 10;
}
Foo.prototype.b = 20;

let f1  = new Foo();
console.log(f1.a);
console.log(f1.b);

3.5 原型优势?

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

let obj = {};
console.log(obj.toString());


let arr = [1,2,3];
// Array继承Object
// Array原型上的的方法对Object原型上的方法进行了重写
console.log(arr.toString());
// Object原型上的方法
console.log(Object.prototype.toString.call(arr));

4. 场景?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        canvas{
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="1000" height="600"></canvas>
    <script>
        //随机颜色，十六进制方法；
        function getRandomColor( ) {
          var rand = Math.floor(Math.random( ) * 0xFFFFFF).toString(16);
          if(rand.length == 6){        
            return '#'+rand;
          }else{
            return getRandomColor();
          }
        }
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let circles = [];
        // 构造函数
        function Circle(x,y,radius){
            // 实例属性，每个对象都不一样的值
            this.x=x;
            this.y=y;
            this.radius= radius;
            circles.push(this);
        }

        // 方法放到prototype上，所有实例对象都能共享逻辑
        Circle.prototype.update = function() {
                this.radius--;
                if(this.radius>0){
                    return true;
                }
        }
        Circle.prototype.render = function(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);
            ctx.fillStyle = getRandomColor();
            ctx.fill();
        }

        let circle = new Circle(0,0,30);
        canvas.onmousemove = function(event){
            circles.push(new Circle(event.clientX,event.clientY,30));
        }
        setInterval(function(){
            ctx.clearRect(0,0,1000,600);
            circles.forEach(item=>{
                item.update()&&item.render(); 
            });
            circles = circles.filter(item=>item.radius>0);
        },20);
    </script>
</body>
</html>

前端设计模式

上一篇：Spring框架和设计模式（spring 框架中都用到了哪些设计模式?）
下一篇：「前端面试题」16道设计模式面试题(附答案)

面向前端工程师的设计模式-原型模式

1. 介绍

2. 原型模式的通用实现?

3. JavaScript中的原型?

3.1 函数和对象?

3.2 原型对象prototype?

3.3 instanceof?

3.4 原型链?

3.5 原型优势?

4. 场景?

相关推荐

取消回复欢迎你发表评论:

Linux parted分区，步骤很详细

linux获取本机IP

前端学习路线大致怎么样?（前端如何学）

打造你的家庭数据中心系列(三)PVE虚拟机安装爱快/iKuai软路由

10个项目带你成为初级前端工程师【项目1|精讲篇】

python Nuitka打包指南（python nltk）

MyBatisPlus集成（Mybatisplus集成crud）

详解如何用prometheus来监控Oracle数据库，值得收藏

Windows11下linux子系统安装图形界面教程

CentOS 7 安装 NVIDIA 显卡驱动（centos7.6安装nvidia显卡驱动）

面向前端工程师的设计模式-原型模式

1. 介绍

2. 原型模式的通用实现?

3. JavaScript中的原型?

3.1 函数和对象?

3.2 原型对象prototype?

3.3 instanceof?

3.4 原型链?

3.5 原型优势?

4. 场景?

相关推荐

取消回复欢迎 你 发表评论:

Linux parted分区，步骤很详细

linux获取本机IP

前端学习路线大致怎么样?（前端如何学）

打造你的家庭数据中心系列(三)PVE虚拟机安装爱快/iKuai软路由

10个项目带你成为初级前端工程师【项目1|精讲篇】

python Nuitka打包指南（python nltk）

MyBatisPlus集成（Mybatisplus集成crud）

详解如何用prometheus来监控Oracle数据库，值得收藏

Windows11下linux子系统安装图形界面教程

CentOS 7 安装 NVIDIA 显卡驱动（centos7.6安装nvidia显卡驱动）

取消回复欢迎你发表评论: