要理解继承，首先需要理解原型链 function Person(name, age, gender){ this.name = name this.age = age this.gender = gender } Person.prototype.hi = function (){ console.log(`Hi, I'm ${this.name}`) } let f = new Person('zoe', 18, 'female') f.__proto__ === Person.prototype // true，ES5写法 Object.getPrototypeOf(f) === Person.prototype // true，ES6写法, __proto__ 是浏览器厂商私建 Person.prototype.__proto__ === Object.prototype // true 首先定义几个基本名词： 实例对象：通过new xxx出来的对象叫做实例对象 构造函数：如上方代码中的Person，一般以大写字母开头命名 - __proto__：ES6 之前，没有明确访问原型的方法，只能通过__proto__来访问，它的作用就是找到实例对象的原型 prototype：原型，是构造函数的一个属性 constructor：构造函数，写过 Java 这类 oop 的同学应该不陌生，这个在 ES5 中不经常接触到，ES6 中的 Class 经常用到， 然后通过上面的代码，我们可以得到这样的公式： 实例对象.__proto__ === 构造函数.prototype 构造函数.prototype.__proto__ === Object.prototype （长继承不适用，这里的继承链是 Person 继承 Object） 其次，Object 是原型链的顶端 Object.prototype.__proto__ === null ok，那么明白了这个，我们就来讨论继承，继承本质上只是用来减少重复代码的一种编程手段，如果我们有多个类，并且都有重复的属性，那么我们可以将重复的属性提取到父类身上，再由父类通过继承给子类。再简化一下：子类构造函数的实例对象也能访问到父类的属性或方法。 function Male(name, age){ this.name = name this.age = age this.gender = 'male' } let m = new Male("m", 24) function Female(name, age){ this.name = name this.age = age this.gender = 'female' } let f = new Female("f", 24) 在上面这个例子中，我们定义了两个构造函数，分别来构造男性和女性，但是 name 和 age 重复了，此时我们可以创建一个父类，来优化掉重复的代码 ...

曾经遇到过很多喜欢谈论宏大叙事的人，总是把政策、国情之类话题挂在嘴边但又并不是相关学术研究者的人，而谈论这些的目的，是在寻找何处有利可图，何处可以投机。 但在我看来，如今任何一个国家都无法构成单一的经济体，现在我们面临的是一个更为复杂、多元、全球性的经济体，换而言之，影响个人命运的变量越来越多，无法由自己掌握的东西太多，在过去的中国，社会情绪是只要努力就能成功，996 之类的东西无所谓，因为这个承诺最后大概率是能兑现的，而今天的社会情绪变为了内卷和躺平，反对 996 的社会情绪让更多人意识到：不管你如何努力工作，最后这所谓成功的承诺大概率是实现不了的。随着媒体的不断炒作，这种无力感、失控感越来越强。而谈论、研究政策之类的东西，会让人产生一种虚幻的权力感，让人觉得自己的思想凌驾于他人之上，并非凡人，他们需要在自己的圈子里重复此类话题的谈论，不断强化这虚幻的权力感，借此摆脱那种无力感。

好记性不如烂笔头 Basic 通过 createApp 创建应用实例 在 vue2.x 中，使用的是new Vue()，返回的是根组件实例，而createApp返回的是应用实例，想要得到根组件实例，还需要使用mount方法，个人认为这个改动是在语法层面上区分创建组件和创建应用 ES6 Proxy vue2.x 使用 Object.defineProperty来实现数据相应，vue3 中使用 new Proxy()为数据架设一层代理，来实现数据响应 计算属性 computed 计算属性会缓存结果，只要依赖值不变，多次访问该计算属性也不会执行代码，而是直接返回缓存结果，减小性能开销 计算属性拥有getter、setter 侦听器 watch watch 与 computed 几乎相同，唯一不同的是，watch 允许在其中执行异步操作 class 与 style 的绑定 class <div :class="{active: isActive}"></div> <div :class="classes"></div> data(){ return { classes: { avtive: true, container: true } } } <div :class="[activeClass, containerClass]"></div> data(){ return { activeClass: 'active', containerClass: 'container' } } 也可以直接在v-bind:class中使用三运运算符来切换 class 在自定义组件上使用 class 若组件内只有一个根元素，那么这些 class 会自动合并在根元素上 若有多个根元素，需要定义哪些根元素接收 class，使用$attrs <div id="app"> <my-component class="baz"></my-component> </div> const app = Vue.createApp({}) app.component('my-component', { template: ` <p :class="$attrs.class">Hi!</p> <span>This is a child component</span> ` }) 继承的 Attribute 可以使用$arrts来定义 Attribute 具体出现在哪个元素上 ...

之前康复训练，写了一个组件库，涵盖了： 单元测试 自动化集成 上传至npm 书写文档 接下来总结下每一步 单元测试 单元测试使用了Chai、Karma、Mocha、Siono Chai.js 是一个断言库 Karma 是一个测试运行容器，可以呼起浏览器运行测试代码 Mocha 是一个测试框架，参考了阮一峰的文章 Siono 作为 mock 工具提供间谍函数等，可以让我们在测试中测试组件的事件支持 其中难点在于如何将这个几个工具搭配起来构成一套完整的测试环境，除了google就是看文档… 自动化集成 当然，我也不想每次写完代码都自己手动跑一遍测试代码，所以我选择了GitHub Actions，在每次push代码时自动测试，失败了会有邮件通知 上传至NPM 写了库，总是想 share 出去的 # 登录 npm adduser # 根据提示填写 # 发布 npm publish 书写文档 文档方面，选择了 VuePress，就图个文档易读

install wsl2 参照官方文档 install oh-my-zsh 先安装 zsh sudo apt install zsh zsh --version which zsh # $ZSH_PATH 是 which zsh 的值 chsh -s $ZSH_PATH 安装 oh-my-zsh sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" # or sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" 此时你的根目录下应该有一个 .oh-my-zsh 目录 plugins 目录是存放插件的地方，themes 是存放主题的地方 现在让我们来试着修改主题 vim ~/.zshrc 找到 ZSH_THEME= 这一行，修改为 ys，然后在 bash 中运行 source ~/.zshrc 你也可以先花一些时间在这里找到你喜欢的主题 接下来我们搞一些常用插件 vim ~/.zshrc # 找到 plugins=(...) 这一行 # 我目前只使用了这些插件 plugins=(cp themes git git-open z zsh-autosuggestions zsh-syntax-highlighting) 你可以在这里找到 oh-my-zsh 自带插件的用法 ...