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

一. 概述

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

二. 语法

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

第一个参数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();

五. 多次绑定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

发布了229 篇原创文章 · 获赞 80 · 访问量 42万+

猜你喜欢

转载自blog.csdn.net/qq_34629352/article/details/104452058