js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]]]...将被用作当前对象的对象。 arg1, arg2, argN .. 可选项。将被传递方法参数序列。...bind bind(thisArg [, arg1 [, arg2, …]]); bind 也是改变某个方法的执行环境,区别也在于第二个参数(也是一个个的参数形式)和“返回值”的特性。 ...注1:但IE9(包括IE9)以上的才支持bind 所以,在不支持bind的浏览器上,我们需要模拟一下 Function.prototype.Bind = function(context){ var...,1); // 返回一个新的函数 return function(){ // 将相关参数赋给这个bind所在方法,并将执环境赋给context return
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 指向。...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
该方法的语法和作用与 apply() 方法类似,只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组。...# 描述 call() 允许为不同的对象分配和调用属于一个对象的函数/方法。 call() 提供新的 this 值给当前调用的函数/方法。...call() 方法的作用和 apply() 方法类似,区别就是 call() 方法接受的是参数列表,而 apply() 方法接受的是一个参数数组。...# Try it bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。...# 描述 bind() 函数会创建一个新的绑定函数(bound function,BF)。
或者说thisObj继承了obj的属性和方法,绑定后会立即执行函数。唯一区别是apply接受的是数组参数,call接受的是连续参数。...add.apply(sub, [5, 3]); //8 sub具有了add的属性和方法 sub(5, 3); //2 sub.call(add, 5, 3); //2 add具有了sub的属性和方法...绑定到thisObj,这时候thisObj具备了obj的属性和方法。...与call和apply不同的是,bind绑定后不会立即执行。...5, 3)); //function add(j, k){return j+k;} console.log(add.bind(sub, 5, 3)()); //8 如果bind的第一个参数是null或
谁调用当前的属性或者方法的,它就是谁 /* 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
前言 这是面试官问系列的第二篇,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。 面试官问系列文章如下:感兴趣的读者可以点击阅读。...1.面试官问:能否模拟实现JS的new操作符 2.面试官问:能否模拟实现JS的bind方法(本文) 3.面试官问:能否模拟实现JS的call和apply方法 4.面试官问:JS的this指向 5.面试官问...:JS的继承 用过React的同学都知道,经常会使用bind来绑定this。...2、传给bind()的其他参数接收处理了,bind()之后返回的函数的参数也接收处理了,也就是说合并处理了。 3、并且bind()后的name为bound + 空格 + 调用bind的函数名。...original原函数的this指向的就是这个新对象。另外前不久写过一篇文章:面试官问:能否模拟实现JS的new操作符。简单摘要:new做了什么: 1.创建了一个全新的对象。
之所以要写这篇,是因为曾经面试被要求在白纸上手写bind实现 结果跟代码一样清晰明确,一阵懵逼,没写出来! 下面,撸起袖子就是干!~ 把call、apply、bind一条龙都整一遍!...context : window) // 防止覆盖掉原有属性 const key = Symbol() // 这里的this为需要执行的方法 context[key] = this // 方法执行...context : window) // 防止覆盖掉原有属性 const key = Symbol() // 这里的this为需要执行的方法 context[key] = this // 方法执行...fun.ownApply(_this, [1, 2])// 输出:YIYING3参考:前端手写面试题详细解答bind定义与使用Function.prototype.bind(): developer.mozilla.org...(arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的this指向,返回新function对象const newFun = fun.bind(
https://blog.csdn.net/sinat_35512245/article/details/53956560 在WebStorm中,使用Vue的v-bind:class,结果报错,...错误提示:Namespace “v-bind” is not bound,如下: ?...其实这不是代码问题,而是WebStorm本身自己的问题,要想解决这个问题也非常简单,只要在WebStorm设置中: Settings -> Editor -> Inspections找到XML,把...Unbound XML namespace prefix的勾去掉即可。
之所以要写这篇,是因为曾经面试被要求在白纸上手写bind实现 结果跟代码一样清晰明确,一阵懵逼,没写出来! 下面,撸起袖子就是干!~ 把call、apply、bind一条龙都整一遍!...context : window) // 防止覆盖掉原有属性 const key = Symbol() // 这里的this为需要执行的方法 context[key] = this // 方法执行...context : window) // 防止覆盖掉原有属性 const key = Symbol() // 这里的this为需要执行的方法 context[key] = this // 方法执行...fun.ownApply(_this, [1, 2])// 输出:YIYING3bind定义与使用Function.prototype.bind(): developer.mozilla.org/zh-CN...arg1 + arg2)}const _this = { name: 'YIYING' }// 只变更fun中的this指向,返回新function对象const newFun = fun.bind(_
概要 call、apply、bind 都是用来修改函数中的this, 传参时,call是一个个传参,apply是数组形式传参,call和apply立即执行并且返回值是你调用的方法的返回值,若该方法没有返回值...bind是改变this后返回一个新的函数,他不会立即执行。 这三个方法不会改变原方法的this的指向。 Bind 复制原方法传入新的this指向后生成新方法,参数可传多个。...(b)("小刚"); 显示 小明和小刚一块玩 小红和小刚一块玩 Call 调用原方法传入新的this指向,第一个参数为this的指向对象,后面可传多个参数。...name: "小红" }; a.play("小刚", "小李"); a.play.call(b, "小刚", "小李"); 显示 小明和小刚、小李一块玩 小红和小刚、小李一块玩 Apply 调用原方法传入新的...是Function.prototype下的方法,作用是执行一下目标函数,执行时顺便把目标函数中的this改一下,然后把结果输出,执行后,不会影响原函数中的this!
在 JavaScript 中,bind() 方法是函数对象的一个内置方法,用于创建一个新的函数,并将其绑定到指定的对象作为该函数的上下文(即 this 值)。...绑定后的函数可以在后续调用时保持绑定的上下文不变。 bind() 方法的语法如下: function.bind(thisArg[, arg1[, arg2[, ...]]])...bind() 方法返回一个新的绑定函数,它与原始函数具有相同的函数体和作用域,但具有固定的上下文。...bind() 方法还可以用于预设函数的参数。通过在 bind() 方法的第二个参数开始传递参数,可以固定部分或全部参数的值,而不影响绑定后函数的上下文。.../ 输出:8 使用 bind() 方法将 add() 函数绑定到 null 上下文,并预设了第一个参数为 5。
本文来自我的github 0.前言 这些都是js基础进阶的必备了,有时候可能一下子想不起来是什么,时不时就回头看看基础,增强硬实力。...= 1 } var f = new F() call、apply、bind 指向传入函数的第一个参数。...则这个this指向b 对象的方法 对象内部的方法指向对象本身 var obj = { value: 5, printThis:...} } 此外,需要注意的,一个函数被bind后,以后无论怎么用call、apply、bind,this指向都不会变,都是第一次bind的上下文 3.从call到继承 首先,js没有严格意义上的子类父类...因为都有各自的缺陷,所以就有一种组合继承,将构造函数继承和prototype继承混合起来,方法写在父类的prototype上,是比较常见的方法。
特性: fun.call(thisArg,arg1,arg2,…) 会立即调用fun函数; call 方法将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象,如果没有提供 thisArg...特性: fun.apply(thisArg,[arg1,arg2,…]) 会立即调用fun函数; apply方法将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象,如果没有提供...特性: fun.bind(thisArg,arg1,arg2,…) 不会立即调用fun函数,会返回一个新的指定了this的函数; bind方法将一个函数的对象上下文从初始的上下文改变为由 thisArg...(obj, 1, 2); // 返回的是一个新的指定了this的函数 newFun(); // 3 4. call()、apply()和bind()的应用 1. call() call 常用来继承,因为...() 如果我们想改变某个函数内部的this指向,但又不需要立即调用该函数,此时用bind: 点击 let
call 方法的实现 先看测试示例,搞懂call方法是干什么用的 const animal = { name: "小鸟" } function foo(num1, num2) { console.log...修改了foo 函数的this指向 (指向了我们上方定义的animal对象) 只有函数类型才可以调用该方法 调用call 方法之后 会立即执行原函数(调用者) 有了上方的总结之后,我们便可以实现一下call...解决this 的指向问题 Function.prototype.myCall = function(ctx){ // 创建不会和this指向的对象里面的重名的属性(方法) const key...其实apply 和 call 方法非常相似,唯一的区别就是再调用的时候传参的方式的不同 参数传递方式: call 方法接受参数的方式是直接列出每个参数。...接收参数时候的不同, 因为第二个参数是一个数组 bind方法的实现 这里我们通过调用call 直接修改返回新函数的this指向 // 1.
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如… 怎么利用call、apply来求一个数组中最大或者最小值 如何利用call、apply来做继承 apply...、call、bind的区别和主要应用场景 虽然网上有很多关于这方面的博客和文章,但还是决定写一篇自己对这方面知识的理解。...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...我们可以利用call、apply来将其转化为真正的数组这样便可以方便地使用数组方法了。...length属性 ) 数组追加 在js中要往数组中添加元素,可以直接用push方法, 1234567 var arr1 = [1,2,3];var arr2 = [4,5,6];[].push.apply
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call、apply、bind的问题,比如… 怎么利用call、apply来求一个数组中最大或者最小值 如何利用call、apply来做继承 apply...所以其实他们干的事从本质上讲都是一样的动态的改变this上下文,但是多少还是有一些差别的.. call、apply与bind的差别 call和apply改变了函数的this上下文后便执行该函数,而bind...call、apply、bind的常见应用场景。...我们可以利用call、apply来将其转化为真正的数组这样便可以方便地使用数组方法了。...length属性 ) 数组追加 在js中要往数组中添加元素,可以直接用push方法, var arr1 = [1,2,3]; var arr2 = [4,5,6]; [].push.apply
函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕不开这些基础常用的...目录 call,apply,bind的基本介绍 call/apply/bind的核心理念:借用方法 call和apply的应用场景 bind的应用场景 中高级面试题:手写call/apply、bind...调用call/apply/bind的必须是个函数 call、apply和bind是挂在Function对象上的三个方法,只有函数才有这些方法。...当然是借用 A 对象的方法啦,既达到了目的,又节省了内存。 这就是call/apply/bind的核心理念:借用方法。 借助已实现的方法,改变方法中数据的this指向,减少重复代码,节省内存。...关于js事件循环机制不理解的同学,可以看我这篇博客:Js 的事件循环(Event Loop)机制以及实例讲解 那么如何使他输出: 1,2,3,4,5呢?
// 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.../post/6921897996258918413 // bind方法分别多次调用,各自都可绑定成功 console.log("================="); // softBind globalThis
在js中所有函数都会自带改变this指向的三大方法 1. call fn.call(对象,参数1,参数2....) 执行函数,并改变函数内部的this,指向传入的第一个参数对象。...执行函数,除了将后面的参数放到一个数组,其他和call完全一样 3.bind fn.bind(对象,参数1,参数2...) 不执行函数,而是返回一个函数。其参数格式和call一样
领取专属 10元无门槛券
手把手带您无忧上云