zoukankan      html  css  js  c++  java
  • javascript里面this机制的几个例子

    javascript里面的this值会随着使用场景的不同二发生变化,但是总有一个原则,那就是this总指向当前调用函数的那个对象。以下我会举几个例子来说明这个问题。
    1.this本身总是指向当前的类的实例
    function showMsg(){
    var msg=1;
    alert(this.msg);
    }
    showMsg();
    这样调用的时候显示undefined,因为showMsg没有实例,所以不能用this
    2.下面来看一个点击事件
    <div id="nav" onclick="getId();">ddd</div>
    function getId() {
    alert(this.id)
    }

    在段代码运行结果显示this.id是未定义的,判断this指向谁,看执行时而不是定义时。只要函数没有绑定在对象上使用,那么它的this就是window。 里面这个this是getId函数内部的,但不是div这个dom内部的。
    这段代码相当于div.onclick = function() { getId(); }
    有几种解决方法
    a.
    <div id="nav">ddd</div>
    window.onload=initForm;
    function initForm()
    {
    document.getElementById("nav").onclick=getId;
    }
    function getId() {
    console.log(this)
    alert(this.id)
    }

    在这段代码中,函数被绑定在了对象上。所以结果是可行的。
    b.
    <div id="nav" onclick="getId(this);">ddd</div>
    function getId(elem)
    {
    alert(elem.id);
    }

    这段代码是相当于把this传给了elem ,elem.id是可以得到的。
    3.针对第二个例子的c方法,还想再这多说点其它东西
    <div id="nav" onclick="getId(this);" xid="weixin">ddd</div>
    function getId(elem)
    {
    console.log(elem)
    alert(elem.id ); //这个是可以的 id是html里面有的属性
    alert(elem.xid ); //但是这个不可以,因为xid不是固有属性$(item).attr("xid")
    alert(this.id) //这个也是不行的
    }

    4.可以再看一下这个例子,跟前面是一样的

    <form action="#">
    <select id="nav">
    <option value="">Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    </select>
    </form>

    window.onload=initForm;
    function initForm(){
    document.getElementById("nav").onchange = getId;
    }
    function getId() {
    console.log(this)
    var xid= this.options[this.selectedIndex].value;
    alert(xid);
    } //这个可以得到id值

    这种也是可以得到结果的。

  • 相关阅读:
    QT编译时 cc1plus进程占用大量内存卡死问题解决
    python import cv2 出错:cv2.x86_64-linux-gnu.so: undefined symbol
    python ImportError: No module named builtins
    OSError: libcudart.so.7.5: cannot open shared object file: No such file or directory
    二维数组和二级指针(转)
    C/C++中无条件花括号的妙用
    C语言中do...while(0)的妙用(转载)
    卸载 ibus 使Ubuntu16.04任务栏与启动器消失 问题解决
    关于Qt creator 无法使用fcitx输入中文的问题折腾
    QT error: cannot find -lGL
  • 原文地址:https://www.cnblogs.com/qianxinxu/p/5477294.html
Copyright © 2011-2022 走看看