JavaScript中的this指向问题

JavaScript中的this指向问题

1.1 为什么需要this?

为什么需要this?

在常见的编程语言中，几乎都有this这个关键字（Objective-C中使用的是self),但是在JavaScript中的this和常见的面向对象语言中的this不太一样

• 常见面向对象的编程语言中，比如Java,C++,Swift、Dart等等一系列语言中，this通常只会出现在类的方法中
• 也就是你需要有一个类，类中的方法（特别是实例方法）中，this代表的是当前调用对象

但是JavaScript中的this更加灵活无论是它出现的位置还是它代表的含义

我们来看一下编写一个obj的对象，有this和没有this的区别

从上面我们可以看出：this的作用就是提高的代码的复用性，不用随着对象名字的改变而改变，直接this指向当前对象即可

1.2 目前掌握两个this的判断方法

1.2.1 以默认的方式调用一个函数，this指向window

1. 代码示例：

  function foo(name,age) {
        console.log(arguments)
        console.log(this)
      }
  
  foo("123","hahah","xiix")//默认调用，没有对象引用
  
  function sayHello(name) {
    console.log(this)
  }

2. 结果分析

3. 思考题:下述代码fn调用的this指向什么？

    var obj = {
      name:"why",
      running:function() {
        console.log(this)
        console.log(this===obj)
      },
      eating:function() {
        console.log("eaintg~",this.name)
      },
      eaing:function() {
        console.log("studying~",this.name)
      }
    }
    //题目一
    obj.running()
    var fn = obj.running
    fn()

答案：默认调用，指向window对象

    function bar() {
          console.log(this)
    }
      var obj = {
        name:"why",
        "bar":bar
      }
      obj.bar()//谁调用它，对象就会指向哪个

答案：指向obj对象，被obj对象调用

1.2.2 通过对象调用，this指向调用的对象

1. 代码案例

 var obj = {
      name:"why",
      running:function() {
        console.log(this)//指向的就是obj
        console.log(this===obj)
      },
      eating:function() {
        console.log(this)
      },
      eaing:function() {
        console.log(this)
      }
    }

    obj.running()

结果分析：被obj对象调用，所以指向obj这个对象

2. 思考题:下述代码调用的this指向什么？

    function bar() {
          console.log(this)
    }
      var obj = {
        name:"why",
        "bar":bar
      }
      obj.bar()//谁调用它，对象就会指向哪个

答案：指向obj对象，被obj对象调用