您的位置 首页 > 数码极客

bind、bind软件

JavaScript是前端开发中的重要知识点,也是初学者需要重点学习的地方。今天给大家介绍的是JavaScript 中 call、apply、bind 用法和区别。

JavaScript 中有三个方法Func()、Func()和Func()可以用来指定函数 this 值。call() 和 apply() 类似,都是调用函数,并指定函数的 this 值thisArg和参数,区别在于call()传入参数是通过参数列表的形式arg1, arg2, ...,apply()传入参数是通过数组的形式[arg1, arg2, ...]:

(thisArg, arg1, arg2, ...) (thisArg, [arg1, arg2, ...])

bind()方法与前两个不同,它创建一个新的函数,在调用新函数时,会调用原函数,并指定原函数的 this 值和参数。bind() 执行的时候并没有调用函数。bind()传入参数的方式和call()一样,都是用参数列表:

(thisArg, arg1, arg2, ...)

用法

call()

使用call()调用父类构造函数来实现继承,也可以用apply(),只不过传参方式略有区别:

// 使用 call 实现继承 var Pet = function (name, age) { = name = age } var Cat = function (name, age, color) { Pet.call(this, name, age) = color } var cat = new Cat('Garfield', 1, 'orange') con) // Garfield con) // 1 con) // orange // 使用 apply 实现继承: var Dog = function (name, age, size) { Pet.apply(this, [name, age]) = size }

当调用一个对象的方法时,方法中 this 指向的是对象本身,用call()改变方法的 this 值:

var utils = { setName: function (name) { = name } } // 使用 call 指定 setName 中的 this 指向自己 var Person = function (name) { u(this, name) } var p = new Person('John') con) // 'John'

apply()

apply()方法除了用来指定函数 this 值,还可以用来传递参数。例如,Ma()允许传入多个参数,求它们的最大值,可以用apply()方法将数组元素作为参数传递给Ma()方法:

 

// 使用循环求最大值 var numbers = [1, 0, 0, 8, 6], max = -Infinity for (var i = 0; i < numbers.length; i++) { max = Ma(numbers[i], max) } // 使用 apply 求最大值,代码更简洁 var numbers = [1, 0, 0, 8, 6] max = Ma.apply(null, numbers) // 使用 apply 给数组添加元素 var numbers = [1, 0, 0, 8, 6], arr = [] arr.(arr, numbers)

另外,因为 JS 引擎有参数长度的限制,如果参数数组太长,可能会造成程序异常。所以,对于超长参数数组,应切分成更小的尺寸,分多次调用该方法。

bind()

在给setTimeout和setInterval传入函数时,函数中 this 指向的是全局 window 对象。使用bind()方法,重新指定 this 值:

var Person = function (name) { = name } Per = function () { setTimeout(function () { con('My name is ' + ) }.bind(this)) } var p = new Person('John') p.say() // My name is John

在给 Dom 对象添加监听函数时,监听函数作为 Dom 对象的一个方法,函数中 this 指向的是 Dom 对象。使用bind()方法,重新指定 this 值,使用箭头函数也可以达到同样的效果:

var fakeDom = { a: 'fakeDom' } var addEvent = function () { = 'addEvent' = function () { con() } Bind = function () { con() }.bind(this) Arrow = () => { con() } } addEvent() () // 'fakeDom' Bind() // 'addEvent' Arrow() // 'addEvent'

使用bind()绑定参数后,新函数只需要传入剩余参数:

var add = function (a, b) { return a + b } var add5 = add.bind(null, 5) con(add5(3)) // 8

以上就是给大家介绍JavaScript 中 call、apply、bind 用法和区别,更多web前端学习资料,可以关注“武汉千锋”微信公众号!

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“bind,bind软件,bind是什么意思,binding”边界阅读