JavaScript 深入之bind的模拟实现

十一月 3rd, 2019 admin

bind 简介

Ok，今天要讲的正是 bind。关于 bind，可以先移步楼主以前写的文章
ECMAScript 5(ES5) 中 bind
方法简介备忘，有个基本的概念。

bind() 方法会创建一个新函数，当这个新函数被调用时，它的 this 值是传递给
bind() 的第一个参数, 它的参数是 bind() 的其他参数和其原本的参数。

语法是这样样子的：

fun.bind(thisArg[, arg1[, arg2[, …]]])

1
fun.bind(thisArg[, arg1[, arg2[, …]]])
  • thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this
    指向。当使用 new 操作符调用绑定函数时，该参数无效。
  • arg1, arg2, …
    （可选）当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

    //注意上面这一行，添加了bind(this)

三个小问题

接下来处理些小问题:

1.apply 这段代码跟 MDN 上的稍有不同

在 MDN 中文版讲 bind 的模拟实现时，apply 这里的代码是：

self.apply(this instanceof self ? this : context || this,
args.concat(bindArgs))

1
self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))

多了一个关于 context 是否存在的判断，然而这个是错误的！

举个例子：

var value = 2; var foo = { value: 1, bar: bar.bind(null) }; function
bar() { console.log(this.value); } foo.bar() // 2

1
2
3
4
5
6
7
8
9
10
11
var value = 2;
var foo = {
    value: 1,
    bar: bar.bind(null)
};
 
function bar() {
    console.log(this.value);
}
 
foo.bar() // 2

以上代码正常情况下会打印 2，如果换成了 context || this，这段代码就会打印
1！

所以这里不应该进行 context 的判断，大家查看 MDN
同样内容的英文版，就不存在这个判断！

2.调用 bind 的不是函数咋办？

不行，我们要报错！

if (typeof this !== “function”) { throw new
Error(“Function.prototype.bind – what is trying to be bound is not
callable”); }

1
2
3
if (typeof this !== "function") {
  throw new Error("Function.prototype.bind – what is trying to be bound is not callable");
}

3.我要在线上用

那别忘了做个兼容：

Function.prototype.bind = Function.prototype.bind || function () { …… };

1
2
3
Function.prototype.bind = Function.prototype.bind || function () {
    ……
};

当然最好是用es5-shim啦。

关于作者：韩子迟

图片 1

a JavaScript beginner
个人主页 ·
我的文章 ·
9 ·
   

图片 2

    setTimeout(function(){

返回函数的模拟实现

从第一个特点开始，我们举个例子：

var foo = { value: 1 }; function bar() { console.log(this.value); } //
返回了一个函数 var bindFoo = bar.bind(foo); bindFoo(); // 1

1
2
3
4
5
6
7
8
9
10
11
12
var foo = {
    value: 1
};
 
function bar() {
    console.log(this.value);
}
 
// 返回了一个函数
var bindFoo = bar.bind(foo);
 
bindFoo(); // 1

关于指定 this 的指向，我们可以使用 call 或者 apply 实现，关于 call 和
apply
的模拟实现，可以查看《JavaScript深入之call和apply的模拟实现》。我们来写第一版的代码：

// 第一版 Function.prototype.bind2 = function (context) { var self =
this; return function () { self.apply(context); } }

1
2
3
4
5
6
7
8
// 第一版
Function.prototype.bind2 = function (context) {
    var self = this;
    return function () {
        self.apply(context);
    }
 
}

配合 setTimeout

什么时候容易丢失 this 指向？恩，setTimeout 是一个场景，很容易把 this
指向 window，当然，setInterval 也是一样。当使用对象的方法时，需要 this
引用对象，你可能需要显式地把 this 绑定到回调函数以便继续使用对象。

var canvas = { render: function() { this.update(); this.draw(); },
update: function() { // … }, draw: function() { // … } };
window.setInterval(canvas.render, 1000 / 60);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var canvas = {
  render: function() {
    this.update();
    this.draw();
  },
 
  update: function() {
    // …
  },
 
  draw: function() {
    // …
  }
};
 
window.setInterval(canvas.render, 1000 / 60);

用 canvas
写特效或者做游戏时经常会碰到类似的问题。上面的代码是有问题的，render
方法中的 this 其实被指向了 window！我们可以用 bind，显式地把 this
绑定到回调函数以便继续使用该对象。

window.setInterval(canvas.render.bind(canvas), 1000);

1
window.setInterval(canvas.render.bind(canvas), 1000);

类似的情况还有 dom 的事件监听，一不小心可能 this 就被指向了 dom
元素。可以参考下以前做 bigrender 时写的这部分代码
。

Chrome 7

传参的模拟实现

接下来看第二点，可以传入参数。这个就有点让人费解了，我在 bind
的时候，是否可以传参呢？我在执行 bind
返回的函数的时候，可不可以传参呢？让我们看个例子：

var foo = { value: 1 }; function bar(name, age) {
console.log(this.value); console.log(name); console.log(age); } var
bindFoo = bar.bind(foo, ‘daisy’); bindFoo(’18’); // 1 // daisy // 18

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var foo = {
    value: 1
};
 
function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);
 
}
 
var bindFoo = bar.bind(foo, ‘daisy’);
bindFoo(’18’);
// 1
// daisy
// 18

函数需要传 name 和 age 两个参数，竟然还可以在 bind 的时候，只传一个
name，在执行返回的函数的时候，再传另一个参数 age!

这可咋办？不急，我们用 arguments 进行处理：

// 第二版 Function.prototype.bind2 = function (context) { var self =
this; // 获取bind2函数从第二个参数到最后一个参数 var args =
Array.prototype.slice.call(arguments, 1); return function () { //
这个时候的arguments是指bind返回的函数传入的参数 var bindArgs =
Array.prototype.slice.call(arguments); self.apply(context,
args.concat(bindArgs)); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 第二版
Function.prototype.bind2 = function (context) {
 
    var self = this;
    // 获取bind2函数从第二个参数到最后一个参数
    var args = Array.prototype.slice.call(arguments, 1);
 
    return function () {
        // 这个时候的arguments是指bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(context, args.concat(bindArgs));
    }
 
}

参数

bind 的第一个参数会作为原函数运行时的 this
指向，不多说；而第二个开始的参数是可选的，当绑定函数被调用时，这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。怎么理解？

function fn(a, b, c) { return a + b + c; } var _fn = fn.bind(null, 10);
var ans = _fn(20, 30); // 60

1
2
3
4
5
6
function fn(a, b, c) {
  return a + b + c;
}
 
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30); // 60

fn 函数需要三个参数，_fn 函数将 10
作为默认的第一个参数，所以只需要传入两个参数即可，如果你不小心传入了三个参数，放心，也只会取前两个。

function fn(a, b, c) { return a + b + c; } var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60

1
2
3
4
5
6
function fn(a, b, c) {
  return a + b + c;
}
 
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60

这有啥用呢？如果某些函数，前几个参数已经 “内定” 了，我们便可以用 bind
返回一个新的函数。也就是说，bind()
能使一个函数拥有预设的初始参数。这些参数（如果有的话）作为 bind()
的第二个参数跟在 this
后面，之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面。

function list() { return Array.prototype.slice.call(arguments); } var
list1 = list(1, 2, 3); // [1, 2, 3] // Create a function with a preset
leading argument var leadingThirtysevenList = list.bind(undefined, 37);
var list2 = leadingThirtysevenList(); // [37] var list3 =
leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

1
2
3
4
5
6
7
8
9
10
11
function list() {
  return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);
 
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

参数

最终代码

所以最最后的代码就是：

Function.prototype.bind2 = function (context) { if (typeof this !==
“function”) { throw new Error(“Function.prototype.bind – what is trying
to be bound is not callable”); } var self = this; var args =
Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var
fbound = function () { self.apply(this instanceof self ? this : context,
args.concat(Array.prototype.slice.call(arguments))); } fNOP.prototype =
this.prototype; fbound.prototype = new fNOP(); return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Function.prototype.bind2 = function (context) {
 
    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind – what is trying to be bound is not callable");
    }
 
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
    var fNOP = function () {};
 
    var fbound = function () {
        self.apply(this instanceof self ? this : context, args.concat(Array.prototype.slice.call(arguments)));
    }
 
    fNOP.prototype = this.prototype;
    fbound.prototype = new fNOP();
 
    return fbound;
 
}

tip

bind 还能做一些有意思的事情。

通常来说，将一个类数组转为数组，我们会用 slice（ie9- 不支持）。参考

var slice = Array.prototype.slice; // slice.apply(arguments); //
slice(arguments, 1);

1
2
3
4
var slice = Array.prototype.slice;
 
// slice.apply(arguments);
// slice(arguments, 1);

bind 能让调用变的更加简单。

// same as “slice” in the previous example var unboundSlice =
Array.prototype.slice; var slice =
Function.prototype.call.bind(unboundSlice); // … slice(arguments); //
slice(arguments, 1);

1
2
3
4
5
6
7
8
// same as "slice" in the previous example
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);
 
// …
 
slice(arguments);
// slice(arguments, 1);

再举个类似的例子，比如说我们要添加事件到多个节点，for
循环当然没有任何问题，我们还可以 “剽窃” forEach 方法：

Array.prototype.forEach.call(document.querySelectorAll(‘input[type=”button”]’),
function(el){ el.addEventListener(‘click’, fn); });

1
2
3
Array.prototype.forEach.call(document.querySelectorAll(‘input[type="button"]’), function(el){
  el.addEventListener(‘click’, fn);
});

更进一步，我们可以用 bind 将函数封装的更好：

var unboundForEach = Array.prototype.forEach , forEach =
Function.prototype.call.bind(unboundForEach);
forEach(document.querySelectorAll(‘input[type=”button”]’), function
(el) { el.addEventListener(‘click’, fn); });

1
2
3
4
5
6
var unboundForEach = Array.prototype.forEach
  , forEach = Function.prototype.call.bind(unboundForEach);
 
forEach(document.querySelectorAll(‘input[type="button"]’), function (el) {
  el.addEventListener(‘click’, fn);
});

同样类似的，我们可以将 x.y(z) 变成 y(x,z) 的形式：

var obj = { num: 10, getCount: function() { return this.num; } }; var
unboundBind = Function.prototype.bind , bind =
Function.prototype.call.bind(unboundBind); var getCount =
bind(obj.getCount, obj); console.log(getCount()); // 10

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
  num: 10,
  getCount: function() {
    return this.num;
  }
};
 
var unboundBind = Function.prototype.bind
  , bind = Function.prototype.call.bind(unboundBind);
 
var getCount = bind(obj.getCount, obj);
console.log(getCount());  // 10

再举个栗子。每隔一秒在控制台打印 1-5，看起来是道考察闭包的经典题目。

for(var i = 1; i <= 5; i++) { !function(i) { setTimeout(function() {
console.log(i); }, i * 1000); }(i); }

1
2
3
4
5
6
7
for(var i = 1; i <= 5; i++) {
  !function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }(i);
}

ES6 下能用 let：

for(let i = 1; i <= 5; i++) { setTimeout(function() { console.log(i);
}, i * 1000); }

1
2
3
4
5
for(let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

也可以用 bind，瞬间逼格提升：

for(var i = 1; i <= 5; i++) { setTimeout(console.log.bind(console,
i), i * 1000); }

1
2
3
for(var i = 1; i <= 5; i++) {
  setTimeout(console.log.bind(console, i), i * 1000);
}

                aArgs.concat(Array.prototype.slice.call(arguments)));

JavaScript 深入之bind的模拟实现

2017/05/26 · JavaScript
· bind

原文出处： 冴羽   

Read more

关于 bind 的介绍就到这里，下一篇文章将结合 underscore 来讲讲如何实现一个
bind 的 polyfill。

  • Function.prototype.bind()
  • ECMAScript 5(ES5) 中 bind
    方法简介备忘
  • Javascript 中的 Bind ，Call 以及
    Apply
  • Javascript 中 bind()
    方法的使用与实现

打赏支持我写出更多好文章，谢谢！

打赏作者

var x = “window”;

构造函数效果的优化实现

但是在这个写法中，我们直接将 fbound.prototype =
this.prototype，我们直接修改 fbound.prototype 的时候，也会直接修改函数的
prototype。这个时候，我们可以通过一个空函数来进行中转：

// 第四版 Function.prototype.bind2 = function (context) { var self =
this; var args = Array.prototype.slice.call(arguments, 1); var fNOP =
function () {}; var fbound = function () { var bindArgs =
Array.prototype.slice.call(arguments); self.apply(this instanceof self ?
this : context, args.concat(bindArgs)); } fNOP.prototype =
this.prototype; fbound.prototype = new fNOP(); return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第四版
Function.prototype.bind2 = function (context) {
 
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
 
    var fNOP = function () {};
 
    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    fNOP.prototype = this.prototype;
    fbound.prototype = new fNOP();
    return fbound;
 
}

到此为止，大的问题都已经解决，给自己一个赞！o(￣▽￣)ｄ

new

使用 bind 返回的结果还是个 function，是个 function 就可以被 new
运算符调用，那么结果呢？规范中说的很清楚了，当使用 new
操作符调用绑定函数时，bind 的第一个参数无效。

function Person(name, age) { this.name = name; this.age = age; } var
_Person = Person.bind({}); var p = new _Person(‘hanzichi’, 30); //
Person {name: “hanzichi”, age: 30}

1
2
3
4
5
6
7
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
var _Person = Person.bind({});
var p = new _Person(‘hanzichi’, 30); // Person {name: "hanzichi", age: 30}

一般我们不会去这么用，但是如果要写个 bind 的
polyfill（），还是需要考虑用 new
调用的情况。

我们也可以设置默认值（参考上一小节），原先提供的那些参数仍然会被前置到构造函数调用的前面。

function Person(name, age) { this.name = name; this.age = age; } var
_Person = Person.bind(null, ‘hanzichi’); var p = new _Person(30); //
Person {name: “hanzichi”, age: 30}

1
2
3
4
5
6
7
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
var _Person = Person.bind(null, ‘hanzichi’);
var p = new _Person(30); // Person {name: "hanzichi", age: 30}

  this.name = name;

bind

一句话介绍 bind:

bind() 方法会创建一个新函数。当这个新函数被调用时，bind()
的第一个参数将作为它运行时的
this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN
)

由此我们可以首先得出 bind 函数的两个特点：

  1. 返回一个函数
  2. 可以传入参数

关于 bind 你可能需要了解的知识点以及使用场景

2016/08/18 · JavaScript
· bind

本文作者： 伯乐在线 –
韩子迟
。未经作者许可，禁止转载！
欢迎加入伯乐在线 专栏作者。

不看不知道，一看吓一跳，已经整整一个月没有更新 underscore
源码解读系列文章了。前面我们已经完成了 Object ，Array，Collection
上的扩展方法的源码剖析，本文开始来解读 Function 上的扩展方法。

完整的 underscore 源码解读系列文章请移步
，觉得还阔以的话，给个
star 鼓励下楼主呗 ^_^

weiqi.getName();

构造函数效果的模拟实现

完成了这两点，最难的部分到啦！因为 bind 还有一个特点，就是

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的
this 值被忽略，同时调用时的参数被提供给模拟函数。

也就是说当 bind 返回的函数作为构造函数的时候，bind 时指定的 this
值会失效，但传入的参数依然生效。举个例子：

var value = 2; var foo = { value: 1 }; function bar(name, age) {
this.habit = ‘shopping’; console.log(this.value); console.log(name);
console.log(age); } bar.prototype.friend = ‘kevin’; var bindFoo =
bar.bind(foo, ‘daisy’); var obj = new bindFoo(’18’); // undefined //
daisy // 18 console.log(obj.habit); console.log(obj.friend); // shopping
// kevin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var value = 2;
 
var foo = {
    value: 1
};
 
function bar(name, age) {
    this.habit = ‘shopping’;
    console.log(this.value);
    console.log(name);
    console.log(age);
}
 
bar.prototype.friend = ‘kevin’;
 
var bindFoo = bar.bind(foo, ‘daisy’);
 
var obj = new bindFoo(’18’);
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin

注意：尽管在全局和 foo 中都声明了 value 值，最后依然返回了
undefind，说明绑定的 this 失效了，如果大家了解 new
的模拟实现，就会知道这个时候的 this 已经指向了 obj。

(哈哈，我这是为我的下一篇文章《JavaScript深入系列之new的模拟实现》打广告)。

所以我们可以通过修改返回的函数的原型来实现，让我们写一下：

// 第三版 Function.prototype.bind2 = function (context) { var self =
this; var args = Array.prototype.slice.call(arguments, 1); var fbound =
function () { var bindArgs = Array.prototype.slice.call(arguments); //
当作为构造函数时，this 指向实例，self 指向绑定函数，因为下面一句
`fbound.prototype = this.prototype;`，已经修改了 fbound.prototype 为
绑定函数的 prototype，此时结果为 true，当结果为 true 的时候，this
指向实例。 // 当作为普通函数时，this 指向 window，self
指向绑定函数，此时结果为 false，当结果为 false 的时候，this 指向绑定的
context。 self.apply(this instanceof self ? this : context,
args.concat(bindArgs)); } // 修改返回函数的 prototype 为绑定函数的
prototype，实例就可以继承函数的原型中的值 fbound.prototype =
this.prototype; return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 第三版
Function.prototype.bind2 = function (context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
 
    var fbound = function () {
 
        var bindArgs = Array.prototype.slice.call(arguments);
        // 当作为构造函数时，this 指向实例，self 指向绑定函数，因为下面一句 `fbound.prototype = this.prototype;`，已经修改了 fbound.prototype 为 绑定函数的 prototype，此时结果为 true，当结果为 true 的时候，this 指向实例。
        // 当作为普通函数时，this 指向 window，self 指向绑定函数，此时结果为 false，当结果为 false 的时候，this 指向绑定的 context。
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承函数的原型中的值
    fbound.prototype = this.prototype;
    return fbound;
}

如果对原型链稍有困惑，可以查看《JavaScript深入之从原型到原型链》。

打赏支持我写出更多好文章，谢谢！

图片 3

1 赞 7 收藏
评论

  this.getName = function(){

深入系列

JavaScript深入系列目录地址：。

JavaScript深入系列预计写十五篇左右，旨在帮大家捋顺JavaScript底层知识，重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。

如果有错误或者不严谨的地方，请务必给予指正，十分感谢。如果喜欢或者有所启发，欢迎star，对作者也是一种鼓励。

本系列：

  1. JavaScirpt 深入之从原型到原型链
  2. JavaScript
    深入之词法作用域和动态作用域
  3. JavaScript 深入之执行上下文栈
  4. JavaScript 深入之变量对象
  5. JavaScript 深入之作用域链
  6. JavaScript 深入之从 ECMAScript 规范解读
    this
  7. JavaScript 深入之执行上下文
  8. JavaScript 深入之闭包
  9. JavaScript 深入之参数按值传递

  10. JavaScript
    深入之call和apply的模拟实现

    1 赞 收藏
    评论

图片 2

//定义全局变量x

Internet Explorer 9

var name = “pig”;

     
bind()最简单的用法是创建一个函数，使得这个函数无论怎么样调用都拥有同样的this值。JavaScript新手经常犯的一个错误就是将一个方法从一个对象中拿出来，然后再调用，希望方法中的this是原来的对象（比如在回调函数中传入这个方法）。如果不做特殊处理的话，一般会丢失原来的对象。从原来的函数和原来的对象创建一个绑定函数，则可以很漂亮的解决这个问题：

  fBound.prototype = new fNOP();

  this.getName = function(){

function Person(name){

语法

bind()方法会创建一个新的函数，成为绑定函数。当调用这个绑定函数时，绑定函数会以创建它时传入的第一个参数作为this，传入bind()方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调取原函数。

    fBound = function () {

function Person(name){

    fToBind = this,

  }

  throw new TypeError(“Function.prototype.bind – what is trying to be
bound is not callable”);

    };

var module = {

  }

    fun.bind(thisArg[, arg1[, arg2[, …]]])

                ? this

};

//返回module，因为在module内部调用getX()

  }

    setTimeout(function(){

Function.prototype.bind = function (oThis) {

     
现在有一个更好的解决办法，可以使用bind()函数，上面的例子可以被更新为：

Posted in web前端 Tags:
«
»
You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图