js 中bind的实现原理_js bind 实现原理_js bind原理 - 腾讯云开发者社区

// bind会返回一个硬绑定的新函数，新函数会使用指定的第一个thisCtx去调用原始函数，并将其它参数传给原始函数。...硬绑定会降低函数的灵活性，在绑定之后不能通过显式或硬绑定的方式改变this，只能通过new改变 // softBind 会对指定的函数进行封装，首先检查调用时的 this，如果 this 绑定到全局对象或者...(); // 3,10 let fb66 = fb22.myBind({ a: 6 }, 10)(); // 2,10 // fb66(); // 2,10 // 结论：bind方法链式调用，都以第一次...bind绑定为准，所以叫硬绑定，原理为下一次调用bind的方法为上一个bind方法返回的闭包，已经将 context、args 存储好并固定返回了 // 参考链接：https://juejin.cn...改变的this 指向

7031 0

说下js中的bind

bind的受体是对象，返回的是个新的函数。我们知道this总是指向调用他的对象。但是有时候我们希望‘固化’这个this。也就是无论怎么调用这个返回的函数都有同样的this值。...这就是bind的作用。语法 fun.bind(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。...this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。 arg1, arg2, ... 当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。...func2 = sayColor.bind(this); // 输出 "red", 因为传的是this，在全局作用域中this代表 window。...func2(); 例2 注意：bind只生效一次 function f(){ return this.a; } //this被固定到了传入的对象上 var g = f.bind({a:"azerty

2.2K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

手写js中的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

1.6K2 0

JS中call apply bind的用法

谁调用当前的属性或者方法的,它就是谁 /* 2.1.bind方法作用修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数给我们注意点...: bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面 */ //call apply bind修改this的.../*call:修改函数或者方法中的this为指定的对象, 并且会立即调用修改之后的函数注意点: call方法除了可以修改this以外, 还可以传递参数, */.../*apply:修改函数或者方法中的this为指定的对象, 并且会立即调用修改之后的函数注意点: apply方法除了可以修改this以外, 还可以传递参数, 只不过参数必须通过数组的方式传递...console.log(this); } test(10,20); window.test(); let fn=test.bind

2.9K3 0

解析js中的call、apply、bind

或者说thisObj继承了obj的属性和方法，绑定后会立即执行函数。唯一区别是apply接受的是数组参数，call接受的是连续参数。...实现继承通过call和apply，可以实现对象继承 var Parent = function(){ this.name = "csxiaoyao"; this.age = 25; }...(child);//Object {name: "csxiaoyao", age: 25} bind obj.bind(thisObj, arg1, arg2, ...); 把obj绑定到thisObj...与call和apply不同的是，bind绑定后不会立即执行。...5, 3)); //function add(j, k){return j+k;} console.log(add.bind(sub, 5, 3)()); //8 如果bind的第一个参数是null或

1.8K2 0

call、apply、bind实现原理

本文介绍了call、apply、bind的用法和他们各自的实现原理。 call call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。...call和apply的实现，都是使用将函数放到字面量obj的某个属性中，使函数中的this指向obj这个字面量对象。...用法将函数中的this指向传入的第一个参数，第二个参数为数组。...基本版： bind的实现可以基于call和apply的基础上实现。...因为bind不是立即执行的，所以可以通过返回一个函数，让用户手动执行。在返回函数中利用call或者apply传入指定的this对象和参数。

2971 0

JS中的bind、apply、call的理解

概要 call、apply、bind 都是用来修改函数中的this，传参时，call是一个个传参，apply是数组形式传参，call和apply立即执行并且返回值是你调用的方法的返回值，若该方法没有返回值...bind是改变this后返回一个新的函数，他不会立即执行。这三个方法不会改变原方法的this的指向。 Bind 复制原方法传入新的this指向后生成新方法，参数可传多个。...console.info(this.name + "和" + name + "一块玩"); } }; let b = { name: "小红" }; a.play("小刚"); a.play.bind..." }; a.play("小刚", "小李"); a.play.apply(b, ["小刚", "小李"]); 显示小明和小刚、小李一块玩小红和小刚、小李一块玩结论： call、apply、bind...是Function.prototype下的方法，作用是执行一下目标函数，执行时顺便把目标函数中的this改一下，然后把结果输出，执行后，不会影响原函数中的this！

9241 0

js中call、apply、bind那些事

前言回想起之前的一些面试，几乎每次都会问到一个js中关于call、apply、bind的问题，比如… 怎么利用call、apply来求一个数组中最大或者最小值如何利用call、apply来做继承 apply...(animal)(); 啦啦啦，有木有很神奇，控制台输出了三次cat 我们拿别人的showName方法，并动态改变其上下文帮自己输出了信息，说到底就是实现了复用区别上面看起来三个函数的作用差不多，...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...中的伪数组(例如通过document.getElementsByTagName获取的元素)具有length属性，并且可以通过0、1、2…下标来访问其中的元素，但是没有Array中的push、pop等方法...length属性 ) 数组追加在js中要往数组中添加元素，可以直接用push方法， 1234567 var arr1 = [1,2,3];var arr2 = [4,5,6];[].push.apply

1.7K5 0

js中call、apply、bind那些事

前言回想起之前的一些面试，几乎每次都会问到一个js中关于call、apply、bind的问题，比如… 怎么利用call、apply来求一个数组中最大或者最小值如何利用call、apply来做继承 apply...(animal)(); 啦啦啦，有木有很神奇，控制台输出了三次cat 我们拿别人的showName方法，并动态改变其上下文帮自己输出了信息，说到底就是实现了复用区别上面看起来三个函数的作用差不多，干的事几乎是一样的...call、apply、bind的常见应用场景。...中的伪数组(例如通过document.getElementsByTagName获取的元素)具有length属性，并且可以通过0、1、2…下标来访问其中的元素，但是没有Array中的push、pop等方法...length属性 ) 数组追加在js中要往数组中添加元素，可以直接用push方法， var arr1 = [1,2,3]; var arr2 = [4,5,6]; [].push.apply

1.6K6 0

js中this指向问题及call，apply，bind的区别

js中this指向问题及call，apply，bind的区别# 1 this指向# 1.1 what is 'this'?...# 在 ECMAScript 5 中，函数内部存在两个特殊的对象:arguments（一个类数组对象，包含调用函数时传入的所有参数）和 this（本文将要讲的）。...1.2 标准函数与箭头函数的this指向# this在标准函数与箭头函数中的时会有两种不同类型的指向行为。...1.2.1 标准函数的this指向# 在标准函数中，this 指向的是把函数当成方法调用的上下文对象。也就是说在哪里调用的这个函数，那这个this只会指向它外面最靠近它的对象。...可以向cally一样传参，例如: a.say.bind(b, '男', 'UNO')() // 但由于bind返回的仍然是一个函数，所以我们还可以在函数调用的时候再进行传参。

1.1K2 0

JavaScript中call,apply,bind方法的使用及原理

当我们定义一个新的对象，需要使用其他对象的方法的时候，我们不需要重新开发重复的方法逻辑，借助apply,apply,bind三个方法可以实现对这些的方法的调用。...bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用，第一个thisArg在setTimeout中创建一个函数时传递的原始值都会转化成...特点: apply，call，bind三个方法第一个参数都是函数在调用时this指向的对象,也就是运行时的上下文（this显示绑定的原理） apply，call第一个参数为空，null，undefined...(cacheFun); cacheNameByBind(); // Name is cache 实现原理 apply Function.prototype.applyFun = function(content...、使用场景及实现 MDN(Function) MDN(Function.prototype.bind())

1.1K2 0

JS 的 call apply bind 方法

js的call apply bind 方法都很常见，目的都是为了改变某个方法的执行环境（context） call call([thisObj[,arg1[, arg2[, [,.argN]]]]]...注1：但IE9（包括IE9)以上的才支持bind 所以，在不支持bind的浏览器上，我们需要模拟一下 Function.prototype.Bind = function(context){ var...self = this, // 获取到bind第二个参数（中的所有参数） args = Array.prototype.slice.call(arguments...self.apply(context,args); }; }; 注2： Function.prototype的apply和call是在1999年发布的ECMA262 Edition3中才加入的...在此前的的浏览器如IE5.01(JScript 5.0)中是没有apply和call的。因此也会带来一些兼容性问题。

1.5K3 0

React.js中JSX的原理与关键实现

babel/core @babel/preset-env -D安装jsx支持依赖npm install @babel/plugin-transform-react-jsx -D配置在根目录下创建main.js.../main.js’},module:{rules:[{test:/.js$/,use:{loader:‘babel-loader’,options:{presets:[’@babel/preset-env...],plugins:[[’@babel/plugin-transform-react-jsx’,{pragma:‘createElement’}]] // 自定义设置pragma参数，我也可以设置为我的名字...：maomin}}}]},mode:‘development’,optimization:{minimize: false}}创建一个reactJsx.js文件此文件为主要逻辑文件。...开发reactJsx.js// 封装创建Dom节点class ElementWrapper {constructor(type) {this.root = document.createElement(

1.9K3 0

React.js中JSX的原理与关键实现

/main.js' }, module:{ rules:[ { test:/\.js$/, use:{ loader:'babel-loader...plugins:[['@babel/plugin-transform-react-jsx',{pragma:'createElement'}]] // 自定义设置pragma参数，我也可以设置为我的名字.../ 组件 export class Component { constructor() { this.props = Object.create(null); // 创建一个原型为null的空对象..._root; } } // 创建节点，createElement对照 webapck.config.js 中pragma参数。...e.appendChild(child); } } }; insertChildren(children); return e; } // 添加到Dom中

1.6K1 0

js 实现 bind 的这五层，你在第几层？

最近在帮女朋友复习 JS 相关的基础知识，遇到不会的问题，她就会来问我。 ? 这不是很简单？三下五除二，分分钟解决。...第一层 - 绑定在原型上的方法这一层非常的简单，得益于 JS 原型链的特性。..._bind(obj)(); // 1 可能很多朋友都止步于此了，因为在一般的面试中，特别是一些校招面试中，可能你只需要知道前面两个就差不多了。...但是想要在面试中惊艳所有人，仍然是不够的，接下来我们继续我们的探索与研究。第三层 - 支持柯里化函数柯里化是一个老生常谈的话题，在这里再复习一下。...bind 实现了，如果你想了解更多细节的实践，可以查看。

5502 0

Js中的call vs apply vs bind及记忆方式

前言 js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined...call() call()是apply()的一颗语法糖，作用和apply()一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。 ?...bind() bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后...用apply()模拟实现bind()： ?...、apply()和bind()都是用来改变函数执行时的上下文，可借助它们实现继承；call()和apply()唯一区别是参数不一样，call()是apply()的语法糖；bind()是返回一个新函数，供以后调用

1.4K4 0

通过自己实现函数 call,apply,bind 来了解他们的原理

我们知道函数中的call，apply，bind都是可以修改函数的this指向。关于函数的this指向问题可以转到Javascript this 指向问题这篇文章。...函数内部实现在这个传入的对象中绑定上我们需要执行的这个函数，即context.fn = this一行。最后调用context.fn()。...bind的实现原生的bind有两种方式 var tal = { name: "踏浪", sex: "男" } function person(age) { console.log(age...使用bind都需要调用两次，而第一次就是返回一个函数。原函数的参数可以在bind中调用，也可以在第二次运行时候调用。...call， apply， bind 这三种方法，能够更深刻的理解到这三个函数的原理，同时涉及到的只是点也多：this指向，arguments类数组，每一个对象都要的toSting方法（另一个是valueOf

7654 0

手写JS函数的call、apply、bind

之所以要写这篇，是因为曾经面试被要求在白纸上手写bind实现结果跟代码一样清晰明确，一阵懵逼，没写出来！下面，撸起袖子就是干！~ 把call、apply、bind一条龙都整一遍！...;方法立即执行fun.call(_this, 1, 2)// 输出：YIYING3手写实现/** * 自定义call实现 * @param context 上下文this对象 * @param args...arg2) { console.log(this.name) console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的...this指向，返回新function对象const newFun = fun.bind(_this)newFun(1, 2)// 输出：YIYING3手写实现/** * 自定义bind实现 * @param...arg2) { console.log(this.name) console.log(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的

1.2K2 0

Javascript中的bind详解

' console.log((function(){}).bind().length); // 0 由此可以得出结论2： 1、调用bind的函数中的this指向bind()函数的第一个参数。...original原函数的this指向的就是这个新对象。另外前不久写过一篇文章：面试官问：能否模拟实现JS的new操作符。简单摘要： new做了什么： 1.创建了一个全新的对象。...所以相当于new调用时，bind的返回值函数bound内部要模拟实现new实现的操作。话不多说，直接上代码。...3、es5-shim源码模拟实现bind时用Function实现了length。事实上，平时其实很少需要使用自己实现的投入到生成环境中。但面试官通过这个面试题能考察很多知识。...另外觉得写得不错，可以点个赞，也是对笔者的一种支持。文章中的例子和测试代码放在github中bind模拟实现 github。

1.6K3 2

手写JS函数的call、apply、bind

1K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

手写实现 js 中的bind,并实现 softBind

说下js中的bind

手写js中的bind

JS中call apply bind的用法

解析js中的call、apply、bind

call、apply、bind实现原理

JS中的bind、apply、call的理解

js中call、apply、bind那些事

js中call、apply、bind那些事

js中this指向问题及call，apply，bind的区别

JavaScript中call,apply,bind方法的使用及原理

JS 的 call apply bind 方法

React.js中JSX的原理与关键实现

React.js中JSX的原理与关键实现

js 实现 bind 的这五层，你在第几层？

Js中的call vs apply vs bind及记忆方式

通过自己实现函数 call,apply,bind 来了解他们的原理

手写JS函数的call、apply、bind

Javascript中的bind详解

手写JS函数的call、apply、bind

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐