处理this

2022-05-26 19:33:04 阅读：150 来源： 互联网

this指向

普通函数this指向

目标：能说出普通函数的this指向

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】

// 普通函数
function fn () {
  console.log(this)//window,调用者
}
window.fn()
document.addEventListener('click',fn)//this:document


// 定时器函数
window.setTimeout(function () {
  console.log(this)//window,调用者  
},200)


// 方法
const obj = {
  uname : '小明',
  eat : function () {
    console.log(this)//obj,调用者  
  }
}
obj.eat()


// 构造函数
function Person (uname) {
  this.uname = uname
  console.log(this)//当前实例对象   
}
new Person('小明')


// 自执行函数
;(function () {
  console.log(this)//window,调用者  
})()


// 事件处理函数
document.addEventListener('click', function () {
  console.log(this)//window,调用者  
})

注意：

普通函数没有明确调用者时 this 值为 window
普通函数严格模式下没有调用者时 this 的值为 undefined

// 开启严格模式
// 'use strict'放在作用域最开头，只对该作用域有影响
'use strict'
// 严格模式：
// 变量必须声明
// 函数形参不能重名
// 严格模式下普通函数没有调用者时 this 的值为 undefined
function fn () {
  console.log(this)//undefined
}
fn()

// 函数表达式
const fn1 = function () {
  console.log(this)//undefined
}
fn1()

// 自执行函数
;(function () {
  console.log(this)//undefined 
})()


// 定时器
setTimeout(function () {
  console.log(this)//window,调用者  
},200)

// 构造函数
function Person (uname) {
  this.uname = uname
  console.log(this)//当前实例对象   
}
new Person('小明')


// 事件处理函数
document.addEventListener('click', function () {
  console.log(this)// document,调用者  
})

箭头函数this指向

目标：能说出箭头函数的this指向

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！

箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的
箭头函数中的this引用的就是最近作用域中的this
向外层作用域中，一层一层查找this，直到有this的定义

总结：

箭头函数内不存在this，沿用上一级的
不适用：构造函数，原型函数，dom事件函数等等
适用：需要使用上层this的地方

改变this

动态指定普通函数中 this 的指向有 3 个方法：

call()

作用：调用函数，并可以改变被调用函数里面的this指向

语法：fn.call(thisArg, arg1, arg2, ...)

thisArg：在fn 函数运行时指定的 this 值

arg1，arg2：实参，传递的其他参数

返回值就是函数的返回值，因为它就是调用函数

function fn(a, b) {
  console.log(this, a, b)
  return a * b
}

const obj = {uname : '小明', age : 18}

// 在执行的过程中改变this
const re = fn.call(obj, 1, 2)
console.log(re)//2

let o = {
  uname : '小明2',
  age : 20,
  fei : function () {
    console.log(this)
  }
}

o.fei()//this=>o
o.fei.call(obj)//this=>obj

apply()

作用：调用函数，同时指定被调用函数中 this 的值

语法：fun.apply(thisArg, [argsArray])

thisArg：在fun函数运行时指定的 this 值

argsArray：传递的值，必须包含在数组里面

返回值就是函数的返回值，因为它就是调用函数

因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

// 在执行的过程中改变this
const re = fn.apply(obj, [3,2])
console.log(re)//6


// 求最值
const arr = [1, 4, 3, 7, 2]

console.log(Math.max.apply(null, arr))//7
console.log(Math.max(...arr))//7

bind()

作用：不会调用函数。但是能改变函数内部this 指向

语法：fun.bind(thisArg, arg1, arg2, ...)

thisArg：在 fun 函数运行时指定的 this 值

arg1，arg2：传递的其他参数

返回由指定的 this 值和初始化参数改造的原函数拷贝（新函数）

// bind()不会调用函数。但是能改变函数内部this 指向
// 返回由指定的 this 值和初始化参数改造的 原函数拷贝 （新函数）
const re = fn.bind(obj,3,4)
re()

call apply bind 总结

相同点:

都可以改变函数内部的this指向.
区别点:

call 和 apply 会调用函数, 并且改变函数内部this指向.

call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2..形式 apply 必须数组形式[arg]

bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:

call 调用函数并且可以传递参数

apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值

bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指

标签：function,console,函数,处理,调用函数,fn,log
来源： https://www.cnblogs.com/yyshow/p/16314630.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9