call apply bind sleep
1.自己实现一个call
1)利用对象的方式的形式改变this指针 funcion add; add.call(temObj)
只需要 在temObj对象临时添加一个方法即可
Function.prototype.mycall2=function(context){
context.fn=this;
context.fn();
Reflect.deleteProperty(context,'fn')
}
2)call还可以携带实参传入
利用函数的arguments截取除了第一个即可
Function.prototype.mycall2=function(context){
var args=[];
for(var i=1;i<arguments.length;i++){
args.push('arguments['+i+']')
};
debugger
context.fn=this;
context.fn(args); //但是args是一个类数组
Reflect.deleteProperty(context,'fn')
}
3)实现拆解函数的参数
将args这个类数组拆解为(args[0],args[1],....) Es6可以用扩展运算符
也可以用new Functionvar result = new Function('context', 'arguments', 'context.fn(' + args + ')')(context, arguments)
Es3可以利用eval语法,eval中,args 自动调用 args.toString()方法;而数组中的toString的效果就是[].join(',')
var temArr=[1,2,3];
temArr.toString(); //1,2,3
temArr.join() //1,2,3
temArr.join=temArr.shift
temArr.toString() //1
最终效果 context.fn(arguments[1], arguments[2], ...);
Function.prototype.mycall2=function(context){
var args=[];
for(var i=1;i<arguments.length;i++){
args.push('arguments['+i+']')
};
context.fn=this;
//context.fn(args);
eval('context.fn('+args+')')
Reflect.deleteProperty(context,'fn')
}
function test(x,y){
debugger;
return console.log(x+y+this.name)
}
var temObj={name:'penguin'}
test.mycall2(temObj,1,2)
4)实现当传null时候this指向window;还有有返回值
Function.prototype.mycall2=function(context){
var context = context || window;
var args=[];
for(var i=1;i<arguments.length;i++){
args.push('arguments['+i+']')
};
context.fn=this;
var result=eval('context.fn('+args+')')
Reflect.deleteProperty(context,'fn')
return result
}
参考:https://github.com/mqyqingfeng/Blog/issues/11
实现一个apply
Function.prototype.myApply=function(context,arr){
var context=context||window;
context.fn=this;
var args=[],result;
for (var i = 0, len = arr.length; i < len; i++) {
args.push('arr[' + i + ']');
}
if(!arr){
result=context.fn()
}else{
result=eval('context.fn('+args+')');
}
return result;
}
1.自己实现一个bind函数
原理:通过apply或者call方法来实现。
(1)初始版本
Function.prototype.bind=function(obj,arg){
var arg=Array.prototype.slice.call(arguments,1);
var context=this;
return function(newArg){
arg=arg.concat(Array.prototype.slice.call(newArg));
return context.apply(obj,arg);
}
} (2) 考虑到原型链
为什么要考虑?因为在new 一个bind过生成的新函数的时候,必须的条件是要继承原函数的原型
Function.prototype.bind=function(obj,arg){
var arg=Array.prototype.slice.call(arguments,1);
var context=this;
var bound=function(newArg){
arg=arg.concat(Array.prototype.slice.call(newArg));
return context.apply(obj,arg);
}
var F=function(){}
//这里需要一个寄生组合继承
F.prototype=context.prototype;
bound.prototype=new F();
return bound;
}
如何实现sleep的效果(es5或者es6)
(1)while循环的方式
function sleep(ms){
var start=Date.now(),expire=start+ms;
while(Date.now()<expire);
console.log('1111');
return;
} 执行sleep(1000)之后,休眠了1000ms之后输出了1111。上述循环的方式缺点很明显,容易造成死循环。
(2)通过promise来实现
function sleep(ms){
var temple=new Promise(
(resolve)=>{
console.log(111);setTimeout(resolve,ms)
});
return temple
}
sleep(500).then(function(){
//console.log(222)
})
//先输出了111,延迟500ms后输出222 (3)通过async封装
function sleep(ms){
return new Promise((resolve)=>setTimeout(resolve,ms));
}
async function test(){
var temple=await sleep(1000);
console.log(1111)
return temple
}
test();
//延迟1000ms输出了1111 ####(4).通过generate来实现
function* sleep(ms){
yield new Promise(function(resolve,reject){
console.log(111);
setTimeout(resolve,ms);
})
}
sleep(500).next().value.then(function(){console.log(2222)})
Function._proto_(getPrototypeOf)是什么?
获取一个对象的原型,在chrome中可以通过__proto__的形式,或者在ES6中可以通过Object.getPrototypeOf的形式。
那么Function.proto是什么么?也就是说Function由什么对象继承而来,我们来做如下判别。
Function.__proto__==Object.prototype //false
Function.__proto__==Function.prototype//true
复制代码
我们发现Function的原型也是Function。
Function._proto_(getPrototypeOf)是什么?
获取一个对象的原型,在chrome中可以通过__proto__的形式,或者在ES6中可以通过Object.getPrototypeOf的形式。
那么Function.proto是什么么?也就是说Function由什么对象继承而来,我们来做如下判别。
Function.__proto__==Object.prototype //false
Function.__proto__==Function.prototype//true
复制代码
我们发现Function的原型也是Function。
call apply bind sleep的更多相关文章
- call,apply,bind的用法
关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...
- JavaScript中call,apply,bind方法的总结。
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- call(),apply(),bind()与回调
1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- javascript-this,call,apply,bind简述2
上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...
- javascript-this,call,apply,bind简述1
最近在系统的学习面向对象方面的知识,遇到的最大拦路虎就数this的指向,call,apply,bind函数的使用,单独抽出一天时间把这几个烦人的家伙搞定,去学习更深入的内容. 首先介绍一下this的一 ...
- call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- JavaScript中call,apply,bind方法的总结
原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...
- call, apply,bind 方法解析
call(), apply(),bind() 三者皆为Function的方法 call(),apply()的作用是调用方法,并改变函数运行时的context(作用上下文) bind() 的作用是引用方 ...
- JS中call,apply,bind方法的总结
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...
随机推荐
- linux输出与查看的几种方式
输出的几种方式:echo/ tee echo "postgres install Failed !!!!!!" | tee -a "$Install_log"# ...
- MongoDB4和MysSQL5.7的读/写和事务处理速度简单对比
系统环境: Ubuntu 18.04 数据库 MysSQL5.7/MongoDB4.0 插入的数据为随机生产,不重复. MySQL使用的连接库是 sqlalchemyMongoDB使用的连接库是pym ...
- windows怎么远程访问deepin linux桌面
deepin linux端安装anydesk 1.首先点击打开任务栏上的“深度商店” 2.打开后搜索anydesk. 3.点击进入后按“安装”即可,安装完成即可在“深度商店”点击“打开”运行anyde ...
- 转 实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化(三)
这是本系列的最后一篇,主要是select_related() 和 prefetch_related() 的最佳实践. 第一篇在这里 讲例子和select_related() 第二篇在这里 讲prefe ...
- flutter flutter_swiper使用
flutter_swiper flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 更多详情信息请移步:https://blog.csdn.net/u011 ...
- wpf prism4 出现问题:无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性。
WPF Prism 框架 程序 出现 问题: 无法加载一个或多个请求的类型.有关更多信息,请检索 LoaderExceptions 属性. 1.开始以为是配置的问题,找了半天,最后原来是有个依赖类库没 ...
- redis源码分析之数据结构--dictionary
本文不讲hash算法,而主要是分析redis中的dict数据结构的特性--分步rehash. 首先看下数据结构:dict代表数据字典,每个数据字典有两个哈希表dictht,哈希表采用链式存储. typ ...
- opengl入门篇二: 索引缓冲对象EBO
在绘制图形的过程中,顶点可能会重复.比如两个三角形组成了四边形,那么,必然有两个点是重复的.因此采用索引的方式,四个点即可描述四边形. // 四个顶点 GLfloat vertices[] = { / ...
- Selenium 2自动化测试实战13(设置元素等待)
一.设置元素等待 若在加载某个元素时延迟而造成的ElementNotVisbleException的情况出现,那么就会降低自动化脚本的稳定性,可以通过设置元素等待改善这种问题造成的不稳定. webdr ...
- dubbo的启动方法
Dubbo服务的运行方式: 1.使用Servlet容器运行(Tomcat.Jetty等)----不可取 缺点:增加复杂性(端口.管理) 浪费资源(内存)2.自建Main方法类来运行(spring容器) ...