JS中的 this 简略分析
发布在JavaScript基础2014年5月3日view:5217
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

JS中的 this 变化多端,似乎难以捉摸,但实际上对 this 的解读,还是有一定规律的。

分析this,该如何下手呢?下面有一个函数

function show(){
  alert(this);
}

那 this 是什么呢?当然没有答案,因为要得到 this,首先要看调用处。调用决定this ,如下

oBtn.onclick = show;  // 此时 this 就是 oBtn
show();               // this 是 window 或 undefined,具体要看方法的所有者和运行模式
new show()            // this 是 new 出来的对象 

下面分析几种单一情况下的 this:

1、事件中,this指向触发事件的对象
1.1、作为事件处理程序的值

oBtn.onclick = function(){
  alert(this);      // oBtn
}

1.2、行间事件

<input type="button" value="按钮" id="btn" onclick="show()" />
function show(){
  alert(this);  // this指该按钮
}

1.3、同样是行间事件

<input type="button" value="按钮" id="btn" onclick="alert(this)" />   
<!-- this也是指该按钮 -->

2、this 指向其所属的对象。包括普通函数,可以看成是 window 的对象。
2.1

var arr=[1,2,3];
arr.show=function ()
{
    alert(this);   // this指向arr数组
};
arr.show();  

2.2

function show(){
  alert(this);  // window
}
show();     

等价于(此处只关心 this)

window.show=function ()
{
    alert(this);    //window
};
window.show();

3、函数嵌套

function show(){
    function show1(){
        alert(this);
    }   
    show1();
}
show();

结果:
3.1、正常下 this 指向 window;
3.2、严格模式下,this 为 undefined (当然浏览器得支持严格模式);
可以这么理解:this指向其所属的对象,此时show1谁都不属于,所以是undefined

4、定时器中,this 指向 window,可以这么理解:隔一段时间后,由 window 执行一个函数,所以 this 指向 window;

setTimeout(function(){
    alert(this);    // window
}, 1000);

5、apply 和 call,正如我们知道的,call 和 apply 可以改变 this 的值

function show(){
    alert(this);   // this 指向数组
}
show.call([1,2,3]);

6、new 对象
*构造函数:构造函数式相对的, new Person()时,Person 就叫构造函数,直接调用"Person()"时,Person就是一个普通的函数;

function Person (){
    alert(this);     // new 出来的 Person 对象
}
var person = new Person();  

new的作用:
1.将 this 指向一个新建的空对象
2.return this

所以上面的代码实际是这样的:

function Person (){
    // var obj = new Object();
    // this = obj;
    alert(this);     // new 出来的 Person 对象
    // return this;
}
var person = new Person();  

单种情况的处理基本就如上了,如果复合情况怎么办?如下:

function show(){
    alert(this);
}
var arr1=[1,2,3];
arr1.show=show;
setTimeout(new arr1.show(), 1000);

此时就需要对上述几种情况按照优先级排一个顺序了

this 优先级从高到低为:

优先级情景this 的值备注
1newnew出来的空 object
apply / call传入的参数并列第一,apply / call不能和 new 同时出现
new arr1.show.apply(“1”); // 报错
2定时器window
3事件发生事件的元素
4方法所有者
5其他(嵌套等)window || undefined看是否为严格模式

注:不管如何修改this,this只会影响一层,比如下面这个

function show(){
    alert(this);        // this 为数组 [1,2,3]
    function show1(){
        alert(this);    // window || undefined
    }
    show1();
}
show.apply([1,2,3]);

下面的 this 就没什么疑问了吧(某些代码纯粹是为了判断 this 而写,实际中并不会遇到–面试除外)

function show()
{
    alert(this);
}
var arr1 = [1,2,3];
arr1.show = show;

show();         //window
arr1.show();    //arr1

new show();         //object
new arr1.show();    //object

//document.onclick = show;      //点击时 document
document.onclick = arr1.show;   //点击时 document

new document.onclick();         //object

setTimeout(show, 100);          //window
setTimeout(arr1.show, 200);     //window

setTimeout(document.onclick, 100);  //window
setTimeout(new document.onclick(), 200);    //object

window.onload = function ()
{
    arr1.show();            //arr1
};

new (function (){
    alert(this);            //object
    arr1.show();            //arr1
})();
评论
发表评论
5年前

this 只跟调用形式有关系,也就是调用函数的方式。其他不用看。

5年前

其实本文只需要记住 this 的优先级就 OK 了,其他可以忽略。
前端新手,本篇内容并不是很充实,只是讲出了最基本的东西,没有扩展和继续深入。目前水平就到这儿了,以后能力提高了再写升级篇。
这种程度的文章在本地整理了好多,太基本感觉拿不出门,不过下个月就要开始找工作,先发两篇,到时候可能有点儿用吧,大家见谅了。

WRITTEN BY
蛋蛋超人
向钱看 向厚赚 一切都与钱相关!追求卓越 成功会在不经意间追上你!追寻自由,活得更自私些!
TA的新浪微博
PUBLISHED IN
JavaScript基础

主要整理一些JavaScript中的基础知识,本专栏比较偏向于个人笔记,属于一个阶段内遇到的知识整理

我的收藏