apply && call && bind三者的区别和联系 水深无声 2022-04-03 14:50 181阅读 0赞 ## apply && call && bind三者的区别 ## #### apply #### * 只有两个参数 - 第一个参数 :**设置函数内部this的指向**;第二个参数:**是一个数组** * 使用的方式 function fn(x, y) { console.log(this) // {name: "ls"} console.log(x + y) // 3 } var obj = { name: 'ls' } fn.apply(obj, [1, 2]) //结果如上面注释 * 可以看出,它的作用是改变函数中的this,并调用函数 * 实战–打印一个数组中的最大值 var arr = [333,22,55,14,55,0,22.77,21.77] var maxNumber = Math.max.apply(null,arr) console.log(maxNumber) //333 #### bind #### * 作用 > bind()方法创建一个新的函数,在调用时设置this关键字为提供的值。并在调用新函数时,将给定参数列表作为原函数的参数序列的前若干项。 * 语法 > function.bind(thisArg\[, arg1\[, arg2\[, …\]\]\]) * 返回值 > 返回一个原函数的拷贝,并拥有指定的this值和初始参数。 * 通俗来讲:bind()方法主要改变this的指向,不会调用函数,而是把函数复制一份。第一个参数 设置函数内部this的指向,其它参数,对应函数的参数 function fn1(x,y){ console.log(this) // obj1 console.log(x+y) // 2 } var obj1 = { name:'bind' } var f1 = fn1.bind(obj1,1,1) //本身不会调用函数 f1() //结果看上面注释 #### call #### > 注意:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。 > fun.call(thisArg, arg1, arg2, …) * call的使用 function fn2(x,y){ console.log(this) // obj2 console.log(x+y) // 4 } var obj2 = { name:'bind' } console.log(fn1.call) var f2 = fn1.call(obj1,2,2) * 在严格模式下this的值将会是undefined 'use strict'; var sData = 'Wisen'; function display() { console.log('sData value is %s ', this.sData); } display.call(); // Cannot read the property of 'sData' of undefined * 应用场景–借用构造函数使用call实现继承 function Person(name,age,gender){ this.name = name this.age = age this.gender = gender } Person.prototype.eat = function(){ console.log('food') } function Son(name,age,gender){ Person.call(this,name,age,gender) } var son = new Son('xwh',18,0) console.log(son) //new的实例对象son返回的只是一个对象 #### 总结主要点 #### * 相同点 都是改变this的指向,call的返回值就是函数的返回值 * 不同点 传参的方式不一致 bind复制函数但不调用,apply和call直接调用函数
还没有评论,来说两句吧...