Function.bind 方法
this.num = 9;
var mymodule = {
num: 81,
getNum: function() { return this.num; }
}; module.getNum(); // var getNum = module.getNum;
getNum(); // 9, 因为在这个例子中,"this"指向全局对象 // 创建一个'this'绑定到module的函数
var boundGetNum = getNum.bind(module);
boundGetNum(); //
if(!Function.prototype.bind){
Function.prototype.bind = function(oThis){
if(typeof this !=="function"){ //如果不函数抛出异常
throw new TyperError("")
}
var aArgs = Array.prototype.slice.call(arguments,1), //此处的aArgs是除函数外的参数
fToBind = this, //要绑定的对象
fNOP = function(){},
fBound = function(){
return fToBind.apply(
//没看清楚为什么要 this. instanceof fNOP ? this: oThis, 应该直接OThis吧
this instanceof fNOP ? this:oThis||this, aArgs.concat(Array.prototype.slice.call(arguments)) 参数合并 );
)
};
fNOP.prototype = this.prototype; // 利用中间函数 fNOP 来借用 被执行函数ABC的原型
fBound.prototype = new fNOP(); // 因为 new FNOP ( ) 这个实例有个属性 __proto__ 指向了 fNOP的原型, 这样改变fBound的原型不会影响到 被执行函数ABC的原型
return fBound;
}
}
明白 bind 的用法就必须要知道 apply 的用法,MDN 指出,apply 是直接修改了函数内部的指向到第一个参数,并将第二个参数数组传参进函数并运行这个函数。也就是说
var obj = {test: function() { console.log(this, arguments) }},
func = obj.test;
obj.test("Hello", ",", "world", "!");
func.apply(obj, ["Hello", ",", "world", "!"]);
这两种运行方式是一样的。那么回到 Polyfill 中发现参数的写法是 args.concat(slice.call(arguments))。args 是将 bind时候定义的除第一个参数外的其它参数,而此时的 arguments 是指函数调用时候的参数,通过数组的操作将这两个参数合并成一个数组传入函数内部。看个例子你可能更容易明白:
/** 代码接上 **/
var newFunc = func.bind(obj, "Hello", ",");
newFunc("world", "!");
那么再来回答问题一,这个是典型的属性继承的方法,本来使用
bound.prototype = self.prototype
就可以将原属性集成过来了,但是这样两个对象属性都指向同一个地方,修改 bound.prototype 将会造成 self.prototype也发生改变,这样并不是我们的本意。所以通过一个空函数 nop 做中转,能有效的防止这种情况的发生。
bind返回的是函数
if (!Function.prototype.bind) {
Function.prototype.bind = function(obj) {
var _self = this
,args = arguments;
return function() {
_self.apply(obj, Array.prototype.slice.call(args, 1));
}
}
}
Function.bind 方法的更多相关文章
- ES6下的Function.bind方法
在JavaScript的使用中,this的指向问题始终是一个难点.不同的调用方式,会使this指向不同的对象.而使用call,apply,bind等方式,可改变this的指向,完成一些令人惊叹的黑魔法 ...
- 解决function.bind()方法
这个 bind 方法只有在 ie10 版本的浏览器才得到原生支持,低于该版本的浏览器下执行时会得到一个 undefined 的错误提示. 于是只好再次上网 google 解决方案,功夫不负有心人,我们 ...
- IE8支持function.bind()方法
这个 bind 方法仅仅有在 ie10 版本号的浏览器才得到原生支持,低于该版本号的浏览器下运行时会得到一个 undefined 的错误提示.于是仅仅好再次上网 google 解决方式,功夫不负有心人 ...
- 浅析 JavaScript 中的 Function.prototype.bind() 方法
Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...
- prototype.js中Function.prototype.bind方法浅解
prototype.js中的Function.prototype.bind方法: Function.prototype.bind = function() { var __method = this; ...
- JavaScript 中的 Function.prototype.bind() 方法
转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...
- js学习进阶中-bind()方法
有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...
- Javascript中call,apply,bind方法的详解与总结
在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...
- 【转载】JS中bind方法与函数柯里化
原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情 ...
随机推荐
- handle 和module
<httpHandlers> <add verb="*" path="*" type="ClassLibrary831.TestHa ...
- crontab + rsyncd同步方案
目的主机: rsync --daemon [root@iZ23ohdbxmrZ ~]# vim /etc/rsyncd.conf #global settingsport = 873pid file= ...
- STS,MyEclipse中Maven配置
本文以STS的环境做讲解,MyEclipse环境和STS差别不大,配置过程相似. STS是解压版的,启动后,可以看到已经有了Maven插件,, 但是,STS也同时给你了一个Maven,但是通常不建议使 ...
- HandyJSON第三方库的日常使用与错误记录
一.错误提示 1.更新Xcode10.2,Swift5.0出现错误提示 Undefined symbols for architecture x86_64: "_swift_getField ...
- RabbitMQ单机多实例配置
由于某些因素的限制,有时候你不得不在一台机器上去搭建一个rabbitmq集群,当然这种集群只适合自己玩玩,验证下结论,这个有点类似zookeeper的单机版.真实生成环境还是要配成多机集群的.有关怎么 ...
- JAVA基础补漏--可变参数
使用场景:当参数列表数据类型已确定,但参数的个数不确定,就可以用可变参数 格式: 修饰符 返回值类型 方法名(数据类型...变量名){} 原理:可变参数底层为一数组,可根据变量个数的不同,创建不同长度 ...
- webform button
https://www.codeproject.com/Questions/412553/differences-between-onClick-and-onClientClick OnClick w ...
- 「SSH 黑魔法」: 代理、端口转发和 shell 共享
在好朋友的推荐下,我看了这个视频: The Black Magic Of SSH 这个视频里面,介绍了 ssh 的一些高级应用:结合工作的经历,两类问题会对我们平时的工作帮助很大: 1. 两个人怎么 ...
- 源码安装git
1.安装依赖包 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel 2.下载git源码并解压缩 wget ...
- UVa 11396 爪分解(二分图判定)
https://vjudge.net/problem/UVA-11396 题意: 给出n个结点的简单无向图,每个点的度数均为3.你的任务是判断能否把它分解成若干爪.每条边必须属于一个爪,但同一个点可以 ...