var 、let 和 const

var
- var 声明的变量会被提升到作用域顶端可以在变量声明前使用
let const
- 暂时性死区不能在变量未声明的情况下使用而且不能重复使用
- 变量提升原因是为了解决函数间相互调用的情况
总结:
- 1. 提升: 函数 > 变量函数提升会把整个函数提升到作用域顶部, 变量提升只会把声明提交到作用域顶部
- 1. var 可以在声明前使用 let/const 不可以在声明前使用,存在暂时性死区
- 1. const 声明常量不能再次赋值
- 1. let const 作用范围是块级作用域，var 则是函数作用域
- 1. let const 相同的变量名不能重复声明

原型继承和 Class 继承

组合继承

function Parent(value) {
  this.val = value;
}

Parent.prototype.getValue = function() {
  console.log(this.val);
};

function Child(value) {
  Parent.call(this, value);
}

Child.prototype = new Parent();

const child = new Child(1);

child.getValue();
// child instanceof Parent;
console.log(child instanceof Parent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

寄生组合继承

function Parent(value) {
  this.val = value;
}

Parent.prototype.getValue = function() {
  console.log(this.val);
};

function Child(value) {
  Parent.call(this, value);
}

Child.prototype = Object.create(Parent.prototype, {
  constructor: {
    value: Child,
    enumerable: false,
    writable: true,
    configurable: true
  }
});

const child = new Child(1);

child.getValue();
// child instanceof Parent;
console.log(child instanceof Parent);

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

Class 继承

class Parent {
  constructor(value) {
    this.val = value;
  }
  getValue() {
    console.log(this.val);
  }
}

class Child extends Parent {
  constructor(value) {
    super(value);
  }
}

let child = new Child(1);
child.getValue();
console.log(child instanceof Parent);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

模块化

1. AMD 和 CMD

写法

// AMD
define(["./a", "./b"], function(a, b) {
  a.do();
  b.do();
});

// CMD
define(function(require, exports, module) {
  var a = require("./a");
  a.doSomething();
});

1
2
3
4
5
6
7
8
9
10
11

2. CommonJS

写法

// a.js
module.exports = {
  a: 1
};

exports.a = 1; //(或者这样写)

// b.js
var module = require("./a.js");
module.a;

1
2
3
4
5
6
7
8
9
10

3. ES Module

写法

// 引入模块
import a from "./a.js";
import { a } from "./a.js";

// 导出模块
export function a() {}

export default a(){}

1
2
3
4
5
6
7
8

Proxy

作用：用来自定义对象。在 Vue3.0 中将通过 Proxy 替换 Object.defineProperty
原因：Proxy 无需一层层递归为每个属性添加代理，一次即可完成，并且性能上更好，缺点：兼容性不好

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property);
      return Reflect.get(target, property, value);
    },
    set(target, property, value, receiver) {
      setBind(value, property);
      return Reflect.set(target, property, value);
    }
  };
  return new Proxy(obj, handler);
};

let obj = { a: 1 };

let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听属性${property}改变${v}`);
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`);
  }
);

p.a = 2;
p.a;

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

map、filter、reduce

map

作用：遍历原数组，生成新数组
3 个参数：当前索引元素索引原数组

[1, 2, 3].map(v => v + 1);

filter

作用：遍历原数组，将返回 true 的元素放入新数组
3 个参数：当前索引元素索引原数组

let arr = [1, 2, 3];
let newArr = arr.filter(item => item !== 3);
console.log(newArr); // => [1, 2]

1
2
3

reduce

作用：将数组中的元素通过回调函数最终转换为一个值
2 个参数：回调函数初始值
回调函数：4 个参数 => 累计值当前元素当前索引原数组

let arr = [1, 2, 3];
let sum = arr.reduce((acc, current) => acc + current, 0);
console.log(sum);

1
2
3

原型继承 →

# var 、let 和 const

# 原型继承 和 Class 继承

# 组合继承

# 寄生组合继承

# Class 继承

# 模块化

# 1. AMD 和 CMD

# 2. CommonJS

# 3. ES Module

# Proxy

# map、filter、reduce

# map

# filter

# reduce