关于this的指向

this的指向,是在函数被调用的时候确定
也就是执行上下文被创建的时候确定的,因此,一个函数中this的指向非常灵活。但是在函数执行过程中,this一旦被确定,就不可更改。

    var a = 10;
    var obj = {
      a: 20,
    }

    function fn() {
      this = obj; // 试图修改this 报错
      console.log(this.a)
    }

一、全局对象中的this
全局环境中的this,指向它本身。

  // 通过this绑定到全局对象
  this.a2 = 20;

  // 通过声明绑定到变量对象,但在全局环境中,变量对象就是它自身
  var a1 = 1;

  // 仅仅只有赋值操作,标识符会隐式绑定到全局对象
  a3 = 30;

  // 输出结果
  console.log(a1); // 1
  console.log(a2); // 20
  console.log(a3); // 30

二、函数中的this

    // demo1
    var a = 20;
    function fn() {
      console.log(this.a);
    }
    fn(); //20
    var a = 20;
    function fn() {
      function foo() {
        console.log(this.a);
      }
      foo();
    }
    fn(); // 20
    // demo3
    var a = 20;
    var obj = {
      a: 10,
      c: this.a + 20,
      fn: function() {
        return this.a;
      }
    }

    console.log(obj.c); // 40
    console.log(obj.fn()); // 10

在一个函数上下文中,this由调用者提供,由调用函数的方式来决定。**如果调用者函数被某一个对象所拥有,那么该函数在调用时,内部的this指向该对象。如果函数独立调用,那么该函数内部的this,则指向undefined。**但是在非严格模式中,当this的指向为undefined时,它会被自动指向全局对象。

    // 为了能够准确判断,我们在函数内部使用严格模式,因为非严格模式会自动指向全局
    function fn() {
      'use strict'
      console.log(this);
    }

    fn(); // undefined  独立调用
    window.fn(); // window 被window所拥有

在上面的例子中,fn()为独立的调用者,按照定义的理解,它内部的this指向就为undefined。而window.fn()则因为fn被window所拥有,内部的this就指向了window对象。

    var a = 20;
    var foo = {
      a: 10,
      getA: function () {
        return this.a;
      }
    }
    console.log(foo.getA()); // 10

    var test = foo.getA;
    cosnole.log(test()); // 20

foo.getA()中,getA是调用者,它不是独立调用,被对象foo所拥有,因此它的this指向了foo。而test()作为调用者,尽管与foo.getA的引用相同,但是它是独立调用的,因此this指向为undefined,在非严格模式中,自动转向全局window。

    function foo() {
      console.log(this.a);
    }

    function active(fn) {
      fn(); // 真实调用者,为独立调用。
    }

    var a = 20;
    var obj = {
      a: 10,
      getA: foo
    }

    active(obj.getA); // 20

三、使用call,apply显式指定this
javaScript内部提供了一种机制,让我们可以手动设置this的指向。他们就是call和apply,所有的函数都有这两个方法,除了参数不同,其功能一样。他们的第一个参数都是this将要指向的对象。

    function fn() {
      console.log(this.a);
    }
    var obj = {
      a: 20
    }

    fn.call(obj); // 20

fn并非为obj的方法,但是通过call,我们将fn内部的this绑定为obj,因此就可以使用this.a 访问obj的a的属性了。而call和apply区别是他们后面传递的参数,call是以一个一个的形式传递,apply是以数组的形式传递。
四、构造函数与原型方法上的this

    function Person(name, age) {
      this.name = name;
      this.age = age;
    }

    Person.prototype.getName = function () {
      return this.name;
    }

    var p1 = new Person('Nick', 20);
    p1.getName(); // 'Nick'

通过new操作符调用构造函数,会经历一下4个阶段:

  • 创建一个新的对象;
  • 将构造函数的this指向这个新对象;
  • 指向构造函数的代码,为这个对象添加属性方法等;
  • 返回新的对象;

因此当new操作符调用构造函数时,this其实指向的是这个新创建的对象,最后又将新的对象返回出来,被实例对象p1所接收。因此,我们可以说这个时候,构造函数的this指向了新的实例对象,p1。
而原型方法上的this:p1.getName()中的getName为调用者,它被p1所拥有,因此,getName中的this指向了p1。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值