FED16 简易深拷贝
描述
请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意:
- 参数对象和参数对象的每个数据项的数据类型范围仅在数组、普通对象({})、基本数据类型中]
- 无需考虑循环引用问题
html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _sampleDeepClone = target => {
// 补全代码
if(typeof target === 'object'&&target!==null){
const cloneTarget=Array.isArray(target)?[]:{};
for(prop in target){
if(target.hasOwnProperty(prop)){
cloneTarget[prop]=_sampleDeepClone(target[prop])
}
}
return cloneTarget
}else{
return target
}
}
</script>
</body>
</html>
FED17 深拷贝
描述
请补全JavaScript代码,要求实现对象参数的深拷贝并返回拷贝之后的新对象。
注意:
- 需要考虑函数、正则、日期、ES6新对象
- 需要考虑循环引用问题
html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
const _completeDeepClone = (target, map = new Map()) => {
// 补全代码
if(target===null) return target
if(typeof target!=='object') return target
const constructor=target.constructor
if(/^(Function|RegExp|Date|Map|Set)$/i.test(constructor.name)) return new constructor(target)
if(map.get(target)) return map.get(target)
map.set(target,true)
const cloneTarget=Array.isArray(target)?[]:{}
for(prop in target){
if(target.hasOwnProperty(prop)){
cloneTarget[prop]=_completeDeepClone(target[prop],map)
}
}
return cloneTarget
}
</script>
</body>
</html>
FED18 寄生组合式继承
描述
请补全JavaScript代码,要求通过寄生组合式继承使"Chinese"构造函数继承于"Human"构造函数。要求如下:
- 给"Human"构造函数的原型上添加"getName"函数,该函数返回调用该函数对象的"name"属性
- 给"Chinese"构造函数的原型上添加"getAge"函数,该函数返回调用该函数对象的"age"属性
html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
// 补全代码
function Human(name) {
this.name = name
this.kingdom = 'animal'
this.color = ['yellow', 'white', 'brown', 'black']
}
Human.prototype.getName=function(){
return this.name
}
function Chinese(name,age) {
Human.call(this,name)
this.age=age
this.color = 'yellow'
}
Chinese.prototype=Object.create(Human.prototype)
Chinese.prototype.constructor=Chinese
Chinese.prototype.getAge=function(){
return this.age
}
</script>
</body>
</html>
FED19 发布订阅模式
描述
请补全JavaScript代码,完成"EventEmitter"类实现发布订阅模式。
注意:
- 同一名称事件可能有多个不同的执行函数
- 通过"on"函数添加事件
- 通过"emit"函数触发事件
html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
class EventEmitter {
// 补全代码
constructor(){
this.events={}
}
on(event,fn){
if(!this.events[event]){
this.events[event]=[fn]
}else{
this.events[event].push(fn)
}
}
emit(event){
if(this.events[event]){
this.events[event].forEach(callback=>callback())
}
}
}
</script>
</body>
</html>
FED20 观察者模式
描述
请补全JavaScript代码,完成"Observer"、"Observerd"类实现观察者模式。要求如下:
- 被观察者构造函数需要包含"name"属性和"state"属性且"state"初始值为"走路"
- 被观察者创建"setObserver"函数用于保存观察者们
- 被观察者创建"setState"函数用于设置该观察者"state"并且通知所有观察者
- 观察者创建"update"函数用于被观察者进行消息通知,该函数需要打印(console.log)数据,数据格式为:小明正在走路。其中"小明"为被观察者的"name"属性,"走路"为被观察者的"state"属性
注意: - "Observer"为观察者,"Observerd"为被观察者
html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<script type="text/javascript">
// 补全代码
class Observerd {
constructor(name){
this.name=name;
this.state='走路';
this.Observers=[];
}
setObserver(Observer){
this.Observers.push(Observer);
}
setState(state){
this.state=state;
this.Observers.forEach(observer=>observer.update(this))
}
}
class Observer {
constructor(){
}
update(Observerd){
console.log(Observerd.name+'正在'+Observerd.state)
}
}
</script>
</body>
</html>