2014-11-10

js整理二:this的一些理解

关于this的一些理解

##2.1全局作用域下##

输入代码：console.log(this);//window
全局范围内的this将会指向全局对象，结果是window，这点毫无疑问

##2.2作为单纯的函数调用##

（1）先看一段代码：

function fTest_this(){
    console.log(this);
}
fTest_this();

结果为全局的window，这个是在浏览器的非严格模式下得出的

（2）下面再看一个严格模式下的测试，代码中再添加一句’usestrict’;

function fTest_this(){
   'use strict';
    console.log(this);
}
fTest_this();//undefined 但是貌似在谷歌浏览器在还是出现了window

（3）为了再验证在非严格模式下指向的是window对象，再看下面的测试

function fTest_this(name){
       this.name = name ;
}
fTest_this("hi");
console.log(name);//hi
name = "bye";
console.log(name);//bye

最后输出的name的数值是bye，可以证明name属性在全局的window中

##2.3作为对象的方法调用##
先上一段代码（这个段代码是借用了参考博客中的那段代码）

varname = "clever coder";
var person = {
    name: "foocoder",
    hello: function(sth){
            console.log(this.name+ " says " + sth);
        }
}
person.hello("hello world");

最后的输出为foocodersays hello world；对于这段代码的this，就是指向了该方法所在的对象，代码中就是peson对象；

##2.4作为构造函数##

更多的参考了博客（阮一峰老师），地址在文章的底部

function test(){
　 this.x = 1;
}
var o = new test();
alert(o.x); // 1

运行结果为1。为了表明这时this不是全局对象，我对代码做一些改变：

var x = 2;
function test(){
　　this.x = 1;
}
var o = new test();
alert(x); //2

运行结果为2，表明全局变量x的值根本没变

##2.5内部函数##

（1）代码1

window.name= "window";
object = {
    name:"object",
    run:function() {
        console.log("test1:"+this.name);
    }
};
object.run();

这个例子就是前面提到的2.3作为对象的方法调用，他里面的this指向的是其中的对象即object，所以上述的代码运行后在控制台中可以看到test1:object。

（2）然后继续对代码进行改动

window.name = "window";
object = {
   name: "object",
   run: function() {
            console.log("test1:"+this.name);
            var inner =function(){
            console.log("Myname is " + this.name);
        };
        inner();
   }
};
object.run();

输出的结果是My nameis window，即this指向的是window对象（顺便测试了一下，在严格模式下，依然会报错的）
关于这一点，在司徒正美的博客中，写着这样的解释“尽管它是定义在object内部，尽管它是定义run函数内部，但它弹出的既不是object也不是run，因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用，不能被前两者调用，就只有被window拯救。”
确实如此，inner()这个方法，既不能object去访问，也不能让run去访问，确实感觉很飘离，如果想让inner()内部的this也指向object的话，就可以把之前的this给保存在一个变量里，然后inner()再去调用；

window.name = "window";
object = {
    name:"object",
    run: function() {
           var that =this;
           console.log("test1:"+this.name);
           var inner =function(){
           console.log("My name is " + that.name);
        };
        inner();
    }
};
object.run();

测试结果就是My name isobject，成功的保存了之前的指针。
还有其他的方法能实现上述的结果，就是call和apply的应用

最后附上以个司徒正美博客上的几句话，这是来自于他的整理
this 的值取决于 function 被调用的方式，一共有四种，
1．如果一个 function 是一个对象的属性，该 funtion 被调用的时候，this 的值是这个对象。如果 function 调用的表达式包含句点（.）或是 []，this 的值是句点（.）或是 [] 之前的对象。如myObj.func和myObj[“func”] 中，func被调用时的 this 是myObj。
2．如果一个 function 不是作为一个对象的属性，那么该 function 被调用的时候，this 的值是全局对象。当一个 function 中包含内部 function 的时候，如果不理解 this 的正确含义，很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中，在内部 function 中使用它来查找变量。
3．如果在一个 function 之前使用 new 的话，会创建一个新的对象，该 funtion 也会被调用，而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = newUser(“Alex”); 中，通过调用newUser(“Alex”) ，会创建一个新的对象，以user1 来引用，User 这个 function 也会被调用，会在user1 这个对象中设置名为name 的属性，其值是Alex 。
4．可以通过 function 的 apply 和call 方法来指定它被调用的时候的 this 的值。apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在，我们得以创建各种有用的函数。

##参考博文：##
1司徒正美 http://www.cnblogs.com/rubylouvre/archive/2009/11/13/1602122.html
2 阮一峰 http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
3.http://foocoder.com/blog/xiang-jie-javascriptzhong-de-this.html/