频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
关于JavaScripte this关键字的理解
2018-07-11 11:58:10         来源:ykizz的博客  
收藏   我要投稿

JavaScipte由于其在运行期进行绑定的特性,JavaScripte中的this可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScripte中的函数调用有以下几种方式

作为对象方法调用 作为函数调用,作为构造函数调用 使用apply或call调用

随着函数使用场合不同,this的值会发生变化。但是总有一个原则。下面用一张”JavaScripte this决策树“(非严格模式下)来说明如何对this进行判断(dot(.)代表方法)。


这里写图片描述

例子1(作为方法调用)

var point={
    x:0,
    y:0,
    moveTo:function(x,y){
        this.x=this.x+x;
        this.y=this.y+y;
    }
};

point.moveTo(1,1);

代码解析:

point.moveTo函数是用new进行调用的么?答:不是,进入否 point.moveTo函数是用dot(.)进行调用的,即进入”是“分支” 这里的this指向.moveTo之前的调用对象,即指向point

例子2(纯粹函数调用)

function test() {
    this.x = 1;
    alert(x);
}
test();

代码解析

test()函数调用时用new进行调用的吗?答:不是,进入“否”分支 test()函数不是用dot(.)调用的,即进入“否”分支 则这里的this指向全局变量window,那么this.x实际上就是window.x

例子3(构造函数调用)

function Point(x,y){
    this.x=x;
    this.y=y;
}
var np=new Point(1,1);
np.x;//==1
var p=Point(2,2);
px.x;//==error,p是一个空对象
window.x;//==2

(1)判定Point(1,1)函数在var np=new Point(1,1)中this

var np=new Point(1,1)调用是用new进行调用吗?答:是,进入“是”分支 this指向np 则this.x=1,即np.x=1;

(2)判定Point(1,1)函数在var p=Point(1,1)中this

var p=Point(2,2)调用时用new进行调用吗?答:否,进入“否”分支 Point(2,2)函数使用doc(.)进行调用吗?答:否,进入“否”分支 this指向全局表露window,那么this.x==window.x this.x=2即window.x=2;

例子4(call和apply进行调用)

function Point(x,y){
    this.x=x;
    this.y=y;
    this.moveTo=function(x,y){
        this.x=x;
        this.y=y;
    }
}
var p1=new Point(0,0);
var p2=new {x:0,y:0};
p1.moveTo.apply(p2,[10,10]);    //apply实际上为p2.moveTo(10,10);
p2.x//==10

p1.moveTo.apply(p2,[10,10])判断过程如下

apply和call这两个方法允许切换函数执行的上下文环境(context),也即使切换this绑定的对象。p1.moveTo.apply(p2,[10,10])实际上是p2.moveTo(10,10) p2.moveTo(10,10)函数调用是用new进行调用的吗?答:不是,进入“否”分支 p2.moveTo(10,10)函数是用dot(.)进行调用的,即进入“是”分支, 即这里的this指向调用moveTo(10,10)的的对象,即p2,所以p2.x=10;

this含义如此之多的原因

JavaScripte中的函数既可以被当作普通函数执行,也可以作为对象的方法执行。一个函数被执行时,会创建一个执行环境(ExecutionContext),函数的所有的行为均发生在此执行环境中,构建 改执行环境时,JavaScript首先会创建argument变量,其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量,首先初始化 函数的形参表,值为argument变量中对应的值,如果argument变量中没有对应值,则该形参初始化为undefined。如果该函数中有内部函数,则初始化这些内部函数。如果没有,继续初始化改函数内定义的局部变量,需要注意的是此时这些变量初始化为undefined,其复制操作在执行环境创建成功后,函数执行时才会执行。最后为this变量赋值,如前所述,会根据函数调用方式的不同,付给this全局对象,当前对象,至此,函数的执行环境创建成功,函数开始执行,所需变量均从之前构建好的执行环境中读取。

点击复制链接 与好友分享!回本站首页
上一篇:js同级frame之间方法相互调用
下一篇:引入js文件报错Multiplemarkersatthisline的解决方法
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站