JavaScript中的this妙用

2019年8月30日 180次阅读 来源: dunizb

JavaScript关键字this始JS剧本能够依据运用这个关键字的上下文将值传递给函数。
我们先来看以下一个网页，在用户单击链接今后，弹出一个alert框，然后再转到href属性所指的网页
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript中的this妙用</title>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <p style="text-algin:center;">
        你好，点击这里去<a id="redirect" href="http://www.mybry.com/obj/store/list.html">旧物市肆</a>
    </p>
</body>
</html>

JS：

window.onload = initAll;
function initAll(){
    document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect(){
    alert("这是我建立的旧物商城，迎接接见！");
    window.location = this;
    return false;
}

在线演示

你可能会主要到，代码中并没有援用特定的网页——这是this关键字的作用之一。this替我们完成的事情之一是从HTML链接取得URL（也就是a标签的href属性）。因为采纳这类体式格局，假如今后剧本改成指向其他的页面而不是旧物市肆页面，就不必修正JS。实际上，能够让WEB站点上的一切链接都挪用这个雷同的JS代码，这一行代码都邑自动取得响应的href值。
如许写另有一个优点：假如用户的浏览器不理解JavaScript（比方禁用了JS）,那末它只会加载HTML页面，而不显现alert提醒，当他们点击链接时，会像平常情况下那样加载页面，不会发作毛病，没有任何问题。
我们在来看一个switch/case例子，建立以下页面：

《JavaScript中的this妙用》
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript中的this妙用</title>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
    <h2>闲置二手图书</h2>
    <form action="#">
        <input type="button" id="Java" value="Java" />
        <input type="button" id="JavaScript" value="JavaScript" />
        <input type="button" id="MySQL" value="MySQL" />
        <input type="button" id="Html" value="HTML5" />
    </form>
</body>
</html>

JS:

window.onload = initAll;
function initAll(){
    document.getElementById("Java").onclick = viewDetail;
    document.getElementById("JavaScript").onclick = viewDetail;
    document.getElementById("MySQL").onclick = viewDetail;
    document.getElementById("Html").onclick = viewDetail;
}
function viewDetail(){
    console.log("this.id="+this.id);
    switch(this.id){
        case "Java" : 
            alert("《Java程序员基本功》这本书是李刚写的，在我的市肆售价30元！");
            break;
        case "JavaScript" : 
            alert("《JavaScript言语精炼》这本书是Yahoo的一名工程师写的，在我的市肆售价15元！");
            break;
        case "MySQL" : 
            alert("《MySQL入门很简单》这本书附带关盘，这个年代实在没什么卵用了，它在我的市肆售价28元！");
            break;
        case "Html" : 
            alert("《HTML5秘笈》这本书是图灵体系的图书，异常值得具有，它在我的市肆售价25元，卖的异常好！");
            break;
        default : 
            alert("没有这本书");
    }
}

在线演示
直接用this.id作为switch的参数也是能够的。

    原文作者：dunizb
    原文地址: https://segmentfault.com/a/1190000004568577
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞