对象中,this 的使用

标签：

 this的用法:

一. 构造函数中的this
   1. 构造函数作为构造函数使用:
   
      构造函数里的this或是函数的prototype内的this,指向的都是通过new创建出的对象
      (哪个对象调用了构造函数,那么this就指向哪个对象).
      例: function Person0(){
            this.name = "zhangsan0";
            this.age = 20;
            this.sayname = function () {
                console.log(this);
                console.log(this.name);
            };
            Person0.prototype.sayage = function () {
                console.log(this);
                console.log(this.age);
            };
        }
        var p0 = new Person0();
        p0.name = "zhangsan1";
        p0.age = 10;
        p0.sayname();//返回zhangsan1,而不是zhangsan0
        p0.sayage(); //返回10,而不是20

        由上看出:
         1. Person0通过new,创建了p0这个对象;
         2. Person0里的this和prototype里的this都是指向p0;
         3. p0调用了函数内的各种属性或方法,所以this指向p0;

  
    2. 构造函数作为普通函数使用:
       不用new来创建对象,而是直接调用构造函数,这就是把构造函数作为普通函数使用的方式;
       普通函数内的this指向的是window对象;
       例:  function Person1(){
                this.name = "zhangsan0";
                this.age = 20;
                this.sayname = function () {
                    console.log(this);
                    console.log(this.name);
                };
                sayname();
            }
            Person1(); //返回window对象;返回zhansan0

            由上看出:
            1. Person这个构造函数里的this指向的是window对象;
            2. 因为this指向了window对象,所有Person这个构造函数里的this.name或是this.age,就相当于是给window定义了两个name和age的属性,并赋值为zhangsan0和20,所以console.log(this.name)这句返回的是zhangsan0;


二. 函数作为对象的一个属性:
    1. 该函数的上一级是对象,而不是函数: 那么该函数的this指向的就是其上一级的这个对象.
       例:  var x = 10;
            var person3 = {
                x:20,
                sayname: function () {
                    console.log(this);
                    console.log(this.x);
                }
            };
            person3.sayname(); //返回person3这个对象;返回20
      
           由上看出:
           1. sayname函数的上一级是person3这个对象,所以sayname函数内的this指向的就是person3这个对象;
           2. 所以console.log(this);这句返回的是window对象;
           3. 所以console.log(this.x);这句返回的是person3里面的x属性的值;
           
     2.  函数A的上一级是函数B,函数B的上一级是对象C,那么函数A内的this指向的是window对象(视其为普通函数);函数B里的this指向的是对象C.
        例:  var x = 10;
             var person4 = {
                x:20,
                sayname1: function () {
                    console.log(this); //返回person4对象
                    console.log(this.x); //返回20
                    sayname2 = function(){
                        console.log(this); //返回window对象
                        console.log(this.x);//返回10
                    };
                    sayname2();
                }
             };
           person4.sayname1(); 
           返回: person4, 20; window对象,10.
           由上看出: 
           1. sayname2函数的上一级是sayname1函数,故sayname2里的this指向window对象;
           2. sayname1函数的上一级是person4对象,故sayname1里的this指向person4对象;
           3. 输出见上面代码的注释


三. 全局 & 普通函数中的this: 都是指向window对象
   1. 全局中的this:
      例: console.log(this === window);//返回true
      看出: 返回true,说明全局中的this指向的是window对象

   2. 普通函数中的this:
      例:  var a = 20;
            function person5(){
                var a = 10;
                console.log(this.a);
            }
          person5(); //返回20
          由上看出:返回的是全局变量a的值,而不是函数中的变量a的值,故普通函数中的this指向的是window对象.
          
四. call方法的调用: 调用call方法的函数中的this指向的是传入call方法中的对象.
    例:  function Person6(){
           console.log(this.name);
        }
        var p1 = {
            name:"zhangsan2"
        };
        Person6.call(p1); //返回zhangsan2
        由上看出:
        1. 在Person6函数中有一条语句为console.log(this.name);
        2. 在对象p1中定义了name属性,并赋值;
        3. 当Person6这个构造函数调用call方法时,此时该函数中的this指向的就是传入call中的对象p1,故输出p1的name属性的值.
                
               
       
           
                 

对象中,this 的使用

标签：

原文地址：http://www.cnblogs.com/Hrbacity/p/4820647.html