js函数实现

// call实现
// 思路：将要改变this指向的方法挂到目标this上执行并返回
Function.prototype.mycall=function(context){
	if(typeof this!=='function'){
		throw new TypeError('not function');
	}
	context=context||window;
	context.fn=this;
	let arg=[...arguments].slice(1);
	let result=context.fn(...arg);
	delete context.fn;
	return result;
}

// apply实现
Function.prototype.myapply=function(context){
	if(typeof this!=='function'){
		throw new TypeError('not function');
	}
	context=context||window;
	context.fn=this;
	let result;
	console.log(arguments)
	if(arguments[1]){
		result=context.fn(arguments[1])
	}
	else{
		result=context.fn()
	}
	delete context.fn;
	return result;
}

//bind
Function.prototype.mybind=function(context){
	if(typeof this!=='function'){
		throw new TypeError('function error');
	}
	let _this=this;
	let arg=[...arguments].slice(1);
	console.log(arg,arguments,_this)
	return function F(){
		if(this instanceof F){
			return new _this(...arg,...arguments)
		}
		else{
			console.log(arg.concat(...arguments))
			return _this.apply(context,arg.concat(...arguments))
		}
	}
}

// promise实现
// 未添加异步处理等其他边界情况
// ①自动执行函数，②三个状态，③then	
function promises(){
	this.status='pending';
	this.msg='';
	var process = arguments[0];
	var that=this;
	
	process(function(){
		that.status='resolve';
		that.msg=arguments[0];
	},function(){
		that.status='reject';
		that.msg=arguments[0];
	})
}

promises.prototype.then=function(){
	if(this.status=='resolve'){
		arguments[0](this.msg)
	}
	if(this.status=='reject'&&arguments[1]){
		arguments[1](this.msg)
	}
}

//测试用例
var mm=new promises(function(resolve,reject){
    resolve('123');//123其实就是第二个arguments[0]
});//上面的第一个arguments[0]
mm.then(function(success){
    console.log(success);//该success其实就是上面的this.msg
    console.log("ok!");
},function(){
    console.log('fail!');
});
//123
//ok

var obj={
	age:18
};
function a(){
	console.log(this,arguments,this.age)
}
a.mycall(obj,'aaa','bbb',17)

//事件监听
class EventEmiter{
	constructor(){
		this.events=this.events||new Map()
	}
	//监听事件
	addListener(type,fn){
		if(!this.events.get(type)){
			this.events.set(type,fn);
		}
	}
	//触发事件
	emit(type){
		let handle=this.events.get(type);
		handle.apply(this,[...arguments].slice(1));
	}
}

//测试
let emiter=new EventEmiter();
emiter.addListener('age',age=>{
	console.log(age);//25
})
emiter.emit('age',25)

//路由实现
class Route{
	constructor(){
		//路由对象
		this.routes={};
		//当前hash
		this.currentHash='';
		this.freshRoute=this.freshRoute.bind(this);
		//监听
		window.addEventListener('load',this.freshRoute,false);
		window.addEventListener('hashchange',this.freshRoute,false);
	}
	//存储
	storeRoute(path,cb){
		this.routes[path]=cb||function(){};
	}
	//更新
	freshRoute(){
		this.currentHash=location.hash||'/';
		console.log(this.routes)
		if(this.routes[this.currentHash]){
			this.routes[this.currentHash]();	
		}
		else{
			console.log(location.hash)
		}
	}
}
var t=new Route();
t.storeRoute(location.hash,function(){
	console.log(location.hash)
})

//实现懒加载
<ul>
  <li><img src="./imgs/default.png" data="./imgs/1.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/2.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/3.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/4.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/5.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/6.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/7.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/8.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/9.png" alt=""></li>
  <li><img src="./imgs/default.png" data="./imgs/10.png" alt=""></li>
</ul>

let imgs =  document.querySelectorAll('img')
// 可视区高度
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
function lazyLoad () {
  // 滚动卷去的高度
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  for (let i = 0; i < imgs.length; i ++) {
    // 图片在可视区冒出的高度
    let x = clientHeight + scrollTop - imgs[i].offsetTop
    // 图片在可视区内
    if (x > 0 && x < clientHeight+imgs[i].height) {
      imgs[i].src = imgs[i].getAttribute('data')
    } 
  }      
}
// addEventListener('scroll', lazyLoad) or setInterval(lazyLoad, 1000)