JavaScript 函数方法 - bind()
Function.prototype.bind()
ECMAScript5中新增的方法,但是在ECMAScript3可以通过模仿实现其方法作用
作用:
bind() 方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.
基本语法
fun.bind(thisArg[, arg1[, arg2[, ...]]])
/**
* For a given function, creates a bound function that has the same body as the original function.
* The this object of the bound function is associated with the specified object, and has the specified initial parameters.
* @param thisArg An object to which the this keyword can refer inside the new function.
* @param argArray A list of arguments to be passed to the new function.
*/
bind(thisArg: any, ...argArray: any[]): any;
参数
thisArg
当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new
操作符调用绑定函数时,该参数无效。
arg1, arg2, ...
当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。
返回值
返回由指定的this值和初始化参数改造的原函数拷贝
描述:
- bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体。
- 当目标函数 被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。
- 绑定函数被调用时,bind() 也接受预设的参数提供给原函数。
- 一个绑定函数也能使用
new
操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。
首先要理解几个概念, 绑定函数、 目标函数
先看看下面的实例:
var origin = function() {
console.log(this.x, this.y);
}; var o = { x: 1, y: 2 }; var bindFun = origin.bind(o); bindFun();
origin 目标函数(原函数) bindFun 绑定函数 明白这几个函数所代指的对象。 那么逐一来看看描述上每一句话的含义;
<1> 绑定函数 与 目标函数 具有相同的方法体;
var sum = function() {
console.log("12345");
}; var succ = sum.bind();
sum(); //12345
succ(); //12345
从上述打印的结果看出,确实可以验证,它们具有相同的方法体。
<2> 当目标函数被调用时,其 this 会绑定到 bind()函数的第一个参数,该参数不能被重写
var sum = function() {
console.log(this.x, this.y);
}; var succ = sum.bind({ x: 1, y: 2 });
succ(); // 1 2
<3> 绑定函数被调用时,bind() 也接受预设的参数提供给原函数
var sum = function(z) {
console.log(this.x, this.y, z);
}; var succ = sum.bind({ x: 1, y: 2 }, 3);
succ(); // 1 2 3
<4> 一个绑定函数也能使用 new 操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。
var sum = function(z) {
console.log(this.x, this.y, z);
}; var succ = sum.bind({ x: 1, y: 2 }, 3);
new succ(); // undefined undefined 3
如何在ECMAScript3中模拟实现 bind()函数效果
if (!Function.prototype.bind) {
Function.prototype.bind = function(o /*,org*/ ) {
var self = this,
boundArgs = arguments;
return function() {
//创建一个实参列表,将传入 bind() 的第二个及后续的实参都传入这个函数
var args = [],
i;
for (i = 1; i < boundArgs.length; i++) args.push(boundArgs[i]);
for (i = 0; i < arguments.length; i++) args.push(arguments[i]); return self.apply(o, args);
};
};
}
兼容旧的浏览器方式
bind
函数在 ECMA-262 第五版才被加入;它可能无法在所有浏览器上运行。你可以部份地在脚本开头加入以下代码,就能使它运作,让不支持的浏览器也能使用 bind()
功能。
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== "function") {
throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
}
var aArgs = Array.prototype.slice.call(arguments, 1), //获取参数
fToBind = this, // 保存外部 this
fNOP = function() {}, // 主要用在判断是否为函数实例
fBound = function() {
return fToBind.apply(this instanceof fNOP ? //防止 call apply 方式调用
this :
oThis || this, //从这里可以看出 oThis 是可选的 当没有传递时,默认是当前上下文对象
aArgs.concat(Array.prototype.slice.call(arguments)));
}; fNOP.prototype = this.prototype; // 保持与目标函数一直
fBound.prototype = new fNOP(); // 给绑定函数原型赋值 return fBound;
};
}
JavaScript 函数方法 - bind()的更多相关文章
- JavaScript 函数(方法)的封装技巧要领及其重要性
作为一枚程序猿,想必没有人不知道函数封装吧.在一个完整的项目开发中,我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装,这样便于我们调试和重复调用,以致于能够在一定程度上减少代码的冗 ...
- javascript 函数 方法
函数 1.函数的定义 (1)function 函数名(x){ 函数执行体; } (2)var 函数名=function(x){ 函数执行体; }; 这种方法说明,在javascript中,函数就是一种 ...
- JavaScript 函数方法 - toString()
Function.prototype.toString() 返回函数代码的字符串形式. 描述 Function 对象覆盖了从 Object 继承来的 Object.prototype.toString ...
- javascript中利用柯里化函数实现bind方法
柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预 ...
- 深入理解javascript函数系列第三篇——属性和方法
× 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...
- JavaScript中的bind方法及其常见应用
一.bind()方法的实现 在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用.就拿最常见的console.log("info…")来说,避免书写 ...
- JavaScript中的bind,call和apply函数的用法和区别
一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章,觉得讲的比较透彻,所以记录和总结如下 首先要理解的第一个概念,JavaScript中函数调用的方式, ...
- JavaScript函数之实际参数对象(arguments) / callee属性 / caller属性 / 递归调用 / 获取函数名称的方法
函数的作用域:调用对象 JavaScript中函数的主体是在局部作用域中执行的,该作用域不同于全局作用域.这个新的作用域是通过将调用对象添加到作用域链的头部而创建的(没怎么理解这句话,有理解的亲可以留 ...
- ASP.NET后台中调用前台Javascript函数的几种方法
做web开发,用的技术是aspx.net,可是由于比较习惯于ASP现在做起来,觉得非常别扭,原因在于有很多功能其实在前台可以处理的,但是因为用到了很多webcontrol,导致不断postback.如 ...
随机推荐
- .NET Core初体验 - 在Mac下运行第一个Web示例程序
要说最近两天程序猿之间最喜欢吹水的事是什么?那绝壁是甲骨文要放弃Java!简直做梦都要笑醒!由于公司的产品线全面转向Java,最近几个月也一直在苦学Java技术.已经默默决定了,如果消息证实是真的,我 ...
- Android之来历
Android一词的本义指“机器人”,同时也是谷歌于2007年11月5日宣布的基于Linux平台的开源手机操作系统的名称,该平台由操作系统.中间件.用户界面和应用 软件组成,号称是首个为移动终端打造的 ...
- C#中的委托是什么?
概述 委托类似C++中的函数指针,但是又有所不同.在C++中,函数指针不是类型安全的,它指向的是内存中的某一个位置,我们无法判断这个指针实际指向什么,对于参数和返回类型就更难以知晓.而.NET的委托则 ...
- C#Dictionary 实例
Dictionary<int, string> dc = new Dictionary<int, string>(); dc.Add(, "看了"); dc ...
- DSP TMS320C6000基础学习(3)——CCS v5软件开发环境搭建
================================================== DSP CCS工程文件构成 =================================== ...
- Centos6.5使用yum安装Mysql5.7
想要玩新的东东就要付出代价,我的时间悄悄的都溜走了,说多了都是泪! 实践才是真理! 系统版本:Linux localhost.localdomain 2.6.32-431.el6.x86_64 #1 ...
- 原生app,WEBAPP,混合app
什么叫做原生App? 原生App是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过网络商店或者卖场来获取例如 The App Store 与 Android Ap ...
- C程序设计语言练习题1-7
练习1-7 编写一个打印EOF的值的程序. #include <stdio.h> // 包含标准库的信息. int main() // 定义名为main的函数,它不接受参数值. { // ...
- Python学习笔记整理(三)Python中的动态类型简介
Python中只有一个赋值模型 一.缺少类型声明语句的情况 在Python中,类型是在运行过程中自动决定的,而不是通过代码声明.这意味着没有必要事声明变量.只要记住,这个概念实质上对变量,对象和它们之 ...
- TF.Learn
TF.Learn 手写文字识别 转载请注明作者:梦里风林Google Machine Learning Recipes 7官方中文博客 - 视频地址Github工程地址 https://githu ...