Javascript理解this对象

Posted fozero

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript理解this对象相关的知识,希望对你有一定的参考价值。

this是函数运行时自动生成的一个内部对象,只能在函数内部使用,但总指向调用它的对象。

通过以下几个例子加深对this的理解。

(1)作为函数调用

var name = \'Jenny\';
function person() {
    return this.name;
}
console.log(person());  //Jenny

上面这个例子在全局作用域中调用person(),此时的调用对象为window,因此this指向window,在window中定义了name变量,因此this.name相当于window.name,为Jenny。

再看下面一个例子:

function a() {
    function b() {
        function c() {
            console.log(this);
        }
        c();
    }
    b();
}
a();    // window

这个例子中,也同为函数调用,因此this指向window。

(2)作为对象的方法调用

var name = \'Jenny\';
var obj = {
    name: \'Danny\',
    person: function() {
        return this.name;
    }
};
console.log(obj.person());  //Danny

在这个例子中,person()函数在obj对象中定义,调用时是作为obj对象的方法进行调用,因此此时的this指向obj,obj里面定义了name属性,值为Danny,因此this.name = "Danny"。

(3)作为构造函数调用

作为构造函数调用和普通函数调用的区别是,构造函数使用new关键字创建一个实例,此时this指向实例对象。

function person() {
    return new person.prototype.init();
}
person.prototype = {
    init: function() {
        return this.name;
    },
    name: \'Brain\'
};
console.log(person().name); //undefined

这是一个比较复杂的例子,涉及到了原型。

首先,创建构造函数person,为函数重新定义原型,在原型上定义了两个方法init和name,其中init返回this.name。

调用person函数的name属性,发现返回的是undefined,为什么不是Brain呢?

我们看,调用person,返回person.prototype.init()的一个实例,假设返回的这个实例名为a,那么此时的this指向的就是a,a作为person.prototype.init()的一个实例,那么所有定义在person.prototype.init()中的方法等都可以被a调用,但是name属性定义在person的原型中,而非init函数中,因此返回undefined。

(4)apply和call

使用apply()和call()可以改变调用函数的对象,第一个参数为改变后调用这个函数的对象,其中apply()的第二个参数为一个数组,call的第二个参数为每个参数。

function person() {
    return this.name;
}
var obj = {
    name: \'Jenny\',
    age: 18
};
console.log(person.apply(obj));  //Jenny

使用apply函数改变了调用person的对象,是在obj对象下面调用person,不再是在window对象下调用了,因此this指向obj,this.name = "Jenny";

文章标题:javascript理解this对象
转载自https://www.cnblogs.com/nuanriqingfeng/p/5794632.html
标签:js,this对象

以上是关于Javascript理解this对象的主要内容,如果未能解决你的问题,请参考以下文章

如何理解 JavaScript 中的 this 关键字

精心收集的 48 个 JavaScript 代码片段,仅需 30 秒就可理解

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

对JavaScript中this的理解

Javascript理解this对象