JavaScript中的this

知识点一:箭头函数和普通函数之间的this是不一样的。

普通函数中的this

1.this 代表它的直接调用者

2.默认情况下(未使用'use strict'),没有找到直接调用者,this指向window

3.严格模式下,没有直接调用者的函数中this指向undefined

4.使用call,apply,bind 绑定的,this指向对象

箭头函数中的this

默认指向在定义它时,所处的宿主对象,非执行对象,定义它时,环境可能是window

知识点二:this的典型应用

1.作为对象方法调用

示例:

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // [Function: age]
xiaoming.age(); // 28

2.作为函数调用,此时的this会绑定到全局对象

示例:将上面的拆开写

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

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};
var fn = xiaoming.age; // 先拿到xiaoming的age函数

fn(); // NaN
xiaoming.age(); // 28, 正常结果 getAge(); // NaN

原因:getAge函数中的this此时绑定的是window对象,要保证this指向正确,必须使用obj.method的形式调用。

3.作为构造函数调用,此时进行变量替代,var that = this

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法内部一开始就捕获this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 28

   this对象在程序中随时会改变,var that = this 表示that没改变之前仍然是指向当时的this,这样就不会出现找不到原来的对象。

4.在call和apply中调用

apply接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是Array,表示函数本身的参数。

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

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};
xiaoming.age();
//28 getAge.apply(xiaoming,[]);//28
getAge.call(xiaoming);//28
 
原文地址:https://www.cnblogs.com/lanhuo666/p/9959050.html