一、bind方法的作用？

bind() 方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 --MDN

简单说，bind和call/apply类似都也是改变this的指向。但是bind并不会立即执行函数，而是返回一个绑定了this的新函数，且新函数的this无法再次被修改。
举个例子吧：

let obj = {num:1,add : function (a,b) {return a+b+this.num;}
}
console.log(obj.add(1,2));//4
let plus = obj.add;
// 原因：this.num在当前作用域内不存在，this指向window
console.log(plus(1,2));//NaN
// 使用call/apply改变this的指向
console.log(plus.call(obj, 1,2)); //4
console.log(plus.apply(obj, [1, 2]));//4
//bind返回一个新函数
let res = plus.bind(obj,1,2);
console.log(res());//4

二、bind方法实现

先通过一个例子来看一下bind都做了什么

var obj = {name:"Smiley"};
var greeting = function(str, lang){this.value = 'greetingValue';console.log("Welcome "+this.name+" to "+str+" in "+lang);
};
var objGreeting = greeting.bind(obj, 'the world');
objGreeting('JS')

bind改变了greeting当中this的指向，使得this指向了obj，因此，this.name的内容是Smiley。最后，bind会返回一个函数。
我们可以在调用bind的时候，就可以开始给greeting传递参数。上面的例子当中，我们把’the world’作为greeting的第一个参数。
我们在调用objGreeting这个函数的时候，再传入剩余的参数。上面的例子中，第二个参数是’JS’作为第二个参数lang。
这个是MDN中提到的：“bind()函数会创建一个新绑定函数（bound function，BF）。绑定函数也可以使用new运算符构造，提供的this值会被忽略，但前置参数仍会提供给模拟函数”。有点晦涩，这也是bind实现中最复杂的一步，使用new关键字这种情况我们一会儿再分析。

接下来我们实现bind:

Function.prototype._bind = function(oThis){if(typeof this !== 'function'){throw new TypeError('被绑定的对象需要是函数')；}const self = this；// 将类数组对象转换成数组并截取const args = [].slice.call(arguments, 1);let func = function(){}；let fBound = function(){ // instanceof用来检测某个实例对象的原型链上是否存在这个构造函数的prototype属性，this instanceof func === true时,//说明返回的fBound被当做new的构造函数调用，此时this=fBound(){}，否则this=window, //如果是的话使用新创建的this代替硬绑定的thisreturn self.apply(this instanceof func ? this : oThis, args.concat([].slice.call(arguments)))；}//维护原型关系if(this.prototype){func.prototype = this.prototype；}//使fBound.prototype是func的实例，返回的fBound若作为new的构造函数，新对象的__proto__就是func的实例fBound.prototype = new func()；return fBound；}

bind()方法实现相关推荐

JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
JavaScript内置一些方法的实现原理--new关键字，call/apply/bind方法--前戏
new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...
手写bind_深入理解 JavaScript 之手写 call, apply, bind 方法
这是老生常谈的手写了,今天想自己试着实现一下,做个笔记. call 方法 Function.prototype.myCall = function (context) { if (context == ...
理解js中的this指向以及call，apply，bind方法
<script> function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.lo ...
Laravel Ioc容器singleton和bind方法的区别
Laravel中使用Ioc容器的singleton方法和bind方法创建实例有什么区别呢?它们两个都是返回一个类的实例,不同的是singleton是单例模式,而bind是每次返回一个新的实例,看下面的 ...
总结apply和call方法的使用 bind方法 bind方法的使用函数中的几个成员
总结apply和call方法的使用 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
面试官问：能否模拟实现JS的bind方法（高频考点）
可以点击上方的话题JS基础系列,查看往期文章写于2018年11月21日,发布在掘金阅读量1.3w+ 前言这是面试官问系列的第二篇,旨在帮助读者提升JS基础知识,包含new.call.apply.t ...
JS中的bind()方法
Function.prototype.bind()方法 bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()第一个参数的值,例 ...
jQuery 事件 - bind() 方法
定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 实例1(一个事件) 记得把js引用地址换掉当点击鼠标时,隐藏或显示 p 元素: <html&g ...
JavaScript的call，apply和bind方法之间的区别
by Rajat Saxena 通过拉贾特·萨克森纳(Rajat Saxena) JavaScript的call,apply和bind方法之间的区别 (The difference between J ...

bind()方法实现

文章目录

一、bind方法的作用？

二、bind方法实现

bind()方法实现相关推荐

最新文章

热门文章