js的bind函数

概述

Function.prototype.bind(),所以bind()是函数或方法的一个属性。bind()将创建一个新的函数,调用bind()的时候,新函数的thisbind()的第一个参数指定,bind()的其余参数将作为新函数的参数供调用时使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const obj = {
x: 12,
getX: function() { return this.x; },
setX: function(x) { this.x = x; }
}

console.log(obj.getX()); // 12

const unboundGetX = obj.getX;
// console.log(unboundGetX()); // TypeError: Cannot read property 'x' of undefined

const boundGetX = unboundGetX.bind(obj);
console.log(boundGetX()); // 12

const boundSetX = obj.setX.bind(obj, 89);
boundSetX(); // 这时传不传参数不影响obj.x=89的事实
console.log(boundGetX()); // 89

const boundSetX2 = obj.setX.bind(obj);
boundSetX2(999); // 这时如果不传参数obj.x将是undefined
console.log(boundGetX()); // 999

实现自己的bind()

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
26
27
28
29
30
31
const obj2 = {
name: "this is obj2"
}

function foo(color) {
console.log(color);
return this.name;
}

const bindFoo = foo.bind(obj2, "black");
// black
// this is obj2
console.log(bindFoo());

// 构造函数时
const nbfoo = new bindFoo(); // black,传入的参数依然生效
console.log(nbfoo.name); // undefined,传入的obj2失效,this指向的是nbfoo而不是obj2了

// TODO: new bindFoo()的时候,this指向的是new出来的而不是obj2,这个效果
Function.prototype.mybind = function(ctx) {
const fn = this;
const args = Array.prototype.slice.call(arguments, 1); // 去掉第0个
return function() {
return fn.apply(ctx, args);
}
}

const mybindFoo = foo.mybind(obj2, "white");
// white
// this is obj2
console.log(mybindFoo());
打赏
  • © 2016-2020 留叶
  • Powered by Hexo Theme Ayer
    • PV:
    • UV:

请我喝杯咖啡吧~

支付宝
微信