var number = 5; var obj = { number: 3, fn1: (function () { var number; this.number *= 2; number = number * 2; number = 3; return function () { var num = this.number; this.number *= 2; console.log(num); number *= 3; console.log(number); } })() } var fn1 = obj.fn1; fn1.call(null); obj.fn1(); console.log(window.number);
functionsayHi(){ console.log('Hello,', this.name);
} var person = {
name: 'YvetteLau',
sayHi: sayHi
} var name = 'Wiliam'; var Hi = person.sayHi;
Hi();
functionsayHi(){ console.log('Hello,', this.name);
} var person = {
name: 'YvetteLau',
sayHi: sayHi
} var name = 'Wiliam'; var Hi = person.sayHi;
Hi.call(person); //Hi.apply(person)
functionsayHi(){ console.log('Hello,', this.name);
} var person = {
name: 'YvetteLau',
sayHi: sayHi
} var name = 'Wiliam'; var Hi = function(fn) {
fn();
}
Hi.call(person, person.sayHi);
functionsayHi(){ console.log('Hello,', this.name);
} var person = {
name: 'YvetteLau',
sayHi: sayHi
} var name = 'Wiliam'; var Hi = function(fn) {
fn.call(this);
}
Hi.call(person, person.sayHi);
ECMAScript 中的函数始终可以作为构造函数实例化一个新对象，也可以作为普通函数被调用。ECMAScript 6 新增了检测函数是否使用 new 关键字调用的 new.target 属性。如果函数是正常调用的，则 new.target 的值是 undefined；如果是使用 new 关键字调用的，则 new.target 将引用被调用的构造函数。
functionKing() { if (!new.target) { throw'King must be instantiated using "new"'
}
console.log('King instantiated using "new"');
} newKing(); // King instantiated using "new"
King(); // Error: King must be instantiated using "new"
这里可以做一些延申，还有没有其他办法来判断函数是否通过new来调用的呢？
可以使用 instanceof 来判断。我们知道在new的时候发生了哪些操作？用如下代码表示：
var p = new Foo() // 实际上执行的是 // 伪代码
var o = new Object(); // 或 var o = {}
o.__proto__ = Foo.prototype
Foo.call(o)
return o
上述伪代码在MDN是这么说的：
一个继承自 Foo.prototype 的新对象被创建。
使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）
new 的操作说完了 现在我们看一下 instanceof，MDN上是这么说的：instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。
Currently, by default V8 has a memory limit of 512mb on 32-bit systems, and 1gb on 64-bit systems. The limit can be raised by setting --max-old-space-size to a maximum of ~1gb (32-bit) and ~1.7gb (64-bit), but it is recommended that you split your single process into several workers if you are hitting memory limits.
// Small program to test the maximum amount of allocations in multiple blocks. // This script searches for the largest allocation amount.
// Allocate a certain size to test if it can be done. function alloc (size) { const numbers = size / 8; const arr = [] arr.length = numbers; // Simulate allocation of 'size' bytes. for (let i = 0; i < numbers; i++) { arr[i] = i; } return arr; };
// Keep allocations referenced so they aren't garbage collected. const allocations = [];
// Allocate successively larger sizes, doubling each time until we hit the limit. function allocToMax () { console.log("Start");
const field = 'heapUsed'; const mu = process.memoryUsage();
// Infinite loop while (true) { // Allocate memory. const allocation = alloc(allocationStep); // Allocate and keep a reference so the allocated memory isn't garbage collected. allocations.push(allocation); // Check how much memory is now allocated. const mu = process.memoryUsage(); const gbNow = mu[field] / 1024 / 1024 / 1024;
module.exports = {
...
plugins: [ new ForkTsCheckerWebpackPlugin()
]
}
在我这个实际的项目中，vue.config.js 修改如下：
configureWebpack: config => { // get a reference to the existing ForkTsCheckerWebpackPlugin const existingForkTsChecker = config.plugins.filter(
p => p instanceof ForkTsCheckerWebpackPlugin,
)[0];
// remove the existing ForkTsCheckerWebpackPlugin // so that we can replace it with our modified version
config.plugins = config.plugins.filter(
p => !(p instanceof ForkTsCheckerWebpackPlugin),
);
// copy the options from the original ForkTsCheckerWebpackPlugin // instance and add the memoryLimit property const forkTsCheckerOptions = existingForkTsChecker.options;
埋点，是网站分析的一种常用的数据采集方法。我们主要用来采集用户行为数据（例如页面访问路径，点击了什么元素）进行数据分析，从而让运营同学更加合理的安排运营计划。现在市面上有很多第三方埋点服务商，百度统计，友盟，growingIO 等大家应该都不太陌生，大多情况下大家都只是使用，最近我研究了下 web 埋点，你要不要了解下。
用户通过浏览器来访问 web 页面，设备Id需要存储在浏览器上，同一个用户访问不同的业务方网站，设备Id要保持一样。web 变量存储，我们第一时间想到的就是 cookie，sessionStorage，localStorage，但是这3种存储方式都和访问资源的域名相关。我们总不能每次访问一个网站就新建一个设备指纹吧，所以我们需要通过一个方法来跨域共享设备指纹
setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式 将 setState() 视为请求而不是立即更新组件的命令。为了更好的感知性能，React 会延迟调用它，然后通过一次传递更新多个组件。React 并不会保证 state 的变更会立即生效。
var arr = [1,2,3]; var arr1 =newArray(1,2,3) var a = {}; // 检测某个实例对象是否属于某个对象类型 console.log(arr instanceofArray);//true console.log(arr1 instanceofArray);//true console.log(a instanceofArray);//true
function fun () {
console.log(1);
}
console.log(fun instanceofFunction);//true
// 添加一个比较函数 arr.sort(function(a,b) { if (a > b) { return-1;//表示 a 要排在 b 前面 } elseif (a < b) { return1;//表示 a 要排在 b后面 } else { return0;;//表示 a 和 b 保持原样,不换位置 }
});
console.log(arr);//[30,20,10,9,8,7,6,5,4,3,2,1] (添加函数之后) // 想要从小到大排序只要将函数 大于小于 号,反向即可
转字符串方法：将数组的所有元素连接到一个字符串中
join() 通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串
var arr = [1,2,3,4,5,6,7,8,9,10,20,30];
// 转字符串方法 var str = arr.join();
console.log(str);//1,2,3,4,5,6,7,8,9,10,20,30 var str = arr.join("*");
console.log(str);//1*2*3*4*5*6*7*8*9*10*20*30 var str = arr.join("");
console.log(str);//123456789102030
/* arguments展示形式是一个伪数组，因此可以进行遍历，伪数组有如下特点： 具有length属性 按照索引方式存储数据 不具有数组的 push pop 等方法 */
案例：利用 arguments 求一组数最大值
function getMax() { var max = arguments[0]; var arry = arguments; for (var i =0; i < arry.length; i++) { if (arry[i] > max) {
max = arry[i];
}
} return max;
}
遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。利用 for 循环，将数组中的每一项单独拿出来，进行一些操作
根据下标在 0 到 arr.length-1 之间，进行 for 循环遍历
//遍历数组就是把数组的元素从头到尾访问一遍 var arry = ['red','blue','green'] for(var i =0; i <3; i++){
console.log(arry[i]);
} //1.因为索引号从0开始，所以计数器i必须从0开始 //2.输出时计数器i当索引号使用
// 通用写法 var arry = ['red','blue','green'] for(var i =0; i < arry.length; i++){ //也可以写成： i <= arry.length - 1 console.log(arry[i]);
}
数组应用案例
求一组数中的所有数的和以及平均值
var arry = [2, 6, 7, 9, 11]; var sum =0; var average =0; for (var i =0; i < arry.length; i++) {
sum += arry[i];
}
average = sum / arry.length;
console.log(sum,average);//同时输出多个变量用逗号隔开
2、当内层循环结束时，在数组最后一位的元素，就一定是这个数组中最大的元素了，这时候除了最后一个元素不用再动以外（所以内层循环每循环一次就可以少循环一次）我们还要再来确定这个数组中第二大的元素，第三大的元素，以此类推，因此我们还需要一层外层循环。如果这个数组有 n 个元素我们就要确定 n - 1 个元素的位置，所以外层循环需要循环的次数就是 n - 1 次
git rm --cached Use this optionto unstage and remove paths onlyfrom the index. Working tree files, whether modified ornot, will be left alone.
使用这个项来解除暂存区的缓存，工作区的文件将保持不动。
意思就是不会在实际上删掉这个文件，只是解除它的追踪关系。
举例：
> git rm --cached hello.txt
// rm 'hello.txt'
> git status
On branch master
Your branch is up to date with 'origin/master'.
Changes to be committed:
(use "git restore --staged ..." to unstage)
deleted: hello.txt
/** * The workboxSW.precacheAndRoute() method efficiently caches and responds to * requests for URLs in the manifest. * See https://goo.gl/S9QRab */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
// The module cache var __webpack_module_cache__ = {};
// The require function function __webpack_require__(moduleId) { // Check if module is in cache var cachedModule = __webpack_module_cache__[moduleId]; if (cachedModule !== undefined) { return cachedModule.exports; } // Create a new module (and put it into the cache) var module = __webpack_module_cache__[moduleId] = { // no module.id needed // no module.loaded needed exports: {} };
// Execute the module function __webpack_modules__[moduleId](module, module.exports, __webpack_require__ "moduleId");
// Return the exports of the module return module.exports; }
// startup // Load entry module and return exports // This entry module can't be inlined because the eval devtool is used. var __webpack_exports__ = __webpack_require__("./src/index.js"); })
class Car { constructor() { // 在this.hooks中定义所有的钩子事件 this.hooks = { accelerate: new SyncHook(["newSpeed"]), brake: new SyncHook(), calculateRoutes: new AsyncParallelHook(["source", "target", "routesList"]) }; }
// add.js export default (a, b) => { return a + b } // minus.js export const minus = (a, b) => { return a - b } // index.js import add from'./add.js' import { minus } from'./minus.js'
it internally builds a dependency graph which maps every module your project needs and generates one or more bundles（webpack会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle）
type T0 = Parameters<() => string>; // [] type T1 = Parameters<(s: string) => void>; // [s: string] type T2 = Parameters<<T>(arg: T) => T>; // [arg: unknown] type T3 = Parameters<typeof f1>; // [arg: { a: number; b: string; }] type T4 = Parameters<any>; // unknown[] type T5 = Parameters<never>; // never type T6 = Parameters<string>; // never // Type 'string' does not satisfy the constraint '(...args: any) => any'. type T7 = Parameters<Function>; // never // Type 'Function' does not satisfy the constraint '(...args: any) => any'.
type T0 = InstanceType<typeof C>; // C type T1 = InstanceType<any>; // any type T2 = InstanceType<never>; // any type T3 = InstanceType<string>; // Error type T4 = InstanceType<Function>; // Error
type ObjectDescriptor<D, M> = {
data?: D;
methods?: M & ThisType<D & M>; // Type of 'this' in methods is D & M
};
functionmakeObject<D, M>(desc: ObjectDescriptor<D, M>): D & M { let data: object = desc.data || {}; let methods: object = desc.methods || {}; return { ...data, ...methods } as D & M;
}
