亲宝软件园·资讯

展开

JavaScript 中this指向问题 JavaScript 中this指向问题案例详解

奕玄 人气:0
想了解JavaScript 中this指向问题案例详解的相关内容吗,奕玄在本文为您仔细讲解JavaScript 中this指向问题的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:JavaScript,this指向,JavaScript,this指向问题,下面大家一起来学习吧。

总结

全局环境

无论是否在严格模式下,this 均指向 window 对象。

console.log(this === window)  // true
// 严格模式
'use strict'
console.log(this === window)  // true

普通函数

  1. 正常模式
    • this 指向 window 对象
    • function test() {
        return this === window
      }
      
      console.log(test())  // true
      
  2. 严格模式
    • this 值为 undefined
    • // 严格模式
      'use strict'
      
      function test() {
        return this === undefined
      }
      
      console.log(test())  // true
      

构造函数

函数作为构造函数使用时,this 指向构造出来的实例。

function Test() {
  this.number = 1
}

let test1 = new Test()

console.log(test1.number)  // 1

箭头函数

函数为箭头函数时,this 指向函数定义时上一层作用域中的 this 值。

let test = () => {
  return this === window
}

console.log(test())  // true
let obj = {
  number: 1
}

function foo() {
  return () => {
    return this.number
  }
}

let test = foo.call(obj)

console.log(test())  // 1

对象的方法

函数作为对象的方法使用时,this 指向该对象。

let obj = {
  number: 1,
  getNumber() {
    return this.number
  }
}

console.log(obj.getNumber())  // 1

call()、apply()、bind()

let obj = {
  number: 1
}

function test(num) {
  return this.number + num
}

console.log(test.call(obj, 1))  // 2

console.log(test.apply(obj, [2]))  // 3

let foo = test.bind(obj, 3)
console.log(foo())  // 4

加载全部内容

相关教程
猜你喜欢
用户评论