• 学习javascript基础知识系列第二节


    通过一段代码学习javascript基础知识系列


    第二节 - this用法


    this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的自由和灵活,结合apply(call)方法,可以使JS变得异常强大。


    this指向的对象,可以通过以下三点区分:


    1. .当函数仅仅作为函数执行的时候,this指向的是全局的。

    2. .当函数作为构造函数执行的时候,this指向的是当前创建的对象。

    3. .当函数作为对象的方法执行的时候,this指向的是当前的对象。


    注意:

    为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示。

    由于代码中使用了console.log或dir方法,因此如果在ie中执行,请自行替换为alert或注释掉。


    下面通过代码来解释上述三点。


    一、当函数作为函数执行的时候

    有以下函数:

    function A(){
    this.a = "isea533";
    console.log(this.a);
    }

     

    依次在console中输入(请不要输入注释内容):


    //创建函数A()

    function A(){
    this.a = "isea533";
    console.log(this.a);
    }

    undefined

    //输入a,查看全局变量a

    a

    //返回结果为a 未定义

    ReferenceError: a is not defined

    //执行函数A() -- 这里是作为函数执行

    A()

    //console.log输出结果

    isea533

    undefined

    //输入a,查看全局变量

    a

    //此时a已经有值了,说明函数A()执行的this.a是全局的。

    "isea533"

    //给全局a赋值1

    a = 1;

    1

    //输入a,查看全局变量此时结果为1

    a

    1

    //再次执行函数A

    A();

    isea533

    undefined

    //函数A执行后,a的值发生改变,从1变成isea533

    a

    "isea533"


     

    上面的执行结果已经可以说明,当作为函数执行的时候,this为全局的。

    二、当函数作为构造函数执行的时候

    仍然使用上述函数A()

    依次在console中输入(请不要输入注释内容):


    function A(){
    this.a = "isea533";
    console.log(this.a);
    }

    undefined

    //创建对象obj,构造函数执行过程中输出this.a

    var obj = new A();

    isea533

    undefined

    //查看对象的属性a

    obj.a

    "isea533"

    //创建对象obj2

    var obj2 = new A();

    isea533

    undefined

    //查看obj2的属性a

    obj2.a

    "isea533"

    //改变obj的属性a的值

    obj.a = "isea";

    "isea"

    //查看obj2的属性a的值,没有改变

    obj2.a

    "isea533"

    //查看全局变量a,结果为未定义

    a

    ReferenceError: a is not defined


    三、当函数作为对象的方法执行的时候

    其实第三条可以归到第二条中,因为这结果是显而易见的,这里主要是为了说明一些常见的情况,所以特地单独讲解。

    有如下html代码:

     

    <input type="text" id="username" value="isea533" onclick="console.log(this.value)"/>
    <input type="text" id="age" value="30" />
    <script>
    	function A(){
    		console.log(this.value);
    	}
    	document.getElementById("age").onclick = A;
    </script>

    在这两种方式中,我们可以看到this在这里就是指向的相应的input对象。

    这是由于我们把onclick事件添加到了Dom对象上,所以this会指向当前的Dom对象,而不是全局对象。


    我们在看另一种情况:

    依次在console中输入(请不要输入注释内容):


    //创建全局变量a

    var a = "isea533";

    undefined

    //创建函数A

    function A(){
    console.log(this.a);
    }

    undefined

    //创建对象c,c有属性a

    var c = {a:"isea"}

    undefined

    //向c增加方法log = A;

    c.log = A;

    function A(){
    console.log(this.a);
    }

    //执行c的log方法,输出c的属性a而不是全局的a

    c.log();

    isea

    undefined

    //查看全局对象a,值没有发生改变

    a

    "isea533"

    //执行函数A,输出全局对象a的值

    A();

    isea533

    undefined

    //新建对象e = A

    var e = A;

    undefined

    //执行e,这里e()和A()是一样仅仅作为函数执行的,e是函数,不是对象

    e()

    isea533

    undefined

    //我们使用toString.call验证一下,这里e是Function

    toString.call(e)

    "[object Function]"

    //这里c是Object

    toString.call(c)

    "[object Object]"

    通过上面的例子代码,我想你应该对this有一定的了解了,了解this指向在Js编程过程中非常的有用,了解这一点可以在使用过程中方便许多,也能避免出错。




    相关阅读:

    阮一峰:Javascript的this用法



  • 相关阅读:
    Node.js中,获取req请求的原始IP
    socket原理详解
    让Redis在你的系统中发挥更大作用
    Redis复制与可扩展集群搭建【转】
    Linux下查看日志用到的常用命令
    Linux curl命令详解
    Linux 系统结构详解【转】
    网络IO之阻塞、非阻塞、同步、异步总结
    消息队列设计精要【转】
    MySQL的DDL语句、DML语句与DCL语句
  • 原文地址:https://www.cnblogs.com/james1207/p/3279788.html
Copyright © 2020-2023  润新知