本文介绍了call、apply、bind的用法和他们各自的实现原理。 call call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。...bind() 方法创建一个新的函数，不自动执行，需要手动调用bind() 。...基本版： bind的实现可以基于call和apply的基础上实现。...apply实现bind Function.prototype.mybind = function (context) { let that = this let bindargs = Array.prototype.slice.call...call实现bind Function.prototype.mybind = function (context, ...args1) { let that = this return function
// bind会返回一个硬绑定的新函数，新函数会使用指定的第一个thisCtx去调用原始函数，并将其它参数传给原始函数。...); } let fb11 = f1.myBind({ a: 1 }, 10); let bindFn1 = new fb11(); // undefined 10 因为 new 调用优先级高于 bind...3 }, 10); fb33(); // 3,10 let fb66 = fb22.myBind({ a: 6 }, 10)(); // 2,10 // fb66(); // 2,10 // 结论：bind...方法链式调用，都以第一次bind绑定为准，所以叫硬绑定，原理为 下一次 调用bind的方法为上一个bind方法返回的闭包，已经将 context、args 存储好并固定返回了 // 参考链接：https...let fs11 = f1.softBind({ a: 1 }, 10); let softbindFn1 = new fs11(); // undefined 10 因为 new 调用优先级高于 bind
可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。...# 示例 # 使用 call 方法调用父构造函数 在一个子构造函数中，可以通过调用父构造函数的 call 方法来实现继承，类似于 Java 中的写法。...this.sData); } display.call(); // TypeError: Cannot read properties of undefined (reading 'sData') # 实现...min = Math.min(submin, min); } return min; } var min = minOfArray([5, 6, 2, 3, 7]); // 2 # 实现...# Try it bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
initial-scale=1.0" /> Document // 手写实现...bind Function.prototype.bind = // Function.prototype.bind ||...getName1 = obj.getName; getName1(); // xiaoming let getName2 = obj.getName.bind...let getName4 = obj.getName.bind(obj, 111)(); // [111] xiaohong let getName5...= obj.getName.bind(obj, 111, 222)(); // [111, 222] iaohong let getName6 = obj.getName.bind
bind的受体是对象，返回的是个新的函数。 我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。 也就是无论怎么调用这个返回的函数都有同样的this值。...这就是bind的作用。 语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。...func2(); 例2 注意：bind只生效一次 function f(){ return this.a; } //this被固定到了传入的对象上 var g = f.bind({a:"azerty..."}); console.log(g()); // azerty var h = g.bind({a:'yoo'}); //bind只生效一次！...(this)); } 例4 使用bind可少写匿名函数 Clict Me!
title: 模拟实现 bind date: 2019/10/24 22:30:25 categories: 面试题 前端 ---- 模拟实现 bind 本文参考：深度解析bind原理、使用场景及模拟实现...基础 老样子，得先知道 bind 的用途、用法，才能来考虑如何去模拟实现它。...所以，bind 的应用场景：可以用来设定初始参数；可以用来绑定 this，在一些异步回调的场景中等等； 模拟实现 接下去讲讲模拟实现： bind 接收不定长的参数列表，第一个参数跟 call 和...那么，模拟实现 bind，我们主要就要关注这几点： 如何修改函数的 this 指向（可直接用 call/apply，或者模拟实现 call/apply 时用到的挂载到对象上的方式） 如何区分返回的新函数是否被用作构造函数使用...反正，大概清楚 bind 的工作职责，能把主要的工作模拟实现出来，也就差不多了。不过追求 100% 也是好事，望你加油！
我们都会遇到在执行函数的时候，如果需要保证函数内部this不被污染或者说需要使函数内部this指向到指定对象的时候，都会按情况分别使用到call、apply、bind方法来实现需求。...又分别如何实现的呢？...接下来，请准我一一道来并分别实现它们吧~ 正文 call、apply、bind的区别 bind bind与call或apply最大的区别就是bind不会被立即调用，而是返回一个函数，函数内部的this...的实现 call Function.prototype.call = function (context) { // 基础类型转包装对象 if (context === undefined |...那么此时this instanceof O 就为true，所以返回的this就是当前被实例化的对象；这样就会忽略掉bind方法的this指向，实现上述new一个bind后的函数特性。
最近在帮女朋友复习 JS 相关的基础知识，遇到不会的问题，她就会来问我。 ? 这不是很简单？三下五除二，分分钟解决。...第一层 - 绑定在原型上的方法 这一层非常的简单，得益于 JS 原型链的特性。...而改变 this , 我们可以通过已知的 apply 和 call 来实现，这里我们就暂且使用 apply 来进行模拟。首先通过 self 来保存当前 this，也就是传入的函数。...接下来我们还需要自己实现一个 new ， 而根据 MDN，new 关键字会进行如下的操作： 1.创建一个空的简单JavaScript对象（即{}）； 2.链接该对象（设置该对象的constructor）...实现了，如果你想了解更多细节的实践，可以查看。
js的call apply bind 方法都很常见，目的都是为了改变某个方法的执行环境（context） call call([thisObj[,arg1[, arg2[, [,.argN]]]]]...bind(thisArg [, arg1 [, arg2, …]]); bind 也是改变某个方法的执行环境，区别也在于第二个参数(也是一个个的参数形式）和“返回值”的特性。 ...如 func.call(func1,var1,var2,var3) 对应的apply写法为：func.apply(func1,[var1,var2,var3]) 对应的bind写法为： func.bind...注1：但IE9（包括IE9)以上的才支持bind 所以，在不支持bind的浏览器上，我们需要模拟一下 Function.prototype.Bind = function(context){ var...(); obj.sayName.Bind(window,'Hello: ',' !')
() 语法： fun.bind(thisArg,[arg1,arg2,…]) fun: 表示一个函数 thisArg: this要指向的对象，如果是null 和 undefined，则指向window全局对象...特性： fun.bind(thisArg,arg1,arg2,…) 不会立即调用fun函数，会返回一个新的指定了this的函数； bind方法将一个函数的对象上下文从初始的上下文改变为由 thisArg...(obj, 1, 2); // 返回的是一个新的指定了this的函数 newFun(); // 3 4. call()、apply()和bind()的应用 1. call() call 常用来继承，因为...下面例子： Son通过改变Father构造函数this指向问题，来获取Father里面的属性，实现继承的效果，Son还可以添加自己的额外属性： function Father(name, age) {...() 如果我们想改变某个函数内部的this指向，但又不需要立即调用该函数，此时用bind: 点击 let
谁调用当前的属性或者方法的,它就是谁 /* 2.1.bind方法作用 修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数给我们 注意点...: bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面 */ //call apply bind修改this的...console.log(this); } test(10,20); window.test(); let fn=test.bind...console.log(this); } } let p= new Person(); p.say(); let fn=p.say.bind
实现继承 通过call和apply，可以实现对象继承 var Parent = function(){ this.name = "csxiaoyao"; this.age = 25; }...obj.bind(thisObj, arg1, arg2, ...); 把obj绑定到thisObj，这时候thisObj具备了obj的属性和方法。...与call和apply不同的是，bind绑定后不会立即执行。...function add(j, k){ return j+k; } function sub(j, k){ return j-k; } console.log(add.bind(sub,...5, 3)); //function add(j, k){return j+k;} console.log(add.bind(sub, 5, 3)()); //8 如果bind的第一个参数是null或
有个实现call的过程，在来实现apply就容易多了。...bind的实现 原生的bind有两种方式 var tal = { name: "踏浪", sex: "男" } function person(age) { console.log(age...) console.log(this.name) console.log(this.sex) } person.bind(tal)(18) // 或者 person.bind(tal, 18...使用bind都需要调用两次，而第一次就是返回一个函数。原函数的参数可以在bind中调用，也可以在第二次运行时候调用。...call， apply， bind 这三种方法，能够更深刻的理解到这三个函数的原理，同时涉及到的只是点也多：this指向，arguments类数组，每一个对象都要的toSting方法（另一个是valueOf
前言 回想起之前的一些面试，几乎每次都会问到一个js中关于call、apply、bind的问题，比如… 怎么利用call、apply来求一个数组中最大或者最小值 如何利用call、apply来做继承 apply...(animal)(); 啦啦啦，有木有很神奇，控制台输出了三次cat 我们拿别人的showName方法，并动态改变其上下文帮自己输出了信息，说到底就是实现了复用 区别 上面看起来三个函数的作用差不多，...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...67,5,7,6,-8,687);Math.min.apply(Math, arr);Math.min.call(Math, 34,5,3,6,54,6,-67,5,7,6,-8,687); 将伪数组转化为数组 js...Array.prototype.slice.call(arrayLike); 上面arr便是一个包含arrayLike元素的真正的数组啦( 注意数据结构必须是以数字为下标而且一定要有length属性 ) 数组追加 在js
title.innerHTML = arr[i]; }, 30); play.className = 'play'; //更改样式直接用了一个class名字，这样js里省点代码。
之所以要写这篇，是因为曾经面试被要求在白纸上手写bind实现 结果跟代码一样清晰明确，一阵懵逼，没写出来！ 下面，撸起袖子就是干！~ 把call、apply、bind一条龙都整一遍！...arg1 + arg2)}const _this = { name: 'YIYING' }// 接受的是一个参数列表;方法立即执行fun.call(_this, 1, 2)// 输出：YIYING3手写实现.../** * 自定义Apply实现 * @param context 上下文this对象 * @param args 参数数组 */Function.prototype.ownApply =...定义与使用Function.prototype.bind(): developer.mozilla.org/zh-CN/docs/…// Function.prototype.bind()样例function...(_this)newFun(1, 2)// 输出：YIYING3手写实现/** * 自定义bind实现 * @param context 上下文 * @returns {Function} */
name) { console.log(this.animal,name); } var obj = { animal: 'cats' }; greet.apply(obj,['猫咪']); bind...：当绑定函数被调用时，bind传入的参数会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们后面。...var fun = function (name1,name2){ console.log(this); console.log(name); }.bind({a:1},"name1")...; fun("name2"); 手动实现 context 为可选参数，如果不传的话默认上下文为 window； context 创建一个 Symbol 属性，调用后即删除，不会影响context...const result = context[fn](...args); delete context[fn]; return result; } apply实现类似
1.面试官问：能否模拟实现JS的new操作符 2.面试官问：能否模拟实现JS的bind方法（本文） 3.面试官问：能否模拟实现JS的call和apply方法 4.面试官问：JS的this指向 5.面试官问...：JS的继承 用过React的同学都知道，经常会使用bind来绑定this。...另外前不久写过一篇文章：面试官问：能否模拟实现JS的new操作符。简单摘要：new做了什么： 1.创建了一个全新的对象。...所以相当于new调用时，bind的返回值函数bound内部要模拟实现new实现的操作。话不多说，直接上代码。...文章中的例子和测试代码放在github中bind模拟实现 github。bind模拟实现 预览地址 F12看控制台输出，结合source面板查看效果更佳。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
