每个函数在定义被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. jquery mobile radio,checkbox button 样式设置

    <label><input type=checkbox ></label>,<input type=checkbox id="checkbox &q ...

  2. SQL SERVER 导出数据,数据与结构,结构

    1.右键数据库->任务->生成脚本 2.选择数据库对象,可以整个表,也可以选择部分表 3.下一步,设置脚本编写选项.选择高级,在高级中,倒数第二项,'要编写脚本的数据的类型'中,可以选择导 ...

  3. linux内核调试技巧之addr2line

    addr2line工具是一个可以将指令的地址和可执行影像转换为文件名,函数名和源代码行数的工具.这在内核执行过程中出现崩溃时,可用于快速定位出出错的位置,进而找出代码的bug. 用法 addr2lin ...

  4. python用迭代器方式便利目录下的文件

    from pathlib import Path pths = [pth for pth in Path.cwd().iterdir()] 如果是os.listdir()这会返回一个list,文件非常 ...

  5. selenium2 Webdriver + Java 自动化测试实战和完全教程

    selenium2 Webdriver + Java 自动化测试实战和完全教程一.快速开始 博客分类: Selenium-webdriverselenium webdriver 学习selenium ...

  6. 动手学servlet(六) 过滤器和监听器

     过滤器(Filter) 过滤器是在客户端和请求资源之间,起一个过滤的作用,举个例子,比如我们要请求admin文件夹下的index.jsp这个页面,那么我们可以用一个过滤器,判断登录用户是不是管理员 ...

  7. mac 10.9 安装 gevent

    安装步骤: Gevent依赖libevent和greenlet,需要分别安装. 1,安装 macport (如已安装,可以跳过) 2,通过终端 键入: sudo port install libeve ...

  8. 北京易信软科信息技术有限公司-仓库管理系统V1.0

    北京易信软科您可信赖的北京软件研发服务商,公司团队有多年应用软件设计制作及开发经验,为各大企业提供软件设计.制作及维护服务,为用户提供可靠高效的应用服务平台 我们通过专业的项目实施流程,为您提供优质的 ...

  9. TableViewCell,TableView,UITableViewCell

    这次的学习是在Navigation-based Application模板中,用RootViewController class设置操作方法,使用UITableView的属性值.在导航控制器控件为程序 ...

  10. Mysql常见四种索引的使用

    提到MySQL优化,索引优化是必不可少的.其中一种优化方式 --索引优化,添加合适的索引能够让项目的并发能力和抗压能力得到明显的提升. 我们知道项目性能的瓶颈主要是在"查(select)&q ...