处理this

2022-05-26 19:33:04 作者：互联网

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