每个函数在定义被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. Ext 三级联动 及附值

    /// <reference path="../../ext.js" />Ext.define('Myview.Region', { extend: 'Ext.form ...

  2. 【解决】AWS服务控制台中上传文件失败

    使用IE 11,在 AWS Services Console 中不管是 S3 还是 Elastic Beanstalk 的页面中上传页面都会失败,提示信息如下: A problem occurred ...

  3. 提交到github远程仓库遇到的问题

    1.could not read from remote repository 可能原因是没有将ssh 密匙添加到github,所以没有权限 解决办法: 1. ssh-keygen -C 'your@ ...

  4. 使用Visual Assistant X创建C程序注释模板

    本文将讲解C程序注释模板的使用背景.创建方法,并在结束时进行总结. 1.使用背景 在项目开发过程中,为方便组内其他成员能够快速学习自己编写的代码,需要对自己写的函数添加注释.在正规的软件开发流程中,一 ...

  5. Android学习起步 - Button按钮及事件处理

    按钮和文本框算是比较简单的控件了,以下主要讲按钮的事件响应,三种写法(匿名内部类响应事件.外部类响应事件.本类直接响应事件) 点击按钮后文本框中会显示 ”按钮被单击了”,先看效果: 以下是这个界面的布 ...

  6. python平台跨平台开发

    有助于跨平台开发的 os 模块属性: linesep  用于在文件中分隔行的字符串 sep  用来分隔文件路径名的字符串 pathsep 用于分隔文件路径的字符串 curdir  当前工作目录的字符串 ...

  7. Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境搭建教程

    原文地址:http://www.osyunwei.com/archives/7378.html 搬运是为了自己找资料方便. 准备篇 一.环境说明: 操作系统:Windows Server 2012 R ...

  8. mongoDB学习记录---PHP扩展的find返回值

    最近的一个项目中用到了MongoDB,主要是使用MongoDB的PHP扩展.MongoDB的扩展中用于一个用于查询的方法是find().下面针对在理解MongoDB扩展的find()方法中做的实验做个 ...

  9. 比较常用的几个maven第三方镜像

    OSC的:<mirror>    <id>CN</id>    <name>OSChina Central</name>           ...

  10. java jvm常用命令工具

    [尊重原创文章出自:http://www.chepoo.com/java-jvm-command-tools.html] 一.概述 程序运行中经常会遇到各种问题,定位问题时通常需要综合各种信息,如系统 ...