blog
blog copied to clipboard
nanyang24
📒 Yang's Notes & Blog
https://nanyang.io/post/prototype-chain ## `Object.__proto__ === Function.prototype` 看完上面一个很常见的 原型链 图示，看下面的例子： ```js let obj = {}; obj.__proto__ === Object.prototype; // return true ``` OK，结果显而易见是没有问题的；声明一个对象，对象的隐式原型 [[Prototype]]（内.... Gitalk_https://nanyang.io/post/prototype-chain
https://nanyang.io/post/function-declaration-in-react > 关于【属性初始化】概念可以参阅 #75 & [proposal-class-fields](https://github.com/tc39/proposal-class-fields) 起因是在我了解 `属性初始化` 概念后，实在太喜欢这样简洁的 cool syntax，看了很多相关的文章和官方概念，发现一个有趣的地方。 **Class的`属性初始化语法`结合`箭头函数`** 与 **.... Gitalk_https://nanyang.io/post/function-declaration-in-react
> ### 更好的阅读体验请链至：[nanyang.io: 对 ES Modules 的一点理解](https://nanyang.io/post/es-module) 长久以来，在前端工程里我们不断的书写✍️类似的文件头部，引入我们需要的模块，无论是自己编写的组件还是引入公共库。  在之前很长一段时间，这类机制在我看来仿佛[黑箱](https://en.wikipedia.org/wiki/Black_box)一样，对其背后发生感到了好奇 在逐渐理解模块化之后，如果你也对此有过我曾经同样的感受，我想接下来的内容能让你减少一些困惑 ## Motivation 我们可能已经习惯书写了各式各样的模块引入方式，但让我们先忘记这些 如果一切还原到最初的时期，仅仅是一些零碎的变量组成的文件 比如 `a.js` 和 `b.js`  那么现在我们需要一点更好玩的东西了，我们需要让 两个文件同时使用公共的第三方变量 > 最好的例子就是 jQuery  可以看到 `a.js` 和 `b.js`...
在许多企业服务网站或者后台系统需要制定各种权限来限制和隔离不同用户对资源的访问和操作 以下一些思路主要描述（我见过）的一些权限场景设计 ## 设计概念 最常见的应用模式是 **[RBAC](https://en.wikipedia.org/wiki/Role-based_access_control) (Role-based access control)** 基于角色的访问控制机制。并且可以不增加复杂性的套用 **[MAC](https://en.wikipedia.org/wiki/Mandatory_access_control)** 和 **[DAC](https://en.wikipedia.org/wiki/Discretionary_access_control)** 的策略。 简单来说，RBAC 将 权限 用户 之间 加入 角色 这个概念进行关联和解耦，通过将含有不同权限的角色赋予用户，实现权限分配。 如果没有角色的话，用户的权限分配过程应该是这样： ~~PLACEHOLDER~~ 单独进行每一种权限的配置，操作和管理成本比较高 而利用角色赋予用户权限，则减少了这样操作的成本，且能够大大减轻管理负担，同时将用户与权限解耦，提供更大的灵活性。  用户与角色的对应关系可以是 one to...
# 首次接触Markdown ## 简洁 极简风格原本就是本人十分推崇的，尤其从文字博客的可读性来讲，Markdown不会受与其他编辑器的限制，纯文本的模式让作者更专注于在内容上的创作，还不是一味的追求形式的花样。Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像* 强调 *。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。 Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括`Setext`、`atx`、`Textile`、`reStructuredText`、`Grutatext `和 `EtText`，而最大灵感来源其实是**纯文本电子邮件**的格式。 作为程序员，代码的突出显示为眼睛少瞎几年打下了坚实基础 `var a = 1` ```javascript function fancyAlert(arg) { if(arg) { $.facebox({div:'#foo'}) } }...
# Explanation [TLA: top-level-await](https://github.com/tc39/proposal-top-level-await) 这个提案经过两年的”激烈争辩“还是进入到了 stage3。 > 可以在提议链接中了解提议的初因，以及目前进度受到阻碍的细节 之所以能进入这个阶段主要是解决（或者规避）了 [Rich-Harris](https://github.com/Rich-Harris) 提出的初期反对意见 [Top-level await is a footgun](https://gist.github.com/Rich-Harris/0b6f317657f5167663b493c722647221) Harris 最新的更新也写明了[他完全支持目前提案的新方向](https://gist.github.com/Rich-Harris/0b6f317657f5167663b493c722647221#edit--february-2019) **简单讲 TLA 的新方向解决了3个主要的问题**: 1. 具有TLA的模块不会阻止同级执行，也就是同级不会阻碍 1. 只支持ES-Moudle，规避了 CJS 或普通 script 会出现的问题 1....
> 2019/10/20 更新：由于近期翻阅到了一篇关于 `this` 的文章，浅显易懂，推荐直接先看这篇 [understanding-javascript-function-invocation-and-this](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) # this 关键字 先看这几本相对权威的JS书籍关于 `this` 的描述 - 《Javascript权威指南》： 如果嵌套函数作为函数调用，其this值是全局对象（非严格模式下）或是undefined（严格模式下）; 如果嵌套函数作为方法调用，其this值指向调用它的对象。 - 《JavaScript高级程序设计》： 在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。另外，匿名函数的执行环境具有全局性，因此this对象通常指向window - 《你不知道的JavaScript - 上卷》： this 的绑定类型分为了 默认绑定，隐式绑定，显式绑定，new绑定 对于this的理解分很多种 以我的理解， - 默认绑定：...
# 详解 React 的 this.setState() ## this.setState() 的作用 `this.setState()`是 React 中非常重要和基础的一个API 在React中，读取当前状态用是直接访问 this.state 这样的形式的，但是更新状态却是用 this.setState，不是直接在this.state上修改，为什么呢？ ```js //读取状态 const count = this.state.count； //更新状态 this.setState({count: count + 1}）； //无意义 this.state.count = count...
# ES5 继承 与 ES6 继承的区别 ## ES5 继承 假设在es5要实现继承,首先定义一个父类: ```js //父类 function sup(name) { this.name = name } //定义父类原型上的方法 sup.prototype.printName = function (){ console.log(this.name) } ``` 现在再定义他sup的子类，继承sup的属性和方法: ```js function...
> 关于JavaScript 中 this指向的规则 请参阅：https://github.com/nanyang24/blog/issues/35 **本文将解答关于 react 中绑定 this 的所有疑惑。内容包括为什么需要绑定this，以及多种绑定this方法的优缺点**。 在使用 React 时，难免遇到受控组件和事件处理函数。我们经常需要在构造函数内为事件处理函数手工绑定 this 以确保预期。 ```js class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); //...