JavaScript中的this指针

1. 全局对象

在说this之前,首先要知道,在JavaScript中,有一个默认是全局对象window。

例如,我们定义了一个全局作用域的变量x:

var x = 'hello javascript';

那么我们所定义的x实际为window.x。JavaScript中函数也是变量的一种。

2. this

如果在一个对象中,将对象中某一个键所对应的值用函数表示,则这个函数称为方法。

在一个方法内部,this是一个特殊变量,它始终指向当前对象

var getAge = function () {
    var y = new Date().getFullYear();
    return y - this.birth
};

var person = {
    'name': 'ccc',
    'birth': 1995,
    'age': getAge
};

var fn = person.age

console.log(person.age()); //25
console.log(getAge()); //NaN
console.log(fn()); // NaN

由于this指向当前对象,所以:

  1. 在调用person.age()时,this.birth可以获得personbirth属性,从而计算出age所对象的值。
  2. 在直接调用getAge()时,this指向的当前对象为window,所以this.birthNaN
  3. person.age赋给fn,其实就是把函数getAge赋给fn,所以fn() = getAge(),所以最后的值与2中一样为NaN

值得说明的是,当上述代码'use strict';时,函数的this指向undefined(只有原来指向window时才会变),所以this.birth会得到TypeError错误。

3. apply和call

通过applycall,我们可以控制this的指向。

apply()接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。而call()把参数按顺序传入。

所以我们可以通过这两个函数将上述代码全部改为可以正常输出:

'use strict';

var getAge = function () {
    var y = new Date().getFullYear();
    return y - this.birth
};

var person = {
    'name': 'ccc',
    'birth': 1995,
    'age': getAge
};

var fn = person.age

console.log(person.age()); //25
console.log(getAge.apply(person,[])); //25
console.log(fn.call(person, )); //25

对普通函数的调用,可以把this绑定为null,也就是会调用函数本身:

console.log(Math.max.apply(null, [-2, 5, 8])); // 8
console.log(Math.max.call(null, 3, -5, 4)); // 4

4. 箭头函数

箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25

{birth:2000}只要语法正确可以为任何值(由于被忽略)。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值