汽车销售服务东莞网站建设,网站数据库建设方案,我要注册,竞价排名营销普通函数this指向
普通函数的调用方式决定了this的值#xff0c;即谁调用this的值指向谁
普通函数没有明确调用者时this值为window#xff0c;严格模式下没有调用者时this的值为undefined
箭头函数this指向
箭头函数中的this与普通函数完全不同#xff0c;也不受调用方式…普通函数this指向
普通函数的调用方式决定了this的值即谁调用this的值指向谁
普通函数没有明确调用者时this值为window严格模式下没有调用者时this的值为undefined
箭头函数this指向
箭头函数中的this与普通函数完全不同也不受调用方式的影响事实上箭头函数中并不存在this
1.箭头函数会默认帮我们绑定外层this的值所以在箭头函数中this的值和外层的this是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中一层一层查找this直到有this的定义
情况1在开发中【使用箭头函数前需要考虑函数中this的值】事件回调函数使用箭头函数时this为全局的window因此DOM事件回调函数如果里面需要DOM对象的this则不推荐使用箭头函数
情况2同样由于箭头函数this的原因基于原型的面向对象也不推荐采用箭头函数
总结
1.函数内不存在this沿用上一级的
过程向外层作用域中一层一层查找this直到有this的定义
2.不适用构造函数原型函数字面量对象中函数dom事件函数等
3.适用需要使用上层this的地方
4.使用正确的话它会在很多地方带来方便
改变this
call()--了解
使用call方法调用函数同时指定被调用函数中this的值
语法 fun.call(thisArg,arg1,arg2,...) thisArg:在fun函数运行时指定的this值 arg1,arg2:传递的其他参数 返回值就是函数的返回值因为它就是调用函数 apply()-理解
使用apply方法调用函数同时指定被调用函数中this的值
语法 fun.apply(thisArg,[argsArray]) thisArg:在fun函数运行时指定的this值 argsArray:传递的值必须包含在数组里面 返回值就是函数的返回值因为它就是调用函数 因此apply主要跟数组有关系比如使用Math.max()求数组的最大值 const obj {age: 18}function fn(x, y) {console.log(this)console.log(x y)}fn.apply(obj, [1, 2])
求最大值 const arr [100, 44, 77]const max Math.max.apply(Math, arr)const min Math.min.apply(Math, arr)console.log(max, min)
bind()-重点
bind()方法不会调用函数但是能改变函数内部this指向
语法 fun.bind(thisArg,arg1,arg2,...) thisArg:在fun函数运行时指定的this值 arg1,arg2传递的其他参数 返回由指定的this值和初始化参数改造的原函数拷贝新函数 因此当我们只是想改变this指向并且不想调用这个函数的时候可以使用bind比如改变定时器内部的this指向。
!doctype html
htmlheadmeta charsetutf-8meta nameAuthor content /meta nameKeywords content /meta nameDescription content /
/headbodybutton发送短信/buttonscriptconst btn document.querySelector(button)btn.addEventListener(click, function () {this.disabled truewindow.setTimeout(function () {this.disabled false}.bind(btn), 2000)})/script
/body/html
call,apply,bind总结
相同点都可以改变函数内部的this指向
区别点
1call和apply会调用函数并且改变函数内部this指向。
2call和apply传递的参数不一样call传递参数aru1,aru2...形式,apply必须数组形式[arg]
3bind不会调用函数可以改变函数内部this指向
主要应用场景
1call调用函数并且可以传递参数
2apply经常跟数组有关系比如借助于数学对象实现数组最大值最小值
3bind不调用函数但是还想改变this指向比如改变定时器内部的this指向
