ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

【JavaScript】确定和指定 this 的值

2026/9/15 13:43:51 拓冰建站 浏览量
【JavaScript】确定和指定 this 的值

确定 this

在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。

  1. 全局执行环境中,指向全局 window 对象(非严格模式、严格模式)
  2. 函数内部,取决于函数被调用的方式
    1. 直接调用的this值:① 非严格模式:全局对象(window) ② 严格模式:undefined
    2. 对象方法调用的this值:① 调用者
    /*** 如何确认this的值* 1.全局执行环境*   严格模式,非严格模式:全局对象(window)* 2.函数内部*  2.1 直接调用*   严格模式下:undefined*   非严格模式:全局对象(window)*  2.2 对象方法调用*   严格模式,非严格模式:调用者* 3.开启严格模式*   脚本开启: 'use strict'*   函数内部开启:'use strict'*   注意:'use strict'写在代码顶端* */// ------------- 1.全局执行环境 -------------//  严格模式,非严格模式 全局对象(window)// 'use strict'// console.log(this)// ------------- 2.函数内部 -------------// 2.1 直接调用-非严格模式// function func() {//   console.log(this) // window// }// func()// 2.1 直接调用-严格模式// function func() {//   'use strict'//   console.log(this) // undefined// }// func()// 2.2 对象方法调用const food = {name: '猪脚饭',eat() {'use strict'console.log(this)}}// 非严格模式,严格模式food.eat() // 调用者

指定 this

可以通过两种方法指定this:

  1. 调用时指定:
    1. call方法
    2. apply方法
  2. 创建时指定:
    1. bind方法
    2. 箭头函数
    /*** 如何指定this的值:*  1. 调用时指定this:*  2. 创建时指定this:* */// ------------- 1. 调用时指定this: -------------function func(numA, numB) {console.log(this)console.log(numA, numB)}const person = {name: 'username'}// 1.1 call:挨个传入参数// func.call(person, 1, 2)  // this 为 {name: 'username'}// 1.2 apply:以数组的方式传入参数// func.apply(person, [3, 4])  // this 为 {name: 'username'}// ------------- 2. 创建时指定this: -------------// 2.1 bind方法// const bindFunc = func.bind(person, 666)  // this 为 {name: 'username'} ,Func函数的参数可以依次传入// bindFunc(888)  // numA 为 666,numB 为 888// 2.2 箭头函数const food = {name: '西兰花炒蛋',eat() {console.log(this)  // foodsetTimeout(() => {console.log(this)  // food}, 1000);// setTimeout(function () {//   console.log(this)  // window// }, 1000)}}food.eat()