又花了不少时间优化了blog。下面是优化的几个点。

• 优化了分类

你可能会疑惑，我为什么把blog优化当成个人提升，因为我认为blog分类等过程就是把自己的人生进行解构的过程

• 把已有文章简单的分类

一些遗憾：

blog模板本身有些交互有些差强人意，以后动一下底层吧

• 把以前的文章整合了一下

JavaScript面向对象知识点串联

本文我会尽可能的把面试有关的问题都加入进来，并把学习踩坑的地方告诉大家。（知识点可以点击我给的连接）

面试问题

1. 解释一下原型链
2. instanceof的原理
3. typeof的相关问题
4. new的原理
5. this指向问题
6. 任何有关bind、call、apply的问题
7. ES5继承的方法

前置知识

要理解原型链，那我们就得先理解什么是面向对象，它的三个基本特征：封装、继承、多态_

❗❗❗巨坑注意：一定要区分好继承和实例化的区别，特别是像js这样的基于原型继承的语言，我就踩过😫，导致开始学时特别痛苦。

原型和原型链的理解

原型和面向编程

相信很多同学都或多或少的接触过一定面向对象编程，也清楚的知道面向对象对于编程开发的重要性，那为什么到了JavaScript，我们说到面向对象就得说到原型呢？

这要从JavaScript的源头说起。JavaScript是一种动态类型语言，区别于c++和Java，它实现继承的方法并不是靠类，而是靠原型。

又一个坑：你可能会说ES6中不是有类吗？

其实不然，ES6中的类并不是原生支持的类，而是一个语法糖(底层并不是像c++那样，而是对JS（ES6之前的语法，以下都是这个意思）模拟继承的一种封装，这也是为什么再使用ES6时，我们需要一些工具（babel）来将ES6转换为ES5。

原型和原型链

话归原题，那到底什么是原型和原型链呢？这就应该从实例化开始谈起。

这里我就不细说了，可以看阮一峰的教程：面向对象编程 - 实例对象与 new 命令 - 《阮一峰 JavaScript 教程》 - 书栈网 · BookStack

到这里我可以认为你已经知道了构造函数和new的使用，也知道了prototype

理解时，我们可以把原型认为是类。

之前我迷惑的地方

函数为什么是把原型传给对象，而不是本身传给对象？

或者问为什么老是遇见构造函数里有原型，而原型里面又有构造函数

1 2 3 4 5

function Person(name, age) { this.name = name; this.age = age; } console.log(Person.prototype.constructor === Person); // true

答：函数本身就是一种数据类型，它有自己的任务。它来当构造函数相当于就是为了建立一个原型和对象的桥梁，相当于它生产了一个类（不严谨）,然后把这个类交给了新的实例。这也就解释了为什么构造函数的原型里面还要加一个构造函数，因为这个构造函数是给新生成的对象用的。

pass

（日后完善）

让我们打开浏览器，按一下f12，再控制台中输入Object(),回车。我们就能看见一个空的对象。

这就是JavaScript对象的结构了。

我们先看一下重点，第一个prototype就是我们一直提到的原型，那为什么又要提到原型链呢？我们又来点开__proto__，我们可以看见

!(C:\Users\27421\AppData\Roaming\Typora\typora-user-images\image-20231124135440074.png)

原型链中就是实例对象和原型对象之间的链接

原型（prototype，《高达00》曲

array原型，

基于原型和基于类

继承

原本不难的继承，放到js里面居然变成了一个大关。

js里面有很多办法实现继承，去翻翻js的教材，可以看到很多方法可以模拟继承。

其实反过来想，如果没有静态语言给的继承这个概念，js是不是会灵活的多？

所以我们要做自己（😊，反讽ing）

ES6提供了很好用的class语法糖。

这里就不谈js实现继承了，感觉这玩意就是为了考而考。

那么继续开始踩坑。

首先是对super的理解，第一次遇见super是在react的类组件里，class里面的constructor里面突兀出现一个super()，我是一点都无法理解这个取名的意义的。这里还是推荐看阮一峰的ES6教程

PS:每次遇见新的语句，特别是在开发时遇见，不要去猜这个怎么用，而是马上去修补这块知识点，你这次猜对了，后面八成还有其他问题，跟谎言一样，应该杜绝第一次欺骗

对组合继承和寄生组合的理解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// 组合继承
// function NOO() { }
// console.log(NOO.prototype);
// // zono = new NOO();
// // console.log(zono);
// // zono.consctructor = NOO;
// function NOO2() {}
// NOO2.prototype = new NOO();
// NOO2.prototype.constructor = NOO2;
// console.log(NOO2.prototype);
// console.log(NOO2.prototype === NOO.prototype);

//寄生组合继承
function NOO() {}
console.log(NOO.prototype);
function NOO2() {}

function inheritPrototype(subType, superType) {
  //使用寄生继承
  //就是把原型对象赋值给子类的原型对象，减少了一次调用父类构造函数
  //原版代码
  // NOO2.prototype = new NOO();//这里会调用一次父类构造函数,修改后就无需调用了
  // NOO2.prototype.constructor = NOO2;
  const prototype = Object.create(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

inheritPrototype(NOO2, NOO);

console.log(NOO2.prototype);
console.log(NOO2.prototype === NOO.prototype);
debugger;

自从我对名叫”意义“的问题有了答案后，便更多的思考起了关于美的定义的问题。

最近有一点小感悟，我觉得美的存在就在于混乱和秩序的守恒。

拿照片举例子，拍摄时我们要寻找构图，从眼前混乱的景物中寻找一些规律，那些常说的三分法构图、人物要处于照片的什么位置比较好等待，这便是秩序；不过过分注重构图反而会丢失一些东西——暂且叫做信息，比如你看见单纯没有什么特别组合的色块，就会感觉乏味。

不过这个世界上大部分情况都是熵增的，我们更多是面临混乱的问题，所以人们更多的做的是寻找秩序。其实这点不难理解，人类的生存机制便决定了这一点，创造终究是单线程，所以可以靠秩序把尽可能多的机械化的行为内化交给非创造用的管理系统，就可以帮我们节约很多时间。就像，到点就饿、到时就醒一样。

同时秩序也会给人安定感。比如：这个社会上不确定因素太多，而又有部分确定的东西，简单举一些例子，机遇与努力、自由和法律·····我们再黑暗的可能有野兽的树林会因为陌生而恐惧，但再钢筋混凝土的灯光下，有着秩序守护就无需过多担心这些。

越来越发现很多东西都是可以抽象出来的。就比如这个“美就是秩序和混乱的角逐”。回头抽时间好好写一篇关于抽象的想法，把如今对于美的体悟总结一番。

（不知道这篇算不算通顺）

用了好几天，把用户管理系统的大架子搭建出来了，接下来就是部署上线与后序优化了。如此呢，大模型的项目也是时间问题了。

看样子自己真的挺适合做这样的事，设计+实现，这个不断创造的过程，很容易就让自己进入心流状态。

我以前一直疑惑wlop为什么可以做到画画+工程都做，一个工科一个感性驱动，似乎这两件事风马牛不相及，如今倒是懂了几分，画画和技术开发都是一个化零为整的过程，把以往的通过不断训练得到的经历、积累，结合自己的情感、逻辑、创造力，就像搭积木一样，组合成为一个从前没有的东西。

感觉自己其实没什么代码洁癖，想把代码写好更多的是想让自己以后能看懂，也为以后可能接手的人看懂。这样也算是面试官可能喜欢的一点吧。

八股第一部分

instanceof的原理

答：instanceof用于检测构造函数prototype属性是否出现在某个实例对象的原型链。

​ 它会检查右边构建函数的原型对象（prototype），是否在左边对象的原型链上。

手写

1
2
3
4
5
6
7
8
9
10
11

function myInstanceof(Obj, constructor) {
  let proto = Object.getPrototypeOf(Obj); //获取原型
  while (proto) {
    if (proto === constructor.pro) {
      return true;
    } else {
      proto = proto.getPrototypeOf(proto); //获取下一个原型
    }
  }
  return false;
}

new的原理

使用new命令时，它后面的函数依次执行下面的步骤。

1. 创建一个空对象，作为将要返回的对象实例。
2. 将这个空对象的原型，指向构造函数的prototype属性。
3. 将这个空对象赋值给函数内部的this关键字。
4. 开始执行构造函数内部的代码。

手写

1
2
3
4
5
6
7
8
9

function myNew(constructor, ...args) {
  //1.创建一个空对象
  let obj = {};
  obj.__proto__ = constructor.prototype;
  let result = constructor.apply(obj, args);
  return result instanceof Object ? result : obj;
}
//这个实现并不完整，因为没有考虑到原型链的问题，如果构造函数的原型链上有属性，那么这个属性也会被继承到实例上

js作用域的理解

原型链

[Js中prototype、[prototype]]和__proto__的区别和用法-CSDN博客

this指向问题

八股第二部分react

hooks的使用限制

通用限制

为什么React Hooks会有两条使用规则 - 掘金 (juejin.cn)

1. 只能在只能在函数组件的顶层使用或自定义Hooks中使用
2. 不能再条件语句中使用

一些反例

1. 在条件/循环语句中使用 Hooks：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function MyComponent() {
  if (someCondition) {
    useState(); // 错误！Hooks 不应在条件语句中使用
  }

  return <div>Hello, World!</div>;
}
function MyComponent() {
  for (let i = 0; i < 5; i++) {
    useState(); // 错误！Hooks 不应在循环中使用
  }

  return <div>Hello, World!</div>;
}

2. 在嵌套函数中使用 Hooks：

1
2
3
4
5
6
7

function MyComponent() {
  function nestedFunction() {
    useState(); // 错误！Hooks 不应在嵌套函数中使用
  }

  return <div>Hello, World!</div>;
}

3. 在类组件中使用 Hooks：

1
2
3
4
5
6
7
8
9

class MyComponent extends React.Component {
  componentDidMount() {
    useState(); // 错误！Hooks 不应在类组件中使用，Hooks 只能在函数组件的顶层使用
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

4. 在普通 JavaScript 函数中使用 Hooks：

1
2
3

function myFunction() {
  useState(); // 错误！Hooks 只能在函数组件的顶层使用
}

具体限制

1. useState的值不能直接修改
2. useEffect的回调函数中不能使用异步函数
3. useContext必须再useContext所对应的Context.Provider中使用

react hooks的原理

函数组件和闭包

react setState是同步还是异步/react的批量更新机制

答：可能是同步也可能是异步，取决于执行环境

blog优化记录01

花了很多时间又把blog重新拾起了，比起以前，这次以后blog的内容更多的就是技术有关了。

再就是在这里我会继续优化blog，可能下次就是动底层了。

前

UML

概念

• UML——Unified modeling language UML(统一建模语言)，是一种用于软件系统分析和设计的语言工具，它用于帮助软件开发人员进行思考和记录思路的结果。
• UML本身是一套符号的规定，就像数学符号和化学符号一样，这些符号用于描述软件模型中的各个元素和他们之间的关系，比如类、接口、实现、泛化、依赖、组合、聚合等，如下图：

1. 审美误区：
   1. 过分自大、过分谦虚
   2. 艺术无用论（不能欣赏就没有意义）
   3. 要与众不同，审美是搭建自己的圈子，不是为了别人
2. 注重形式美（只有形式、没有内容）
3. 学历史
   了解趋势：
   1. 大众趋向
   2. 权威
   3. 生理本质
   4. 学习+习得
      选择审美高的方向
      剔除庸俗

何为美？

是人类的原始认知、纯粹的主观活动
关键时刻：物哀
极致、抽象、秩序

1. 历史
2. 绘画主义摄影
3. 印象派摄影
4. 直接摄影：清晰、精确
5. 达达主义（杜尚）
6. 超现实主义
7. 风格
8. 欧美色调
9. 新锐摄影

如何提高审美

1. 多看
2. 看有名的
3. 多练

SQLAlchemy2.0

1
2

import sqlalchemy
sqlalchemy.__version__  

建立连接

1
2

from sqlalchemy import create_engine
engine = create_engine('sqlite:///:memory:',echo=True)

echo参数为True时，会显示每条执行的SQL语句，可以关闭。

增删改查

insert

多表关系

关于飞书还没有支持导出md文档只能截取一部分内容和贴上连接
https://fvkadm6q6g6.feishu.cn/docx/UsBSdUZWPoWrZ4xujQScT2B5nGh?from=from_copylink

《奥本海默》

灵感摘抄

• 有一天，当他们对你的惩罚足够多时，他们会给你鲑鱼和土豆沙拉，发表演讲，给你一枚奖章。请记住，这不是为了你，而是为了他们。

随笔

原本以为观影前抱有极高的期待会影响实际观影的体验，但诺兰永远不会让你失望，每一处都细细打磨，告诉你一切都无可挑剔。
从叙事脚本、视觉艺术、音效配合上来看，很多观感都在我的认知世界之上，我是没有能力去做批评了，就单纯聊聊自己对于这部电影的感悟吧。
我一直认为要欣赏一件事物，一定得从创作者的角度去理解。看画，从画家的角度，思考每一笔应该如何落下；听歌，从演唱者（作词、作曲家也是）的角度出发，理解每个发声包含的情绪。这就像设计师得从用户角度出发一样，在创作者不断尝试与我们靠近的同时，我们也应该努力向创作者靠近。
如此说，认知电影的最好方法，便是假想自己是导演，去编排故事的叙事走向、思考每个叙事情节的镜头画面、雕琢每一处音效，这又会细分到人物说话的文本、镜头的语言、光的艺术、事件的节奏。深入的说，有些东西可以像高考做阅读理解一样找到一些格式化的东西，而有些意识流的表达，可以称之为导演的个人特色。一般能完整的使用格式化的东西创作出一件作品，这件作品便可以称为佳作，而当导演可以融入自己的特色时，这种作品便是真正的艺术品。
《奥本海默》无疑是做到了这一点，让我们以导演的角度看：
这里拉片后，继续详写从多个角度学习。
镜头语言上，用合适的角度表现着人物的内心（拉片以后贴图完善），比如很多次对奥本海默的面部特写，相信他的眼睛也一定让你印象深刻；还有很多次的蒙太奇手法，无一不是恰到好处的表现着人物的心理。
叙事上，导演巧妙的使用黑白胶片，让时间线，人物线交织，比起一般的时间叙事法，这种办法让观众更多的把精力放在了理解角色的本身。而本部影片本身也是为了体现奥本海默的多面性，时间叙事便会让人们心中多一条时间限制。
音效给我的印象尤为深刻，在原子弹爆炸前的一刻，我能猜到诺兰会采用静音效果来处理，而惯性思维让我觉得在说完人物内心独白后，为了接下一幕，不会再复用之前的爆炸声效。于是，IMAX下的突如其来的爆炸音吓了我一跳，相信在场的科学家也是这样的心情，会被恐怖吓一跳。
如果说，观影效果表现着这部电影在当下是否热卖，那主旨应该就是这部电影在未来是否有着深远的影响，电影作为艺术品，天然的有着文化输出的能力，而一部大卖的电影，影响的可能是一代人，而奥本海默的主旨无疑是深远的。听说，当初诺兰就是因为听说，当时的科学家们认为，当点燃原子弹后会有概率让世界毁灭，有这样的戏剧冲突点，才决定拍这部电影的。而具体的主旨不是能简单就定义的，每个人都能从中理会出一些，无论关于世界，还是关于自己的感悟。
后面我会继续抽时间拉拉片，相信还能获得不少的感悟。
在来谈谈对影片内容，故事里爱因斯坦如同先知，引导着后来的科学家，这点还蛮有意思的。(二刷后整理)