JS
深拷貝的實(shí)現(xiàn)
簡易版
JSON.parse(JSON.stringify())
問題
WARNING
- 無法解決
循環(huán)引用的問題蹂空，無限遞歸導(dǎo)致系統(tǒng)棧溢出- 無法拷貝
特殊的對象舰始，如RegExp莱革，Date峻堰，Set讹开，Map等- 無法拷貝
函數(shù)，會拋棄構(gòu)造函數(shù)捐名，所有構(gòu)造函數(shù)會指向Object
JSON.stringify()
只能序列化對象的可枚舉自有屬性
對象的函數(shù)和undefine會丟失
NaN旦万，Infinity，-Infinity結(jié)果返回null
test = {
name: 'a',
func: function foo(){
console.log('haha')
},
date: new Date(),
reg: new RegExp(),
a: undefined,
b: NaN,
c: Infinity
}
/* output
"{
"name":"a",
"date":"2020-04-20T03:21:10.167Z",
"reg":{},
"b":null,
"c":null
}"
Date()對象變字符串
RegExp(), Error()對象變空
function和undefine會丟失
NaN, Infinity, -Infinity結(jié)果返回null
構(gòu)造函數(shù)生成的對象會丟棄constructor
*/
http://www.reibang.com/p/b084dfaad501
const deepClone = (target) => {
}
call
// 思路：將要改變this指向的方法掛到目標(biāo)this上執(zhí)行并返回
Function.prototype.myCall = function (context, ...args) {
if (typeof this !== 'function') {
throw new TypeError('not function')
}
context = context || window
context.fn = this
let result = context.fn(...args)
delete context.fn
return result
}
apply
Function.prototype.myApply = function (context, [...args]) {
if (typeof this !== 'function') {
throw new TypeError('not function')
}
context = context || window
context.fn = this
let result = context.fn(...args)
delete context.fn
return result
}
bind
Function.prototype.myBind = function (context, ...args) {
if (typeof this !== 'function') {
throw new TypeError('not function')
}
context = context || window
context.fn = this
_this = this
return function Fn(...f_args) {
let result = context.fn.myApply(context, [...args, ...f_args])
delete context.fn
return result
}
}
instanceof
// 左邊的隱士原型是否指向右邊構(gòu)造函數(shù)的原型對象
const myInstanceof = function (leftVal, rightVal) {
let protoRight = rightVal.prototype;
let protoLeft = leftVal.__proto__;
function check(left, right) {
if (!left) return false;
if (left === right) return true;
return check(left.__proto__, right)
};
return check(protoRight, protoLeft);
}
Object.create
// Object.create創(chuàng)建一個(gè)新對象镶蹋，使用現(xiàn)有的對象來提供新創(chuàng)建的對象的__proto__
const myObjectCreate = function (obj) {
function Fn() {}
Fn.prototype = obj
return new Fn()
}
Vue
vue異步組件--路由懶加載
主要用于代碼分割成艘，分步加載
/**
* 處理路由頁面切換時(shí)，異步組件加載過渡的處理函數(shù)
* @param {Object} AsyncView 需要加載的組件贺归，如 import('@/components/home/Home.vue')
* @return {Object} 返回一個(gè)promise對象
*/
function lazyLoadView (AsyncView) {
const AsyncHandler = () => ({
// 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對象)
component: AsyncView,
// 異步組件加載時(shí)使用的組件
loading: require('@/components/public/RouteLoading.vue').default,
// 加載失敗時(shí)使用的組件
error: require('@/components/public/RouteError.vue').default,
// 展示加載時(shí)組件的延時(shí)時(shí)間淆两。默認(rèn)值是 200 (毫秒)
delay: 200,
// 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了，
// 則使用加載失敗時(shí)使用的組件拂酣。默認(rèn)值是：`Infinity`
timeout: 10000
});
return Promise.resolve({
functional: true,
render (h, { data, children }) {
return h(AsyncHandler, data, children);
}
});
}
