百度360必应搜狗淘宝本站头条
linux文件压缩linux用户组查看linux磁盘mysql安装linuxlinux多线程
当前位置：网站首页 > 优雅编程 > 正文

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

sinye56 2024-10-22 16:26 4 浏览 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>

相关推荐

Linux两种光驱自动挂载的方法

环境：CentOS6.4西昆云服务器方式一修改fstab文件/etc/fstab是系统保存文件系统信息?静态文件，每一行描述一个文件系统；系统每次启动会读取此文件信息以确定需要挂载哪些文件系统。参...

linux系统运维，挂载和分区概念太难?在虚机下操作一次全掌握

虚拟机的好处就是可以模拟和学习生产环境的一切操作，假如我们还不熟悉磁盘操作，那先在虚机环境下多操作几次。这次来练习下硬盘扩容操作。虚拟机环境：centos8vm11linux设备命名规则在linux中...

Linux 挂载 NFS 外部存储 (mount 和 /etc/fstab)

mount:手工挂载，下次重启需再重新挂载，操作命令：mount-tnfs-ooptionsserver:/remote/export/local/directory上面命令中，本地目录...

在Linux中如何设置自动挂载特定文件系统(示例)

Linux...

Linux环境中的绑定挂载(bind mount)

简介：Linux中的mount命令是一个特殊的指令，主要用于挂载文件目录。而绑定挂载（bindmount）命令更为特别。mount的bind选项将第一个目录克隆到第二个。一个目录中的改变将会在...

Linux挂载CIFS共享 临时挂载 1. 首先

如何解决服务器存储空间不足的问题？大家好，欢迎回来。在上一期视频中，我为大家介绍了如何利用Linux挂载来扩容服务器存储空间。这一期视频，我将以Linux为例，教大家如何进行扩容。群辉使用的是Linu...

Linux 硬盘挂载(服务器重启自动挂载)

1、先查看目前机器上有几块硬盘，及已挂载磁盘：fdisk-l能够查看到当前主机上已连接上的磁盘，以及已经分割的磁盘分区。（下面以/dev/vdb磁盘进行分区、挂载为例，挂载点设置为/data）df...

linux 挂载磁盘

在Linux中挂载硬盘的步骤如下：...

笨小猪教您Linux磁盘挂载

本教程针对Linux系统比较熟悉或者想学习Linux基础的用户朋友，本教程操作起来比较傻瓜式，跟着步骤就会操作，本文使用的工具是XShell同时多多注意空格（文中会有提示）。【问答】什么是磁盘挂载？答...

Linux 磁盘挂载和docker安装命令

本篇给大家介绍Linux磁盘挂载和docker安装的相关内容，Linux服务器的操作是一个手熟的过程，一些不常用的命令隔断时间就忘记了，熟话说好记性不如烂笔头，还需在平时的工作中多练习记录。...

Linux设置开机自动挂载分区

有时候，我们在安装完Linux系统之后，可能在使用过程中添加硬盘或者分区进行使用，这时候就需要手动把磁盘分区挂载到某个路径，但是开机之后就会消失，需要重新挂载，非常麻烦，那么我们应该如何设置开机自动挂...

在linux挂载一个新硬盘的完整步骤

以下是在Linux中挂载新原始磁盘的完整步骤，包括分区、创建文件系统以及使用UUID在/etc/fstab中启动时挂载磁盘：将新的原始磁盘连接到Linux系统并打开电源。运行以下命令，...

Linux系统如何挂载exFAT分区

简介：Linux系统中不能像Windows系统那样自动识别加载新设备，需要手动识别，手动加载。Linux中一切皆文件。文件通过一个很大的文件树来组织，文件树的根目录是：/，从根目开始录逐级展开。这些文...

Linux系统挂载硬盘

fdisk-l查看可挂载的磁盘都有哪些df-h查看已经挂载的磁盘...

WSL2发布，如何在Win10中挂载Linux文件系统

WSL2是最新版本的架构，它为Windows子系统提供支持，使其能够在Windows上运行ELF64Linux二进制文件。通过最近的更新，它允许使用Linux文件系统访问存储在硬盘中的文件。如果你...

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

一周热门
最近发表
标签列表