欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js函数this的指向

程序员文章站 2022-06-30 19:12:00
...

箭头函数 (()=>{})

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

function(){}

1. 非严格模式
  • 根据调用环境上下文确定
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>hello word</p>
</body>
<script type="text/javascript">
    function getName(){
        console.log('this', this);
    }

    getName() // window

    const a = {
                name: 'xxx'
        getName
    }
    a.b() // object a
</script>
</html>
  • 利用 apply, call, bind方法指定

详细看apply, call, bind方法

2. 严格模式

在严格模式下,未指定环境对象而调用函数,则this值不会转型为window。除非明确把函数添加到某个对象或者调用apply(),call(), bind,否则this值将是undefined

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p>hello word</p>
</body>
<script type="text/javascript">
    'use strict'
    // 验证第一条剪头函数this指向
    const getName = () => { console.log(this) }
    getName() // window

    function getAge(){
        console.log('this', this);
    }
    getAge() // undefined
    const obj = {
                name: 'xxx',
                age: 32,
                getAge,
                getName
               }
    obj.getAge() // object a
    obj.getName() // window
</script>
</html>