js中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

作者: linshuai 
链接:http://www.imooc.com/article/17133
来源:慕课网
本文原创公布于慕课网 ,转发请注脚出处,谢谢同盟!