bind的模拟实现,深入之bind的模拟实现

JavaScript 深远之bind的上行下效完毕

2017/05/26 · bind的模拟实现,深入之bind的模拟实现。JavaScript
· bind

初稿出处: 冴羽   

已离开简书,原因参见
http://www.jianshu.com/p/0f12350a6b66。

原稿出处

JavaScript深远之bind的画虎不成反类犬完成

已离开简书,原因参见
http://www.jianshu.com/p/0f12350a6b66。

bind

一句话介绍 bind:

bind() 方法会创造三个新函数。当以此新函数被调用时,bind()
的首先个参数将用作它运转时的
this,之后的壹系列参数将会在传递的实参前流传作为它的参数。(来自于 MDN
)

透过我们能够率先得出 bind 函数的多个特征:

  1. 回来二个函数
  2. 能够流传参数

虽人微权轻,但也要有温馨的姿态。

bind

咱俩在模拟 bind从前,先看看 bind实现了怎么功能。

        var foo = {
            value: 1
        };

        function bar() {
            console.log(this.value);
        }

        // 返回了一个函数
        var bindFoo = bar.bind(foo);

        bindFoo(); // 1

透过大家得以率先得出 bind 函数的二日性格:

  1. 回到一个函数
  2. 改变了this的指向

虽人微权轻,但也要有投机的态度。

回到函数的模拟达成

从第一个特点初始,大家举个例子:

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

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);
    }
 
}

小说能够在作者的 Github
https://github.com/mqyqingfeng/Blog
查看

模仿达成率先步


          var foo = {
            value: 1
        };

        function bar() {
            console.log(this.value);
        }
        // 第一版
        Function.prototype.bind2 = function (context) {
            var self = this;
            return function () {  // 返回一个函数
            return self.apply(context);  // 改变绑定函数的this指向
            }

        }

        // 返回了一个函数
        var bindFoo = bar.bind2(foo);
        bindFoo();  // 1

小说能够在自笔者的 Github
https://github.com/mqyqingfeng/Blog
查看

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图