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: ...
随机推荐
- C与指针学习笔记
有些任务无法用其他语言实现,如直接访问硬件,但C却可以. C对数组下标引用和指针访问并不进行有效性检查,这可以节省时间,但你在使用这些特性时,就必须特别小心.
- Postman下载与安装
融e学-一个专注于重构知识,培养复合型人才的平台:http://www.i-ronge.com/ Postman 的官网下载地址是:https://www.getpostman.com/ 下载后看到压 ...
- MySQL5.7忘记root密码-手动修改密码教程
https://blog.csdn.net/greywolf0824/article/details/80215199
- 百度地图api根据地址获取经纬度
package com.haiyisoft.cAssistant;import java.io.BufferedReader;import java.io.IOException; import ja ...
- win下gvim或者linux下的vim安装vundle都适用的配置文件 - 在当前目录及其子目录下**, 的所有文件* 中, 搜索当前光标所在的单词
gvim下的普通配置: if v:lang =~ "utf8$" || v:lang =~ "UTF-8$" set fileencodings=utf-8,g ...
- leetcode 328 奇偶链表
更新代码: 开头检测是否需要调整(是否具有第三个节点) 使用三个ListNode* 变量记录奇偶链表的头尾headA,tailA为奇链表,headB为偶数链表,由于只需要最后令tailA->ne ...
- [VBA]利用正则表达式创建函数处理字符串
1.去除字符串中的数字 Function aa(sr As Range)Set reg = CreateObject("vbscript.regexp")With reg.Glob ...
- Prism 订阅事件 IEventAggregator 说明
本节学习了Event Aggregation事件聚合,这个在Prism中很重要,特别是对于Module间的通信.除了前面介绍的Command可以用于模块间的通信,还有我们这一节介绍的Event Agg ...
- 阶段3 2.Spring_04.Spring的常用注解_6 用于注入数据的注解
@Qualifier 指定id为accountDao1 测试 如果把Autowired注释掉的话, 就会报空指针异常.就是没有注入进来 @Qualifier不能独立使用必须和Autowired配合使用 ...
- linux常用命令(22)gzip命令
减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅可以用 ...