js中var self=this的用法解释

首先我们先来看一下,影响函数调用时this 绑定行为的new方法,如果想直接看var self=this的用法解释,请直接看二
    一、影响函数调用时this 绑定行为的new方法
        在讲解它之前我们首先需要澄清一个非常常见的关于JavaScript 中函数和对象的误解。
        在传统的面向类的语言中,“构造函数”是类中的一些特殊方法,使用new 初始化类时会调用类中的构造函数。通常的形式是这样的:
               something = new MyClass(..);
        JavaScript 也有一个new 操作符,使用方法看起来也和那些面向类的语言一样,绝大多数开发者都认为JavaScript 中new 的机制也和那些语言一样。
        然而,JavaScript 中new 的机制实际上和面向类的语言完全不同。
        首先我们重新定义一下JavaScript 中的“构造函数”。在JavaScript 中,构造函数只是一些使用new 操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。实际上,它们甚至都不能说是一种特殊的函数类型,它们只是被new 操作符调用的普通函数而已。
        举例来说,思考一下Number(..) 作为构造函数时的行为,ES5.1 中这样描述它:
        15.7.2 Number 构造函数
                当Number 在new 表达式中被调用时,它是一个构造函数:它会初始化新创建的对象。

        所以,包括内置对象函数(比如Number(..))在内的所有函数都可以用new 来调用,这种函数调用被称为构造函数调用。
这里有一个重要但是非常细微的区别:实际上并不存在所谓的“构造函数”,只有对于函数的“构造调用”。
        使用new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。
        1. 创建(或者说构造)一个全新的对象。
        2. 这个新对象会被执行[[ 原型]] 连接。
        3. 这个新对象会绑定到函数调用的this。
        4. 如果函数没有返回其他对象,那么new 表达式中的函数调用会自动返回这个新对象。
        思考下面的代码:
               function foo(a) {
                     this.a = a;
               }
               var bar = new foo(2);
              console.log( bar.a ); // 2
       使用new 来调用foo(..) 时,我们会构造一个新对象并把它绑定到foo(..) 调用中的this上。

二、js中var self=this的用法解释
        每个函数在定义被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方法中调用就可以了。

  • 10
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值