JavaScript 中 this 的详解

this 的指向

this 是 js 中定义的关键字,它自动定义于每个函数域内,然则它的指向却让人很疑惑。在现实运用中,this 的指向大抵能够分为以下四种状况。

1.作为一般函数挪用

当函数作为一个一般函数被挪用,this 指向全局对象。在浏览器里,全局对象就是 window。

window.name = 'linxin';
function getName(){
    console.log(this.name);
}
getName();                   // linxin

能够看出,此时 this 指向了全局对象 window。
在ECMAScript5的严厉形式下,这类状况 this 已被划定不会指向全局对象了,而是 undefined。

'use strict';
function fun(){
    console.log(this);
}
fun();                      // undefined

2.作为对象的要领挪用

当函数作为一个对象里的要领被挪用,this 指向该对象

var obj = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}

obj.getName();              // linxin

假如把对象的要领赋值给一个变量,再挪用这个变量:

var obj = {
    fun1 : function(){
        console.log(this);
    }
}
var fun2 = obj.fun1;
fun2();                     // window

此时挪用 fun2 要领 输出了 window 对象,申明此时 this 指向了全局对象。给 fun2 赋值,现实上是相当于:

var fun2 = function(){
    console.log(this);
}

能够看出,此时的 this 已跟 obj 没有任何关系了。这时候 fun2 是作为一般函数挪用。

3.作为组织函数挪用

js中没有类,然则能够从组织器中建立对象,并供应了 new 运算符来举行挪用该组织器。组织器的表面跟一般函数一样,大部分的函数都能够看成组织器运用。当组织函数被挪用时,this 指向了该组织函数实例化出来的对象。

var Person = function(){
    this.name = 'linxin';
}
var obj = new Person();
console.log(obj.name);      // linxin

假如组织函数显式的返回一个对象,那末 this 则会指向该对象。

var Person = function(){
    this.name = 'linxin';
    return {
        name : 'linshuai'
    }
}
var obj = new Person();
console.log(obj.name);      // linshuai

假如该函数不必 new 挪用,看成一般函数实行,那末 this 依旧指向全局对象。

4.call() 或 apply() 挪用

经由过程挪用函数的 call() 或 apply() 要领可动态的转变 this 的指向。

var obj1 = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}
var obj2 = {
    name : 'linshuai'
}

obj1.getName();             // linxin
obj1.getName.call(obj2);    // linshuai
obj1.getName.apply(obj2);   // linshuai

这两个要领在js中都黑白常经常使用的要领,能够浏览下一篇:javascript 中 apply 、call 的详解

更多文章:lin-xin/blog

    原文作者:linshuai
    原文地址: https://segmentfault.com/a/1190000008757250
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞