源码目录
工具函数
源码中__DEV__为process.env.NODE_ENV !== 'production'
EMPTY_OBJ 空对象
const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
? Object.freeze({})
: {}
// object.freeze 冻结对象
// 作用：冻结的对象最外层无法修改
EMPTY_ARR 空数组
const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []
NOOP 空函数
export const NOOP = () => {}
// 很多库的源码中都有这样的定义函数，比如 jQuery、underscore、lodash 等
// 使用场景：1. 方便判断， 2. 方便压缩
// 1. 比如：
const instance = {
render: NOOP
}
// 条件
const dev = true
if (dev) {
instance.render = function() {
console.log('render')
}
}
// 可以用作判断。
if (instance.render === NOOP) {
console.log('i')
}
// 2. 再比如：
// 方便压缩代码
// 如果是 function(){} ，不方便压缩代码
NO 永远返回 false 的函数
export const NO = () => false
// 除了压缩代码的好处外。
// 一直返回 false
isOn 判断字符串是不是 on 开头，并且 on 后首字母不是小写字母
const onRE = /^on[^a-z]/
export const isOn = (key: string) => onRE.test(key)
// eg
isOn('onChange') // true
isOn('onchange') // false
isOn('on3change') // true
onRE是正则。^符号在开头，则表示是什么开头。而在其他地方是指非。与之相反的是：$符合在结尾，则表示是以什么结尾。[^a-z]是指不是a到z的小写字母。
isModelListener 监听器
// 判断字符串是不是以onUpdate:开头
export const isModelListener = (key: string) => key.startsWith('onUpdate:')
remove 移除数组的一项
/**
* 移除数组的一项
* @param arr 数组
* @param el 具体项
*/
export const remove = <T>(arr: T[], el: T) => {
const i = arr.indexOf(el)
if (i > -1) {
arr.splice(i, 1)
}
}
hasOwn 是不是自己本身所拥有的属性
const hasOwnProperty = Object.prototype.hasOwnProperty
const hasOwn = (
val: object,
key: string | symbol
): key is keyof typeof val => hasOwnProperty.call(val, key)
// eg：
// 特别提醒：__proto__ 是浏览器实现的原型写法
// .call 则是函数里 this 显示指定以为第一个参数，并执行函数。
hasOwn({__proto__: { a: 1 }}, 'a') // false
hasOwn({ a: undefined }, 'a') // true
hasOwn({}, 'a') // false
hasOwn({}, 'hasOwnProperty') // false
hasOwn({}, 'toString') // false
// 是自己的本身拥有的属性，不是通过原型链向上查找的。
isArray 判断数组
const isArray = Array.isArray
isMap 判断是不是 Map 对象
export const isMap = (val: unknown): val is Map<any, any> =>
toTypeString(val) === '[object Map]'
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
isSet 判断是不是 Set 对象
export const isSet = (val: unknown): val is Set<any> =>
toTypeString(val) === '[object Set]'
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 使用为new Set()
isDate 判断是不是 Date 对象
const isDate = (val: unknown): val is Date => val instanceof Date
instanceof操作符左边是右边的实例。但不是很准，但一般够用了。原理是根据原型链向上查找的。 实际上数组、对象、函数都是Object
isFunction 判断是不是函数
const isFunction = (val: unknown): val is Function =>
typeof val === 'function'
isString 判断是不是字符串
const isString = (val: unknown): val is string => typeof val === 'string'
isSymbol 判断是不是 Symbol
const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol'
ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。
isObject 判断是不是对象
const isObject = (val: unknown): val is Record<any, any> =>
val !== null && typeof val === 'object'
isPromise 判断是不是 Promise
const isPromise = <T = any>(val: unknown): val is Promise<T> => {
return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}
toTypeString 对象转字符串
export const objectToString = Object.prototype.toString
export const toTypeString = (value: unknown): string =>
objectToString.call(value)
// call 是一个函数，第一个参数是 执行函数里面 this 指向。
// 通过这个能获得 类似 "[object String]" 其中 String 是根据类型变化的
toRawType 对象转字符串 截取后几位
const toRawType = (value: unknown): string => {
// extract "RawType" from strings like "[object RawType]"
return toTypeString(value).slice(8, -1)
}
isPlainObject 判断是不是纯粹的对象
const isPlainObject = (val: unknown): val is object =>
toTypeString(val) === '[object Object]'
isIntegerKey 判断是不是数字型的字符串key值
const isIntegerKey = (key: unknown) =>
isString(key) &&
key !== 'NaN' &&
key[0] !== '-' &&
'' + parseInt(key, 10) === key
hasChanged 判断是不是有变化
const hasChanged = (value: any, oldValue: any): boolean =>
!Object.is(value, oldValue)
Object.is(value1, value2) (ES6)该方法用来比较两个值是否严格相等。它与严格比较运算符（===）的行为基本一致。 不同之处只有两个：一是+0不等于-0，而是NaN等于自身。
invokeArrayFns 执行数组里的函数
// 这种写法方便统一执行多个函数。
const invokeArrayFns = (fns: Function[], arg?: any) => {
for (let i = 0; i < fns.length; i++) {
fns[i](arg)
}
}
def 定义对象属性
const def = (obj: object, key: string | symbol, value: any) => {
Object.defineProperty(obj, key, {
configurable: true,
enumerable: false,
value
})
}
这些属性描述符（特性）包括：
value——当试图获取属性时所返回的值。
writable——该属性是否可写。
enumerable——该属性在for in循环中是否会被枚举。
configurable——该属性是否可被删除。
set()——该属性的更新操作所调用的函数。
get()——获取属性值时所调用的函数。
toNumber 转数字
const toNumber = (val: any): any => {
const n = parseFloat(val)
return isNaN(n) ? val : n
}
getGlobalThis 全局对象
let _globalThis: any
export const getGlobalThis = (): any => {
return (
_globalThis ||
(_globalThis =
typeof globalThis !== 'undefined'
? globalThis
: typeof self !== 'undefined'
? self
: typeof window !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: {})
)
}
获取全局
this指向。
初次执行肯定是 _globalThis 是 undefined。所以会执行后面的赋值语句。
如果存在 globalThis 就用 globalThis。MDN globalThis
如果存在self，就用self。在 Web Worker 中不能访问到 window 对象，但是我们却能通过 self 访问到 Worker 环境中的全局对象。
如果存在window，就用window。
如果存在global，就用global。Node环境下，使用global。
如果都不存在，使用空对象。可能是微信小程序环境下。
下次执行就直接返回 _globalThis，不需要第二次继续判断了。这种写法值得我们学习。
总结
第一次用文章记录的形式来学习，希望能加大自己的学习成果， 加深记忆， 也便于日后复习起来比较便捷。 希望通过费曼学习法，学习并加以分享的形式加深对知识的吸收。再次也感谢若川的支持与鼓励！！！
