• Web领域
  • 前端工程化
  • 大前端
  • 微前端
• 软件工程领域
  • 鸭子类型
  • 函数重载
  • 函数签名
• 网络安全领域
  • 沙盒（沙箱）
• BMW WARNING

Web领域

前端工程化

在前后端未分离时代，前端能做的工作很少，
开发基本的展示页面，另外涉及少量的页面交互逻辑，
相比后端，只能算整个大的项目工程中的一小部分。
随着现代应用的复杂化，前端需要承担的职责和开发工作越来越多，前后端开始分离。

前端工程化是将软件工程中的原理与思路用在前端开发上使前端被单独视作一个工程，
从而让前端软件易于迭代，便于维护，高效开发，质量可靠。

前端工程化的前提是前后端分离。
在现代前端中，需要做到：

基本展示页面开发

页面完整交互逻辑与页面特效

基础项目构建（gulp、webpack、rollup）

JS预编译(TS、JSX、TSX)

CSS预编译（SCSS、Less）

代码体积压缩(uglyJS)

前端请求代理，接口数据模拟(Mock)

代码模块化开发(RequireJS、ES6)

代码打包部署(webpack、vue-cli)

前端项目版本迭代

前端性能监控

...

前端需要承担日益增加的职责，也就一步步向工程化演进。
这些开发过程职责合起来就是一个较大的工程。
这些前端职责随着发展不断演变引入的，后续也会有不同的新职责随着演变不断更新。

大前端

阅读全文

• 常见的基本包装类型
• 基本包装类型的对象生存期
• 构造函数与转型函数
• BMW WARNING

常见的基本包装类型

常见的基本包装类型，包括Boolean、Number、String三种。
其创建方式包括转型函数和字面量，不包含构造函数。
引用类型与基本包装类型的主要区别就是对象的生存期。

基本包装类型的对象生存期

var s = 'skyline'
s.age = 23
console.log(s.age)

以上代码可以想象成如下代码周期，通过使用构造函数来模拟包装：

当最后访问s.age时相当于又包装了一个新的对象，故其age不存在。

构造函数与转型函数

阅读全文

• 函数的长度
• 函数参数
• 参数传递
  • 按值传递
  • 引用传递
• ES6 默认参数
  • 默认参数的影响
  • 作用域前后变化
  • 懒执行
  • TDZ(Temporal Dead Zone)
• 函数创建
• 作用域链
• 箭头函数
• BMW WARNING

函数的长度

函数的长度等于形参的个数。

function skyline(a, b, c){
    console.log(`输入${arguments.length}个参数`)
}

console.log(`函数的长度为：${skyline.length}`)

skyline(1)

// 函数的长度为：3
// 输入1个参数

函数参数

函数的参数被放在一个arguments的类数组中。

它的值永远与对应命名参数的值保持同步。
设函数第 n 个参数为 a， 当在函数内部修改了 a，那么 arguments[n-1]保持同步也为更改后的值

arguments 的长度是由运行时传入参数个数决定的，而不是定义时

function test(a, b, c) {
  arguments[0] = { name: 'skyline' }
  arguments[1] = 2
  c = 5
  console.log(
    `a=${a}, b=${b}, 第三个参数的值是：${arguments[2]}, 参数的长度：${
      arguments.length
    }, 第一个参数与a是否相等：${arguments[0] === a}`
  )
}

test(1, { firstName: 'liu' }, '3', 3)
// a=[object Object], b=2, 第三个参数的值是：5, 参数的长度：4, 第一个参数与a是否相等：true

对于 ES6 中通过扩展运算符获取参数，示例如下

function createArray6(...args) {
  console.log(args)
  console.log(args instanceof Array)
  return args
}

createArray6(11, 2, 3)
//  (3) [11, 2, 3]
//  true

不同于 ES5 的 arguments 是一种类数组，ES6 拓展运算符获取 args 是一个数组。

arguments 与实参的绑定的绑定情况如下：
非严格，传入值共享，没传不共享

function skyline(a, b, c){
    console.log(`输入的a:${a}`)
    console.log(`输入的第一个参数：${arguments[0]}`)
    b = 2
    console.log(`b值为${b}`)
    console.log(`第而个参数：${arguments[1]}`)
}

console.log(`函数的长度为：${skyline.length}`)

skyline(1)

// 函数的长度为：3
// 2 输入的a:1
// 3 输入的第一个参数：1
// 5 b值为2
// 6 第而个参数：undefined

在严格模式下，实参和 arguments 是不会共享的，也就是都会为上述b的情况。

参数传递

阅读全文