This学习

转载：http://blog.youkuaiyun.com/hsd2012/article/details/51498421

this定义：

this 代表当前正在执行某个方法的对象，如果没有当前方法（或该方法不属于任何其它对象），则是指全局对象。也就是说，this代表调用该方法对象的引用。

 

全局范围中的this

<script type="text/javascript">
   console.log(this==window);
    console.log(this);
</script>

如果没有当前方法（或该方法不属于任何其它对象），则this是指全局对象window。 

于是可以得出，输出一个全局变量，可以采取下面几种方式

    var name="dqs";
     console.log(name);
     console.log(window['name']);
     console.log(window.name);
     console.log(this['name']);
     console.log(this.name);

函数里面的this

函数里面的this，取决于函数的调用方式，调用方式不一样，那么里面的this也就会不一样。

直接以函数形式调用

直接以函数形式调用，函数里的this，代表全局对象，即window。

<script type="text/javascript">
function fn(){
        console.log(this);
     }
fn();
</script>

以全局对象的方法形式调用

以全局对象的方法形式调用，此时this，也代表全局对象，即window。

<script type="text/javascript">
function fn(){
        console.log(this);
     }
fn();
     console.log(this.fn());
     console.log(window.fn());
</script>

借助call或者apply函数调用

借助call或者apply函数调用时候，此时this代表指定的对象。

<script type="text/javascript">
var obj={name:'obj_dqs'};
     function fn(){
        console.log(this);
     }
     function fn2(){
        this.name='fn_dqs';
     }
     fn.call(obj)//此时this代表obj
     fn.call(fn2)//此时this代表fn2
</script>

输出结果：

以构造函数形式调用

当以构造函数形式调用时候，此时this，代表创建的对象。

构造函数就是初始化实例对象，

 构造函数注意事项：

1.默认函数首字母大写，参数需要加引号。

2.构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们，当调用构造函数时，new会自动创建this对象，且类型就是构造函数类型。

3.也可以在构造函数中显示调用return.如果返回的值是一个对象，它会代替新创建的对象实例返回。如果返回的值是一个原始类型，它会被忽略，新创建的实例会被返回。    

 

<script type="text/javascript">
    var name='window_dqs';
     function fn(){
        this.name='fn_dqs';
        this.showName=function(){
            console.log(this.name);
        }
        console.log(this);
     }
     var p=new fn();
</script>

结果：

with中的this     

在分析with(obj)中的this时候，我们需要分析其所在范围。如果是在函数中的this，代表obj，如果是全局范围变量中，则代表window

<script type="text/javascript">
    var name='window_dqs';
     var obj={
        name:'obj_dqs',
        showName:function(){
            console.log(this);
        }};

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


    with(obj){
        console.log(this);
        showName();
    }
    showName();

</script>

输出结果如下 

综合练习

例题一：

<script type="text/javascript">
    var name='window_dqs';
     var obj={
        name:'obj_dqs',
        showName:function(){
            console.log(this.name);
        }};

     function fn(){
        console.log(this);
     }
     function fn2(){
        this.name='fn_dqs';
     }
     obj.showName();
     obj.showName.apply(this);
     obj.showName.apply(fn2);
</script>

输出结果如下：

例题2

<script type="text/javascript">
 var name='window_dqs';
     function fn(){
        this.name='fn_dqs';
        this.showName=function(){
            console.log(this.name);
        }
        console.log(this);
     }

     function fn2(){
        this.name='fn_pps';
        this.showName=function(){
            console.log(this.name);
        }
        console.log(this);
     }

     var p=new fn();
     fn2.apply(p);
     p.showName();

     var obj={};
     fn2.apply(obj);
     obj.showName();
     </script>

输出结果如下： 

例题3

<script type="text/javascript">
var name='window_dqs';
     var obj={
        name:'json_dqs',
        showName:function(){
            console.log(this.name);
            return function(){
                console.log(this.name);
            }
        }
     }
    var p=obj.showName();
    obj.showName()();
    p.call(obj);
</script>