每个函数在定义被ECMAScript解析器解析时,都会创建两个特殊的变量:this和arguments,换句话说,每个函数都有属于自己的this对象,这个this对象是在运行时基于函数的执行环境绑定的,即在全局对象中,this指向的是window对象;在自定义函数中,this对象指向的是调用这个函数的对象,

也就是说,this指向的是调用执行环境的那个对象。

如果是在函数嵌套环境中,this指代的是调用外部函数或者内部函数的执行环境的对象;



(注意:可以通过使用call()或者apply()改变函数执行环境的情况下,this就会指向其他对象。)



看例子吧:

 /*----- 2014-2-10 这个例子是错误的 -----*/

function BaseType(name,age){

    //用一个变量保存当前函数执行环境中的this对象

    //这里可能会有疑问:为什么非得把this保存起来呢?这是因为,内部函数(比如本函数里面包含的两个匿名函数)

    //在搜索this变量时,只会搜索到属于它自己的this,而不会搜索到包含它的那个函数的this。

    //所以,为了在内部函数能使用外部函数的this对象,要给它赋值了一个名叫self的变量。

    var self=this;

    this.name=name;

    this.age=age;

    this.sayHello=function(){

        console.log("My name is "+this.name+", and i'm "+this.age+"years old.");

    }

    this.saySomething=function(){

           //此处用法有点欠妥,完全可以不用self,而用this

           //self.sayHello();

           //正确的做法是:

           return function () { self.sayHello(); }

           //通常用法:将上下文this缓存到一个变量中

           //以便在本函数作用域内包含另一个函数作用域的情况下可以继续使用此上下文对象this

           //如果省略var self=this; 这行,那么在嵌套函数作用域内就无法访问到本函数作用域的成员了。        


}

}

var b1=new BaseType("wede",30);

b1.saySomething(); //My name is wede, and i'm 30years old.



从结果来看,是预期的结果。

那么这里可能又会出现新的疑问:为什么在saySomething()方法中非要用self.sayHello()来调用呢,

直接sayHello()多好?

其实这又涉及到另一个话题:实例成员与局部成员。

我们创建构造函数的意义就是要用它来创建实例,那么所有属于实例的成员都需要用this来定义;

而只有那些不属于实例的成员才不会用this定义;

当然,用this定义了方法以后,在函数作用域内部要调用此方法时,就需要加上this了。



为了证明这一点,来看下面的代码:

function BaseType(name,age){

    var self=this;

    this.name=name;

    this.age=age;

    this.sayHello=function (){

        console.log("My name is "+this.name+", and i'm "+this.age+"years old.");

    }

    this.saySomething=function(){

        sayHello();

    }

}

var b1=new BaseType("wede",30);

b1.saySomething(); //ReferenceError: sayHello is not defined

结果显示:sayHello方法未定义。

就是说明,我们调用的其实是局部方法sayHello,而现在只有实例方法sayHello,所以会出现异常。



下面来改装下(注意加粗的部分):

function BaseType(name,age){

    var self=this;

    this.name=name;

    this.age=age;

    var sayHello=function (){

        console.log("My name is "+name+", and i'm "+age+"years old.");

    }


    this.saySomething=function(){

        sayHello();

    }

}

var b1=new BaseType("wede",30);

b1.saySomething();//My name is wede, and i'm 30years old.



可以看出,输出了预期的结果。

而这时候,我们把sayHello方法变成了一个局部方法(对于实例不可见),然后再在saySomething方法中调用就可以了。

js中var self=this的解释的更多相关文章

  1. js中var的有或无--重复声明和以后的声明

    js中var的有或无--重复声明和以后的声明 使用var语句多次声明一个变量不仅是合法的,而且也不会造成任何错误. 如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色. 如果重复 ...

  2. 浅谈JS中 var let const 变量声明

    浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...

  3. 【前端开发】】js中var写和不写的区别

    js中var用与不用的区别 Javascript声明变量的时候,虽然用var关键字声明和不用关键字声明,很多时候运行并没有问题,但是这两种方式还是有区别的.可以正常运行的代码并不代表是合适的代码. v ...

  4. js中var,let,const理解

    var变量提升: 解释:在声明a之前输出a,因为a是使用var声明变量得到提升,解释为下句 var a: console.log(a) a = 1; var声明会提到最上面的位置,但是赋值的位置还是当 ...

  5. js中,var 修饰变量名和不修饰的区别

    js中 允许在定义变量的时候 不加var 修饰符.js会在当前作用域下寻找上下文是否定义了此变量, 如果没有找到则会为这个变量分配内存.当且将其视为window的成员. 也就是全局变量. 如果加了va ...

  6. js中var 笔记

    js中声明变量会用到Var; 1,var a;声明一个变量a,此时输出a,会显示undefined:因为此时的a未定义: 2, var a=0;和b=0;有什么区别呢? 当声明一个全局变量时,实际是定 ...

  7. js 中var that=this

    js中经常出现var that=this,为什么这么做? http://stackoverflow.com/questions/4886632/what-does-var-that-this-mean ...

  8. JS中var声明与function声明两种函数声明方式的区别

    JS中常见的两种函数声明(statement)方式有这两种: // 函数表达式(function expression) var h = function() { // h } // 函数声明(fun ...

  9. js中var

    js中声明一个变量的时候,建议要加上var.如果不加,除非你知道自己在干什么,否则哪天会吃亏哈哈. 不加var,js会认为你声明的是全局变量. 举个小例子. function test1(){ a = ...

随机推荐

  1. inteview que2

    1.spring的缓存,mybatis缓存a.基于注解的方式 三种注解b.mybatis分为一级session和二级缓存mapperc.采用LRU算法(近期最少使用) http://www.iteye ...

  2. I prefer fcitx

    sudo add-apt-repository ppa:fcitx-team/nightly sudo apt-get update Then, you should install Fcitx.Fc ...

  3. 【HEVC】4、HM-16.7编码一个CU(帧内部分) 3.帧内预测各种模式实现

    HEVC中一共定义了35中帧内编码预测模式,编号分别以0-34定义.其中模式0定义为平面模式(INTRA_PLANAR),模式1定义为均值模式(INTRA_DC),模式2~34定义为角度预测模式(IN ...

  4. 十四、View Port 2.0

    1. 分为以下几类: (1) data classes: 用来访问scene中的geometry 和 shaders (2)scene override: 主要是用户自定义的drawing .shad ...

  5. Junit4断言

    Junit4断言API: http://junit.org/javadoc/latest/index.html Constructor Summary protected Assert()       ...

  6. Unable to install breakpoint in

    Unable to install breakpoint inXXXX due to missing line number attributes.modify compiler options to ...

  7. HTML5移动端图片上传模块

    上传图片的功能是极为常用的,之前做过一个移动端上传文件的功能(基于jquery的),总结梳理一下. html <div class="uploadPic clearBox"& ...

  8. (转)TortoiseGit(乌龟git)保存用户名密码的方法

    返回博客列表 转 TortoiseGit(乌龟git)保存用户名密码的方法 元谷 发布时间: 2014/05/03 23:07 阅读: 20529 收藏: 21 点赞: 12 评论: 3 window ...

  9. CSS3按钮鼠标悬浮光圈效果

    1 .HTML相关知识点  HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为W ...

  10. 基于谷歌地图的Dijkstra算法水路路径规划

    最终效果图如下: 还是图.邻接表,可以模拟出几个对象=>节点.边.路径.三个类分别如下: Node 节点: using System; using System.Collections.Gene ...