javascript中bind()函数实现和应用以及多次bind的结果的思考

. . . . .

已于 2024-07-04 14:20:26 修改

阅读量838

点赞数

分类专栏：前端开发文章标签： javascript 开发语言 ecmascript

于 2019-09-13 22:19:41 首次发布

原文链接：https://blog.csdn.net/learninginjava/article/details/48914751

版权

前端开发专栏收录该内容

350 篇文章 19 订阅

订阅专栏

一. 概述

在ECMA-262第五版引入了bind()方法，该方法创建一个新函数。

二. 语法

fn.bind(context[, arg1[, arg2[, ...]]])

第一个参数context将成为返回的新函数的this对象
第二个及以后的参数加上返回的新函数的参数，将作为新函数的参数

三. bind的简单实现原理

    if (!Function.prototype.bind) {
      Function.prototype.bind = function (oThis) {
      	if (typeof this !== 'function') {
          return
        }
      
        let self = this
        let args = Array.prototype.slice.call(arguments, 1)
        return function () {
          return self.apply(oThis, args.concat(Array.prototype.slice.call(arguments))) //这里的arguments是执行绑定函数时的实参
        }
      }
    }

bind函数的核心作用：绑定this、初始化参数

四. 常见应用场景

改变对象方法里this的值

var ob = {
	name: 'joe',
	getName: function () {
		alert(this.name);
	}
};
// 改变getName方法里原本的this对象为新对象{name: 'haha'}
var app = ob.getName.bind({name: 'haha'});
app();

提前传入参数，优化代码

// 计算n个面板的百分比宽度
const panelHeight = (length, n) => {
    return `${((n / length) * 100).toFixed(7)}%`;
};

const getPanelHeight = panelHeight.bind(null, length);

getPanelHeight(1),

在这里插入图片描述

五. 多次绑定bind方法

那么你有没有想过，如果使用bind()方法多次绑定，最终得到的this会是哪个绑定的呢？

function say() {
	alert(this.x);
};
var a = say.bind({x: 1});
var b = a.bind({x: 2});
b(); // 这里会输出1还是2呢？

仔细想一下，联系bind函数绑定的内部实现我们会发现，bind内部实现里返回了一个函数，这个函数里的this 如果这个函数没有被执行，那么这this永远就是第一次的。所以最后函数say里的this的值还是由第一次绑定时的参数决定。所以无论使用bind绑定多少次，最终原函数的this值是由第一次绑定传的参数决定的。

参考链接：https://blog.csdn.net/learninginjava/article/details/48914751