您的位置:新葡亰496net > 新葡亰官网 > javascript才能难关,深刻精通javascript中this指针

javascript才能难关,深刻精通javascript中this指针

发布时间:2019-06-21 08:36编辑:新葡亰官网浏览(126)

    javascript技术难点(三)之this、new、apply和call详解

    2014/12/10 · JavaScript · apply, call, Javascript, new, this

    原文出处: 夏天的森林   

    讲解this指针的原理是个很复杂的问题,如果我们从javascript里this的实现机制来说明this,很多朋友可能会越来越糊涂,因此本篇打算换一个思路从应用的角度来讲解this指针,从这个角度理解this指针更加有现实意义。

    下面我们看看在java语言里是如何使用this指针的,代码如下:

    JavaScript

    public class Person { private String name; private String sex; private int age; private String job; public Person(String name, String sex, int age, String job) { super(); this.name = name; this.sex = sex; this.age = age; this.job = job; } private void showPerson(){ System.out.println("姓名:" this.name); System.out.println("性别:" this.sex); System.out.println("年龄:" this.age); System.out.println("工作:" this.job); } public void printInfo(){ this.showPerson(); } public static void main(String[] args) { Person person = new Person("马云", "男", 46, "董事长"); person.printInfo(); } } //姓名:马云 //性别:男 //年龄:46 //工作:董事长

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    public class Person {
        
        private String name;
        private String sex;
        private int age;
        private String job;
     
        public Person(String name, String sex, int age, String job) {
            super();
            this.name = name;
            this.sex = sex;
            this.age = age;
            this.job = job;
        }
     
        private void showPerson(){
            System.out.println("姓名:" this.name);
            System.out.println("性别:" this.sex);
            System.out.println("年龄:" this.age);
            System.out.println("工作:" this.job);
        }
     
        public void printInfo(){
            this.showPerson();
        }
        
        public static void main(String[] args) {
            Person person = new Person("马云", "男", 46, "董事长");
            person.printInfo();
        }
     
    }
     
    //姓名:马云
    //性别:男
    //年龄:46
    //工作:董事长

    上面的代码执行后没有任何问题,下面我修改下这个代码,加一个静态的方法,静态方法里使用this指针调用类里的属性,如下图所示:

    图片 1

    我们发现IDE会报出语法错误“Cannot use this in a static context”,this指针在java语言里是不能使用在静态的上下文里的。

    在面向对象编程里有两个重要的概念:一个是类,一个是实例化的对象,类是一个抽象的概念,用个形象的比喻表述的话,类就像一个模具,而实例化对象就是通过这个模具制造出来的产品,实例化对象才是我们需要的实实在在的东西,类和实例化对象有着很密切的关系,但是在使用上类的功能是绝对不能取代实例化对象,就像模具和模具制造的产品的关系,二者的用途是不相同的。

    有上面代码我们可以看到,this指针在java语言里只能在实例化对象里使用,this指针等于这个被实例化好的对象,而this后面加上点操作符,点操作符后面的东西就是this所拥有的东西,例如:姓名,工作,手,脚等等。

    其实javascript里的this指针逻辑上的概念也是实例化对象,这一点和java语言里的this指针是一致的,但是javascript里的this指针却比java里的this难以理解的多,究其根本原因我个人觉得有三个原因:

    原因一:javascript是一个函数编程语言,怪就怪在它也有this指针,说明这个函数编程语言也是面向对象的语言,说的具体点,javascript里的函数是一个高阶函数,编程语言里的高阶函数是可以作为对象传递的,同时javascript里的函数还有可以作为构造函数,这个构造函数可以创建实例化对象,结果导致方法执行时候this指针的指向会不断发生变化,很难控制。

    原因二:javascript里的全局作用域对this指针有很大的影响,由上面java的例子我们看到,this指针只有在使用new操作符后才会生效,但是javascript里的this在没有进行new操作也会生效,这时候this往往会指向全局对象window。

    原因三:javascript里call和apply操作符可以随意改变this指向,这看起来很灵活,但是这种不合常理的做法破坏了我们理解this指针的本意,同时也让写代码时候很难理解this的真正指向

    上面的三个原因都违反了传统this指针使用的方法,它们都拥有有别于传统this原理的理解思路,而在实际开发里三个原因又往往会交织在一起,这就更加让人迷惑不解了,今天我要为大家理清这个思路,其实javascript里的this指针有一套固有的逻辑,我们理解好这套逻辑就能准确的掌握好this指针的使用。

    我们先看看下面的代码:

    JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script type="text/javascript">
        this.a = "aaa";
        console.log(a);//aaa
        console.log(this.a);//aaa
        console.log(window.a);//aaa
        console.log(this);// window
        console.log(window);// window
        console.log(this == window);// true
        console.log(this === window);// true
    </script>

    在script标签里我们可以直接使用this指针,this指针就是window对象,我们看到即使使用三等号它们也是相等的。全局作用域常常会干扰我们很好的理解javascript语言的特性,这种干扰的本质就是:

    在javascript语言里全局作用域可以理解为window对象,记住window是对象而不是类,也就是说window是被实例化的对象,这个实例化的过程是在页面加载时候由javascript引擎完成的,整个页面里的要素都被浓缩到这个window对象,因为程序员无法通过编程语言来控制和操作这个实例化过程,所以开发时候我们就没有构建这个this指针的感觉,常常会忽视它,这就是干扰我们在代码里理解this指针指向window的情形。

    干扰的本质还和function的使用有关,我们看看下面的代码:

    JavaScript

    <script type="text/javascript"> function ftn01(){ console.log("I am ftn01!"); } var ftn02 = function(){ console.log("I am ftn02!"); } </script>

    1
    2
    3
    4
    5
    6
    7
    8
    <script type="text/javascript">
        function ftn01(){
           console.log("I am ftn01!");
        }
        var ftn02 = function(){
            console.log("I am ftn02!");
        }
    </script>

    上面是我们经常使用的两种定义函数的方式,第一种定义函数的方式在javascript语言称作声明函数,第二种定义函数的方式叫做函数表达式,这两种方式我们通常认为是等价的,但是它们其实是有区别的,而这个区别常常会让我们混淆this指针的使用,我们再看看下面的代码:

    JavaScript

    <script type="text/javascript"> console.log(ftn01);//ftn01() 注意:在firebug下这个打印结果是可以点击,点击后会显示函数的定义 console.log(ftn02);// undefined function ftn01(){ console.log("I am ftn01!"); } var ftn02 = function(){ console.log("I am ftn02!"); } </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <script type="text/javascript">
        console.log(ftn01);//ftn01()  注意:在firebug下这个打印结果是可以点击,点击后会显示函数的定义
        console.log(ftn02);// undefined
        function ftn01(){
           console.log("I am ftn01!");
        }
        var ftn02 = function(){
            console.log("I am ftn02!");
        }
    </script>

    这又是一段没有按顺序执行的代码,先看看ftn02,打印结果是undefined,undefined我在前文里讲到了,在内存的栈区已经有了变量的名称,但是没有栈区的变量值,同时堆区是没有具体的对象,这是javascript引擎在预处理(群里东方说预处理比预加载更准确,我同意他的说法,以后文章里我都写为预处理)扫描变量定义所致,但是ftn01的打印结果很令人意外,既然打印出完成的函数定义了,而且代码并没有按顺序执行,这只能说明一个问题:

    在javascript语言通过声明函数方式定义函数,javascript引擎在预处理过程里就把函数定义和赋值操作都完成了,在这里我补充下javascript里预处理的特性,其实预处理是和执行环境相关,在上篇文章里我讲到执行环境有两大类:全局执行环境和局部执行环境,执行环境是通过上下文变量体现的,其实这个过程都是在函数执行前完成,预处理就是构造执行环境的另一个说法,总而言之预处理和构造执行环境的主要目的就是明确变量定义,分清变量的边界,但是在全局作用域构造或者说全局变量预处理时候对于声明函数有些不同,声明函数会将变量定义和赋值操作同时完成,因此我们看到上面代码的运行结果。由于声明函数都会在全局作用域构造时候完成,因此声明函数都是window对象的属性,这就说明为什么我们不管在哪里声明函数,声明函数最终都是属于window对象的原因了

    关于函数表达式的写法还有秘密可以探寻,我们看下面的代码:

    JavaScript

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript">
        function ftn03(){
            var ftn04 = function(){
                console.log(this);// window
            };
            ftn04();
        }
        ftn03();
    </script>

    运行结果我们发现ftn04虽然在ftn03作用域下,但是执行它里面的this指针也是指向window,其实函数表达式的写法我们大多数更喜欢在函数内部写,因为声明函数里的this指向window这已经不是秘密,但是函数表达式的this指针指向window却是常常被我们所忽视,特别是当它被写在另一个函数内部时候更加如此。

    其实在javascript语言里任何匿名函数都是属于window对象,它们也都是在全局作用域构造时候完成定义和赋值,但是匿名函数是没有名字的函数变量,但是在定义匿名函数时候它会返回自己的内存地址,如果此时有个变量接收了这个内存地址,那么匿名函数就能在程序里被使用了,因为匿名函数也是在全局执行环境构造时候定义和赋值,所以匿名函数的this指向也是window对象,所以上面代码执行时候ftn04的this也是指向window,因为javascript变量名称不管在那个作用域有效,堆区的存储的函数都是在全局执行环境时候就被固定下来了,变量的名字只是一个指代而已。

    这下子坏了,this都指向window,那我们到底怎么才能改变它了?

    在本文开头我说出了this的秘密,this都是指向实例化对象,前面讲到那么多情况this都指向window,就是因为这些时候只做了一次实例化操作,而这个实例化都是在实例化window对象,所以this都是指向window。我们要把this从window变成别的对象,就得要让function被实例化,那如何让javascript的function实例化呢?答案就是使用new操作符。我们看看下面的代码:

    JavaScript

    <script type="text/javascript"> var obj = { name:"sharpxiajun", job:"Software", show:function(){ console.log("Name:" this.name ";Job:" this.job); console.log(this);// Object { name="sharpxiajun", job="Software", show=function()} } }; var otherObj = new Object(); otherObj.name = "xtq"; otherObj.job = "good"; otherObj.show = function(){ console.log("Name:" this.name ";Job:" this.job); console.log(this);// Object { name="xtq", job="good", show=function()} }; obj.show();//Name:sharpxiajun;Job:Software otherObj.show();//Name:xtq;Job:good </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script type="text/javascript">
        var obj = {
            name:"sharpxiajun",
            job:"Software",
            show:function(){
                console.log("Name:" this.name ";Job:" this.job);
                console.log(this);// Object { name="sharpxiajun", job="Software", show=function()}
            }
        };
        var otherObj = new Object();
        otherObj.name = "xtq";
        otherObj.job = "good";
        otherObj.show = function(){
            console.log("Name:" this.name ";Job:" this.job);
            console.log(this);// Object { name="xtq", job="good", show=function()}
        };
        obj.show();//Name:sharpxiajun;Job:Software
        otherObj.show();//Name:xtq;Job:good
    </script>

    这是我上篇讲到的关于this使用的一个例子,写法一是我们大伙都爱写的一种写法,里面的this指针不是指向window的,而是指向Object的实例,firebug的显示让很多人疑惑,其实Object就是面向对象的类,大括号里就是实例对象了,即obj和otherObj。Javascript里通过字面量方式定义对象的方式是new Object的简写,二者是等价的,目的是为了减少代码的书写量,可见即使不用new操作字面量定义法本质也是new操作符,所以通过new改变this指针的确是不过攻破的真理。

    下面我使用javascript来重写本篇开头用java定义的类,代码如下:

    JavaScript

    <script type="text/javascript"> function Person(name,sex,age,job){ this.name = name; this.sex = sex; this.age = age; this.job = job; this.showPerson = function(){ console.log("姓名:" this.name); console.log("性别:" this.sex); console.log("年龄:" this.age); console.log("工作:" this.job); console.log(this);// Person { name="马云", sex="男", age=46, 更多...} } } var person = new Person("马云", "男", 46, "董事长"); person.showPerson(); </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <script type="text/javascript">
        function Person(name,sex,age,job){
            this.name = name;
            this.sex = sex;
            this.age = age;
            this.job = job;
            this.showPerson = function(){
                console.log("姓名:" this.name);
                console.log("性别:" this.sex);
                console.log("年龄:" this.age);
                console.log("工作:" this.job);
                console.log(this);// Person { name="马云", sex="男", age=46, 更多...}
            }
        }
        var person = new Person("马云", "男", 46, "董事长");
        person.showPerson();
    </script>

    看this指针的打印,类变成了Person,这表明function Person就是相当于在定义一个类,在javascript里function的意义实在太多,function既是函数又可以表示对象,function是函数时候还能当做构造函数,javascript的构造函数我常认为是把类和构造函数合二为一,当然在javascript语言规范里是没有类的概念,但是我这种理解可以作为构造函数和普通函数的一个区别,这样理解起来会更加容易些

    下面我贴出在《javascript高级编程》里对new操作符的解释:

    new操作符会让构造函数产生如下变化:

    1.       创建一个新对象;

    2.       将构造函数的作用域赋给新对象(因此this就指向了这个新对象);

    3.       执行构造函数中的代码(为这个新对象添加属性);

    4.       返回新对象

    关于第二点其实很容易让人迷惑,例如前面例子里的obj和otherObj,obj.show(),里面this指向obj,我以前文章讲到一个简单识别this方式就是看方法调用前的对象是哪个this就指向哪个,其实这个过程还可以这么理解,在全局执行环境里window就是上下文对象,那么在obj里局部作用域通过obj来代表了,这个window的理解是一致的。

    第四点也要着重讲下,记住构造函数被new操作,要让new正常作用最好不能在构造函数里写return,没有return的构造函数都是按上面四点执行,有了return情况就复杂了,这个知识我会在讲prototype时候讲到。

    Javascript还有一种方式可以改变this指针,这就是call方法和apply方法,call和apply方法的作用相同,就是参数不同,call和apply的第一个参数都是一样的,但是后面参数不同,apply第二个参数是个数组,call从第二个参数开始后面有许多参数。Call和apply的作用是什么,这个很重要,重点描述如下:

    Call和apply是改变函数的作用域(有些书里叫做改变函数的上下文)

    这个说明我们参见上面new操作符第二条:

    将构造函数的作用域赋给新对象(因此this就指向了这个新对象);

    Call和apply是将this指针指向方法的第一个参数。

    我们看看下面的代码:

    JavaScript

    <script type="text/javascript"> var name = "sharpxiajun"; function ftn(name){ console.log(name); console.log(this.name); console.log(this); } ftn("101"); var obj = { name:"xtq" }; ftn.call(obj,"102"); /* * 结果如下所示: *101 T002.html (第 73 行) sharpxiajun T002.html (第 74 行) Window T002.html T002.html (第 75 行) T002.html (第 73 行) xtq T002.html (第 74 行) Object { name="xtq"} * */ </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <script type="text/javascript">
        var name = "sharpxiajun";
        function ftn(name){
            console.log(name);
            console.log(this.name);
            console.log(this);
        }
        ftn("101");
        var obj = {
          name:"xtq"
        };
        ftn.call(obj,"102");
        /*
        * 结果如下所示:
        *101
         T002.html (第 73 行)
         sharpxiajun
         T002.html (第 74 行)
         Window T002.html
         T002.html (第 75 行)
         T002.html (第 73 行)
         xtq
         T002.html (第 74 行)
         Object { name="xtq"}
        * */
    </script>

    我们看到apply和call改变的是this的指向,这点在开发里很重要,开发里我们常常被this所迷惑,迷惑的根本原因我在上文讲到了,这里我讲讲表面的原因:

    表面原因就是我们定义对象使用对象的字面表示法,字面表示法在简单的表示里我们很容易知道this指向对象本身,但是这个对象会有方法,方法的参数可能会是函数,而这个函数的定义里也可能会使用this指针,如果传入的函数没有被实例化过和被实例化过,this的指向是不同,有时我们还想在传入函数里通过this指向外部函数或者指向被定义对象本身,这些乱七八糟的情况使用交织在一起导致this变得很复杂,结果就变得糊里糊涂。

    其实理清上面情况也是有迹可循的,就以定义对象里的方法里传入函数为例:

    情形一:传入的参数是函数的别名,那么函数的this就是指向window;

    情形二:传入的参数是被new过的构造函数,那么this就是指向实例化的对象本身;

    情形三:如果我们想把被传入的函数对象里this的指针指向外部字面量定义的对象,那么我们就是用apply和call

    我们可以通过代码看出我的结论,代码如下:

    JavaScript

    <script type="text/javascript"> var name = "I am window"; var obj = { name:"sharpxiajun", job:"Software", ftn01:function(obj){ obj.show(); }, ftn02:function(ftn){ ftn(); }, ftn03:function(ftn){ ftn.call(this); } }; function Person(name){ this.name = name; this.show = function(){ console.log("姓名:" this.name); console.log(this); } } var p = new Person("Person"); obj.ftn01(p); obj.ftn02(function(){ console.log(this.name); console.log(this); }); obj.ftn03(function(){ console.log(this.name); console.log(this); }); </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <script type="text/javascript">
    var name = "I am window";
    var obj = {
        name:"sharpxiajun",
        job:"Software",
        ftn01:function(obj){
            obj.show();
        },
        ftn02:function(ftn){
            ftn();
        },
        ftn03:function(ftn){
            ftn.call(this);
        }
    };
    function Person(name){
        this.name = name;
        this.show = function(){
            console.log("姓名:" this.name);
            console.log(this);
        }
    }
    var p = new Person("Person");
    obj.ftn01(p);
    obj.ftn02(function(){
       console.log(this.name);
       console.log(this);
    });
    obj.ftn03(function(){
        console.log(this.name);
        console.log(this);
    });
    </script>

    结果如下:

    图片 2

    最后再总结一下:

    如果在javascript语言里没有通过new(包括对象字面量定义)、call和apply改变函数的this指针,函数的this指针都是指向window的

    赞 8 收藏 评论

    图片 3

    没搞错吧!js写了那么多年,this还是会搞错!没搞错,javascript就是回搞错!

    Javascript this 关键字 详解,javascriptthis

    一、this指向构造函数实例化对象

    在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,如下例:

    复制代码 代码如下:

    function Benjamin(username, sex) {
        this.username = username;
        this.sex = sex;
    }
    var benjamin = new Benjamin("zuojj", "male");
    //Outputs: Benjamin{sex: "male",username: "zuojj"}
    console.log(benjamin);
    var ben = Benjamin("zhangsan", "female");
    //Outputs: undefined
    console.log(ben);

    当构造函数当做普通函数被调用时,并没有返回值,同时this指向全局对象。那么我们如何来避免因为缺少new关键字,而产生的问题呢?

    复制代码 代码如下:

    function Benjamin(username, sex) {
     //Check whether "this" is a "Benjamin" object
     if(this instanceof Benjamin) {
         this.username = username;
         this.sex = sex;
     }else {
      return new Benjamin(username, sex);
     }
    }
    var benjamin = new Benjamin("zuojj", "male");
    //Outputs: Benjamin{sex: "male",username: "zuojj"}
    console.log(benjamin);
    var ben = Benjamin("zhangsan", "female");
    //Outputs: Benjamin {username: "zhangsan", sex: "female"}
    console.log(ben);

    在上例中,我们首先检查this是否是Benjammin的实例,如果不是,使用new自动调用构造函数,并实例化,这意味着,我们不再需要担心,遗漏new关键字实例化构造函数。当然这样我们可能会养成一个坏的习惯,如果避免这种现象呢?我们可以抛出一个错误,像下面这样:

    复制代码 代码如下:

    function Benjamin(username, sex) {
     //Check whether "this" is a "Benjamin" object
     if(this instanceof Benjamin) {
         this.username = username;
         this.sex = sex;
     }else {
      // If not, throw error.
            throw new Error("`Benjamin` invoked without `new`");
     }
    }

    二、this指向调用该函数的对象

    看下面的例子:

    复制代码 代码如下:

    var x = 10;
    var obj = {
     x: 10,
     output: function() {
      //Outputs: true
      console.log(this === obj);
      return this.x;
     },
     innerobj: {
      x: 30,
      output: function() {
       //Outputs: true
       console.log(this === obj.innerobj);
       return this.x;
      }
     }
    };
    //Outputs: 10
    console.log(obj.output());
    //Outputs: 30
    console.log(obj.innerobj.output());

    三、this指向全局对象

    在上面讨论构造函数的时候我们也讨论到不适用new的时候,this会指向全局对象,下面我们来看看两种常见的容易犯错的实例:

    复制代码 代码如下:

    var x = 100;
    var obj = {
     x: 10,
     output: function() {
      (function() {
       //Outputs: true
       console.log(this === window);
       //Outputs: Inner: 100
       console.log("Inner:" this.x);
      })();
      
      return this.x;
     }
    };
    //Outputs: 10
    console.log(obj.output());

    在使用闭包的时候,作用域发生变化,this指向window(浏览器中)。

    复制代码 代码如下:

    var x = 100;
    var obj = {
     x: 10,
     output: function() {
      return this.x;
     }
    };
    var output = obj.output;
    //Outputs: 10
    console.log(obj.output());
    //Outputs: 100
    console.log(output());
    var obj2 = {
     x: 30,
     output: obj.output
    }
    //Outputs: 30
    console.log(obj2.output());

    此时this始终指向函数调用时的对象。

    四、this指向apply/call()方法指派的对象

    复制代码 代码如下:

    var x = 100;
    var obj = {
     x: 10,
     output: function() {
      return this.x;
     }
    };
    //Outputs: 10
    console.log(obj.output());
    var obj2 = {
     x: 40,
     output: obj.output
    }
    //Outputs: 40
    console.log(obj.output.call(obj2));
    //Outputs: 10
    console.log(obj2.output.apply(obj));

    五、callback函数內的this指向调用该callback的函数的this所指向的对象

    复制代码 代码如下:

    //<input type="text" value="3" id="txt_username">
    $("#username").on("click", function() {
     console.log(this.value);
    });

    六、Function.prototype.bind中的this

    The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
    实例一:

    复制代码 代码如下:

    function person() {
     return this.name;
    }
    //Function.prototype.bind
    var per = person.bind({
     name: "zuojj"
    });
    console.log(per);
    var obj = {
     name: "Ben",
     person: person,
     per: per
    };
    //Outputs: Ben, zuojj
    console.log(obj.person(), obj.per());

    实例二:

    复制代码 代码如下:

    this.x = 9;
    var module = {
      x: 81,
      getX: function() { return this.x; }
    };
    //Outputs: 81
    console.log(module.getX());
    var getX = module.getX;
    //Outputs: 9, because in this case, "this" refers to the global object
    console.log(getX);
    // create a new function with 'this' bound to module
    var boundGetX = getX.bind(module);
    //Outputs: 81
    console.log(boundGetX());

    Javascript中的对象

    …………

    解释javascript中的this关键字

    this.form
    是不是向父节点传递?是的话就可以理解为botton.form  

    什么是对象

    在写java的时候,this用错了,idea都会直接报错!

    可以给我讲讲javascript中this关键字的用法嘛 !

    this表示当前对象,在类里经常用到,如:
    function myClass()
    {
    // 当前类的 name 属性
    this.name = "My Name is Class";
    this.age = 20;
    }

    var oTest = new myClass;
    // 这里就会显示 myClass 类里的 name 属性
    alert(oTest.name);

    另,如果在HTML标签里使用this,则表示当前标签,如:
    <button name='btnTest' onclick="javascript:alert(this.name)">测试</button>
    当我们单击这个按钮时,将弹出它的 name 属性。  

    this 关键字 详解,javascriptthis 一、this指向构造函数实例化对象 在上篇文章中,我们提到了使用new和不使用new调用构造函数的区别,...

      我们可以把Javascript中对象理解为一组无序的键值对,就好像C#中的Dictionary<string,Object>一样。Key是属性的名称,而value可以为以下3种类型:

    比如……

     

    但是,js,……idea,爱莫能助了……

    基本值(string, number, boolean, null, undefined)

    在面向对象编程里有两个重要的概念:一个是类,一个是实例化的对象,类是一个抽象的概念,用个形象的比喻表述的话,类就像一个模具,而实例化对象就是通过这个模具制造出来的产品,实例化对象才是我们需要的实实在在的东西,类和实例化对象有着很密切的关系,但是在使用上类的功能是绝对不能取代实例化对象,就像模具和模具制造的产品的关系,二者的用途是不相同的。

    对象

    有上面代码我们可以看到,this指针在java语言里只能在实例化对象里使用,this指针等于这个被实例化好的对象,而this后面加上点操作符,点操作符后面的东西就是this所拥有的东西,例如:姓名,工作,手,脚等等。

    函数

    其实javascript里的this指针逻辑上的概念也是实例化对象,这一点和java语言里的this指针是一致的,但是javascript里的this指针却比java里的this难以理解的多,究其根本原因我个人觉得有三个原因:

    复制代码

    原因一:javascript是一个函数编程语言,怪就怪在它也有this指针,说明这个函数编程语言也是面向对象的语言,说的具体点,javascript里的函数是一个高阶函数,编程语言里的高阶函数是可以作为对象传递的,同时javascript里的函数还有可以作为构造函数,这个构造函数可以创建实例化对象,结果导致方法执行时候this指针的指向会不断发生变化,很难控制。

    var o = new Object();

    javascript才能难关,深刻精通javascript中this指针。原因二:javascript里的全局作用域对this指针有很大的影响,由上面java的例子我们看到,this指针只有在使用new操作符后才会生效,但是javascript里的this在没有进行new操作也会生效,这时候this往往会指向全局对象window。

    o["name"] = "jesse";  //基本值作为对象属性

    原因三:javascript里call和apply操作符可以随意改变this指向,这看起来很灵活,但是这种不合常理的做法破坏了我们理解this指针的本意,同时也让写代码时候很难理解this的真正指向

    o["location"] = {     //对象作为对象属性

    上面的三个原因都违反了传统this指针使用的方法,它们都拥有有别于传统this原理的理解思路,而在实际开发里三个原因又往往会交织在一起,so,this,云里雾里了……

        "city": "Shanghai",

    入门书:professionnal Javascript for web devolopers,——高级的说法是这样的:

        "district":"minhang"

    this总是指向调用该方法的对象!

    };

    var name="zhoulujun";

     

    function say(){

    // 函数 作为对象属性

    console.log(this.name)

    o["sayHello"] = function () {

    }

        alert("Hello, I am " this.name " from " this.location.city);

    say(); //zhoulujun

    }

    在script标签里我们可以直接使用this指针,this指针(指向window对象,结果)就是window对象,即使使用三等号它们也是相等的。全局作用域常常会干扰我们很好的理解javascript语言的特性,这种干扰的本质就是:

     

    在javascript语言里全局作用域可以理解为window对象,记住window是对象而不是类,也就是说window是被实例化的对象,这个实例化的过程是在页面加载时候由javascript引擎完成的,整个页面里的要素都被浓缩到这个window对象,因为程序员无法通过编程语言来控制和操作这个实例化过程,所以开发时候我们就没有构建这个this指针的感觉,常常会忽视它,这就是干扰我们在代码里理解this指针指向window的情形。

    o.sayHello();

    这里this指向window对象,所以this.name->zhoulujun!

    复制代码

    当执行 say函数的时候, JavaScript 会创建一个 Execute context (执行上下文),执行上下文中就包含了 say函数运行期所需要的所有信息。 Execute context 也有自己的 Scope chain, 当函数运行时, JavaScript 引擎会首先从用 say函数的作用域链来初始化执行上下文的作用域链。

    遍历属性

    这方面的知识,建议参考:

      在C#中我们是可以用foreach对Dictionary<string,Object>进行遍历的,如果说对象在Javascript中是一组键值对的话,那我们如何进行遍历呢?

    http://blog.csdn.net/wangxiaohu__/article/details/7260668

     

    http://www.jb51.net/article/30706.htm

    复制代码

    这里可以大致记一下:

    for (var p in o) {

    var myObj={

        alert('name:' p  

    name:"zhoulujun",

              ' type:' typeof o[p]

    fn:function(){

            );

    console.log(this.name)

    }

    }

    // name:name type:string

    };

    // name:location type:object

    myObj.fn();

    // name:sayHello type:function

    这里的this指向obj,因为fn()运行在obj里面……

    复制代码

    然后再来看……

      上面的这种遍历方式会把原型中的属性也包括进来,关于什么是原型,以及如何区分原型和实例中的属性我们下面会讲到。

    var name="zhoulujun";

     

    function say(){

    创建对象

    console.log(this.name)

    javascript才能难关,深刻精通javascript中this指针。  其实在上面我们已经创建了一个对象,并且使用了以下两种创建对象的方式。

    console.log(this)

     

    }

    利用new创建一个Object的实例。

    say();

    字面量

    function say2(){

      我们上面的o是用第一种方式创建的,而o中的location属性则是用字面量的方式创建的。而第一种方式其实也有一种名字叫做构造函数模式,因为Object实际上是一个构造函数,为我们产生了一个Object的实例。如果对于构造函数这一块还有不清楚的话,赶紧去看我的第一篇 类型基础Object与object吧。

    var site="zhoulujun.cn";

     

    console.log(this.site);

      除了以上两种方式以外,我们一些创建对象的方式,我们也来一起看一下:

    }

     

    say2();

    工厂模式

    myObj2={

    复制代码

    site:"zhoulujun.cn",

    function createPerson(name, age, job){

    fn:function(){

        var o = new Object();

    console.log(this.site)

        o.name = name;

    }

        o.age = age;

    }

        o.job = job;

    这里的this指向的是对象myObj2,因为你调用这个fn是通过myObj2.fn()执行的,那自然指向就是对象myObj2,这里再次强调一点,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁,一定要搞清楚这个

        o.sayName = function(){

    然后,我们更深入(受不了 …………

            alert(this.name);

    myObj3={

        };

    site:"zhoulujun.cn",

        return o;

    andy:{

    }

    site:"www.zhoulujun.cn",

    var person1 = createPerson('Jesse', 29, 'Software Engineer');

    fn:function(){

    var person2 = createPerson('Carol', 27, 'Designer');

    console.log(this.site)

    复制代码

    }

      这种模式创建的对象有一个问题,那就是它在函数的内部为我创建了一个Object的实例,这个实例跟我们的构造函数createPerson是没有任何关系的。

    }

     

    };

      

    myObj3.andy.fn();

     

    这里同样也是对象Object点出来的,但是同样this并没有执行它,那你肯定会说我一开始说的那些不就都是错误的吗?其实也不是,只是一开始说的不准确,接下来我将补充一句话,我相信你就可以彻底的理解this的指向的问题。

      因为我在内部用new Object()来创建了这个对象,所以它是Object的实例。所以如果我们想知道它是具体哪个function的实例,那就不可能了。

    如果,你实在理解不了,就这么样背下来吧!

     

    情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题,你想了解可以自行上网查找。

    构造函数模式

    情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

      工厂模式没有解决对象识别的问题,但是我们可以想一下,Object()实际上也是一个函数,只不过当我在它前面加上一个new的时候,它就变成了一个构造函数为我们产生一个Object的实例。那么我同样也可以在其它函数前面加上new这样就可以产生这个函数的实例了,这就是所谓的构造函数模式。

    情况3:如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象,如果不相信,那么接下来我们继续看几个例子。

     

    这样既对了吗??深入点(就受不了了……讨厌……

    复制代码

    myObj3={

    function Person(name, age, job){

    site:"zhoulujun.cn",

        this.name = name;

    andy:{

        this.age = age;

    site:"www.zhoulujun.cn",

        this.job = job;

    fn:function(){

        this.sayName = function(){

    console.log(this)

            alert(this.name);

    console.log(this.site)

        };

    }

    }

    }

     

    };

    var p1 = new Person('Jesse', 18, 'coder');

    //    myObj3.andy.fn();

    alert(p1 instanceof Person); // true

    var fn=myObj3.andy.fn;

    复制代码

    fn();

    详解this

    其实,这里的 fn等价于

       this在Javascript中也可以算是一个很神奇对象,没错this是一个对象。我们在上一篇作用域和作用域链中讲到了变量对象,变量对象决定了在当前的执行环境中有哪些属性和函数是可以被访问到的,从某种程度上来说我们就可以把this看作是这个变量对象。我们之前提到了最大的执行环境是全局执行环境,而window就是全局执行环境中的变量对象,那么我们在全局环境中this===window是会返回true的。

    fn:function(age){

     

    console.log(this.name age);

      

    }

     

    下面我们来聊聊函数的定义方式:声明函数和函数表达式

      除了全局执行环境以外,我们还提到了另外一种执行环境,也就是函数。每一个函数都有一个this对象,但有时候他们所代表的值是不一样的,主要是这个函数的调用者来决定的。我们来看一下以下几种场景:

    我们最上面第一个案例定义函数的方式在javascript语言称作声明函数,第二种定义函数的方式叫做函数表达式,这两种方式我们通常认为是等价的,但是它们其实是有区别的,而这个区别常常会让我们混淆this指针的使用,我们再看看下面的代码:

     

    为什么say可以执行,say3不可以?那是因为:

    函数

    为什么say3打印结果是undefined,我在前文里讲到了undefined是在内存的栈区已经有了变量的名称,但是没有栈区的变量值,同时堆区是没有具体的对象,这是javascript引擎在预加载扫描变量定义所致,但是ftn01的打印结果很令人意外,既然打印出完成的函数定义了,而且代码并没有按顺序执行,这只能说明一个问题:

    function f1(){

    在javascript语言通过声明函数方式定义函数,javascript引擎在预处理过程里就把函数定义和赋值操作都完成了,在这里我补充下javascript里预处理的特性,其实预处理是和执行环境相关,在上篇文章里我讲到执行环境有两大类:全局执行环境和局部执行环境,执行环境是通过上下文变量体现的,其实这个过程都是在函数执行前完成,预处理就是构造执行环境的另一个说法,总而言之预处理和构造执行环境的主要目的就是明确变量定义,分清变量的边界,但是在全局作用域构造或者说全局变量预处理时候对于声明函数有些不同,声明函数会将变量定义和赋值操作同时完成,因此我们看到上面代码的运行结果。由于声明函数都会在全局作用域构造时候完成,因此声明函数都是window对象的属性,这就说明为什么我们不管在哪里声明函数,声明函数最终都是属于window对象的原因了。

      return this;

    这里推荐看下——java一个类的执行顺序:

    }

     

    其实在javascript语言里任何匿名函数都是属于window对象,它们也都是在全局作用域构造时候完成定义和赋值,但是匿名函数是没有名字的函数变量,但是在定义匿名函数时候它会返回自己的内存地址,如果此时有个变量接收了这个内存地址,那么匿名函数就能在程序里被使用了,因为匿名函数也是在全局执行环境构造时候定义和赋值,所以匿名函数的this指向也是window对象,所以上面代码执行时候fn的this都是指向window,因为javascript变量名称不管在那个作用域有效,堆区的存储的函数都是在全局执行环境时候就被固定下来了,变量的名字只是一个指代而已。

    f1() === window; // global object

    类似的情况(面试题喜欢这么考!)……比如:

      因为当前的函数在全局函数中运行,所以函数中的this对象指向了全局变量对象,也就是window。这种方式在严格模式下会返回undefined。

    this都是指向实例化对象,前面讲到那么多情况this都指向window,就是因为这些时候只做了一次实例化操作,而这个实例化都是在实例化window对象,所以this都是指向window。我们要把this从window变成别的对象,就得要让function被实例化,那如何让javascript的function实例化呢?答案就是使用new操作符。

     

    再来看 构造函数:

    对象方法

    function  User(){

    复制代码

    this.name="zhoulujun";

    var o = {

    console.log(this);

      prop: 37,

    }

      f: function() {

    var andy=new User();

        return this.prop;

    console.log(andy.name)

      }

    why andy 的name  是 zhoulujun,那是:因为:

    };

    new关键字可以改变this的指向,将这个this指向对象andy,

     

    那andy什么时候又成了思密达,oh,no,is Object?

    console.log(o.f()); // logs 37

    因为用了new关键字就是创建一个对象实例(重要的事情默读三遍)

    复制代码

    我们这里用变量andy创建了一个User用户实例(相当于复制了一份User到对象andy里面),此时仅仅只是创建,并没有执行,而调用这个函数User的是对象andy,那么this指向的自然是对象andy,那么为什么对象User中会有name,因为你已经复制了一份User函数到对象andy中,用了new关键字就等同于复制了一份。

      在对象方法中,this对象指向了当前这个实例对象。注意: 不管这个函数在哪里什么时候或者怎么样定义,只要它是一个对象实例的方法,那么它的this都是指向这个对象实例的。

    java 程序猿: Class user=new User();似曾相识木有……

     

    function既是函数又可以表示对象,function是函数时候还能当做构造函数,javascript的构造函数我常认为是把类和构造函数合二为一,当然在javascript语言规范里是没有类的概念,但是我这种理解可以作为构造函数和普通函数的一个区别,这样理解起来会更加容易些

    复制代码

    下面我贴出在《javascript高级编程》里对new操作符的解释:

    var o = { prop: 37 };

    new操作符会让构造函数产生如下变化:

    var prop = 15;

    1.       创建一个新对象;

     

    2.       将构造函数的作用域赋给新对象(因此this就指向了这个新对象);

    function independent() {

    3.       执行构造函数中的代码(为这个新对象添加属性);

        return this.prop;

    4.       返回新对象

    }

    ……

     

    妈的:读的那么拗口,不明觉厉…………看图……还不

    o.f = independent;

    不明白……

    console.log(independent()); // logs 15

    var myObj5={

    console.log(o.f()); // logs 37

    name:"andy"

    复制代码

    };

     区别:上面的函数independent如果直接执行,this是指向全局执行环境,那么this.prop是指向我们的全局变量prop的。但是如果将independent设为对象o的一个属性,那么independent中的this就指向了这个实例,同理this.prop就变成了对象o的prop属性。

    var myObj6=new Object();

     

    myObj6.name="andy";

    构造函数

    function  say5(name){

       我们上面讲到了用构造函数创建对象,其实是利用了this的这种特性。在构造函数中,this对象是指向这个构造函数实例化出来的对象。

    console.log(name)

     

    }

    复制代码

    var say6=new Function("name","console.log(name)");

    function Person(name, age, job) {

    console.log(myObj5)

        this.name = name;

    console.log(myObj6)

        this.age = age;

    say5("andy");

        this.job = job;

    say6("andy");

        this.sayName = function () {

    还不明白,就请奶奶买块豆腐,撞死算了……

            alert(this.name);

    第四点也要着重讲下,记住构造函数被new操作,要让new正常作用最好不能在构造函数里写return,没有return的构造函数都是按上面四点执行,有了return情况就复杂了

        };

    return这王八蛋……

    }

    那么我这样呢……

     

    does it have to be like this?Tell me why(why),is there something I have missed?

    var p1 = new Person('Jesse', 18, 'coder');

    Tell me why(why),cos I don't understand…………

    var p2 = new Person('Carol',16,'designer');

    那是因为……because of u?no  return……

    复制代码

    所以:如果返回的是基本类型,就会丢掉…只能返回Object类型……typeof  xx ===“object”

      当我们实例化Person得到p1的时候,this指向p1。而当我们实例化Person得到p2的时候,this是指向p2的。

    看到called 没有?什么鬼!!

     

    其实new关键字会创建一个空的对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样的话函数内部的this就会被这个空的对象替代。

    利用call和apply

    var a={

      当我们用call和apply去调用某一个函数的时候,这个函数中的this对象会被绑定到我们指定的对象上。而call和apply的主要区别就是apply要求传入一个数组作为参数列表。

    name:"andy",

     

    site:"zhoulujun.cn",

    复制代码

    fn:function(age){

    function add(c, d) {

    console.log(this.name age);

        return this.a this.b c d;

    }

    }

    };

     

    var b={

    var o = { a: 1, b: 3 };

    name:"zhoulujun",

     

    site:"www.zhoulujun.cn",

    // 第一个参数会被绑定成函数add的this对象

    fn:function(age){

    add.call(o, 5, 7); // 1 3 5 7 = 16

    console.log(this.name age);

     

    }

    // 第二个参数是数组作为arguments传入方法add

    };

    add.apply(o, [10, 20]); // 1 3 10 20 = 34

    a.fn(2); //andy2

    复制代码

    a.fn.call(b,2) //zhoulujun2

    在bind方法中

    a.fn.apply(b,[2])//zhoulujun2

      bind方法是 存在于function的原型中的 Function.prototype.bind,也就是说所有的function都会有这个方法。但我们调用某一个方法的bind的时候,会产生一个和原来那个方法一样的新方法,只不过this是指向我们传得bind的第一个参数。

    当然,还有bind……

     

    var arr = [1, 2];

    复制代码

    var add = Array.prototype.push.bind(arr, 3);

    function f() {

    // effectively the same as arr.push(3)

        return this.a;

    add();

    }

    // effectively the same as arr.push(3, 4)

     

    add(4);

    var g = f.bind({ a: "azerty" });

    console.log(arr);

    console.log(g()); // azerty

    // <- [1, 2, 3, 3, 4]

     

    在下面的例子,this将无法在作用域链中保持不变。这是规则的缺陷,并且常常会给业余开发者带来困惑。

    var o = { a: 37, f: f, g: g };

    function scoping () {

    console.log(o.f(), o.g()); // 37, azerty

    console.log(this);

    复制代码

    return function () {

    在dom元素事件处理器中

    console.log(this);

      在事件处理函数中,我们的this是指向触发这个事件的dom元素的。

    };

     

    }

    HTML代码

    scoping()();

     

    // <- Window

    复制代码

    // <- Window

    <html>

    有一个常见的方法,创建一个局部变量保持对this的引用,并且在子作用域中不能有同命变量。子作用域中的同名变量将覆盖父作用域中对this的引用。

    <body>

    function retaining () {

        <div id="mydiv" style="width:400px; height:400px; border:1px solid red;"></div>

    var self = this;

        <script type="text/javascript" src="essence.js"></script>

    return function () {

    </body>

    console.log(self);

    </html>

    };

    复制代码

    }

    JavaScript代码

    retaining()();

     

    // <- Window

    function click(e) {

    除非你真的想同时使用父作用域的this,以及当前this值,由于某些莫名其妙的原因,我更喜欢是使用的方法.bind函数。这可以用来将父作用域的this指定给子作用域。

        alert(this.nodeName);

    function bound () {

    }

    return function () {

     

    console.log(this);

    var myDiv = document.getElementById("mydiv");

    }.bind(this);

    myDiv.addEventListener('click', click, false);

    }

      当我们点击页面那个div的时候,毫无疑问,它是会显示DIV的。

    bound()();

    什么是对象 我们可以把Javascript中对象理解为一组无序的键值对,就好像C#中的Dictionarystring,Object一样。Key是属性的名称,而...

    // <- Window

    写到这里,都看不下去,逻辑有点混乱,有的是从前辈哪里引用的。

    改天有时间整理下,然后,在去讲下闭包(……closer

    参考文章:

    http://blog.jobbole.com/81018/

    http://blog.jobbole.com/74110/

    http://www.cnblogs.com/aaronjs/archive/2011/09/02/2164009.html#commentform

    转载请注明文章来源:图说js中的this--深入理解javascript中this指针 - js - 周陆军的个人网站

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:javascript才能难关,深刻精通javascript中this指针

    关键词: