JavaScript 中 this 的详解

this 的指向

this 是 js
中定义的要字,它自动定义为各一个部数域内,但是其的对也于丁十分迷惑。在其实使用被,this
的针对大致可分为以下四栽情形。

初稿作者:林鑫,作者博客:https://github.com/lin-xin/blog

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